HTML5의 대표적인 새 기능과 태그

1. 시맨틱 태그 

: 다 똑같은 div이지만 시멘틱한 표현을 위해 이름을 붙여준 것. 보고 쉽게 알 수 있도록 전달하는 데 쓴다. 

*시맨틱 태그는 다 block 형이다 ( div )

* semantic : 의미있게 나타내기. 코드를 중구난방 작성하는 것이 아닌 다른 사람들이 봤을 때 이해하기 쉽도록 구조적이고 의미있게 작성하는 것.

1) 기존의 시맨틱 태그 

2) HTML5 에서 등장한 시맨틱 태그 

 

* nav 태그 : 네비게이션 역할을 하는 링크를 담을 때 사용한다. (이전페이지로 가기, 다음페이지로 가기, 목차, )

2. HTML5의 몇가지 새 기능

* HTML은 단순 언어가 아니라 웹환경이다. 

1) canvas : 그림판. 화면상에 그려준다. ( 국내에서 차트를 만들때 주로 사용한다. 희소성 있는 기술) 

2) svg : 기존의 픽셀로 이미지를 만드는 것과 달리 벡터이미지, 점, 선, 면 사용해서 이미지 만든다. 아무리 확대해도 깨지지 않는다. ex)아이콘

            ( 자바스크립트로 만들어줌 )

3) flex 레이아웃 

3. input의 다양한 type 및 속성

1) type = " text" 의 워터마크 : placeholder=" 적고싶은 말 "

: 원래는 이 기능을 javascript로 어렵게 만들었다. explorer 10 이상에서만 가능하다. 

2) type ="data"

- 역삼각형을 누르면 사진에서처럼 달력이 나온다. 

3) type = " time"

4) type = "color"

- 색상자를 누르면 색을 설정하는 화면이 나온다. 

5) type = " number"

value : 아무 설정을 하지 않았을 때 선택되어있는 수 

step : 올라가는 수의 간격

min : 최소값

max : 최대값

4. 미디어 태그 : CSS 가능.

* 이전에 배웠던 이미지태그 : <img src= " "/>

1) 비디오 태그 : <video src= ""/> 

: index.html이 있는 폴더에 video.mp4를 다운로드 받아놓았다. 

- style 태그 이용하여 CSS 주기.

*비디오는 너비-높이 비율을 바꿀 수 없다. 

- video 태그 안에 속성 넣기 : autoplay ( 화면이 뜨면 바로 자동재생 ) 

controls : 동영상 위에 커서를 올리면 사진에서 처럼 control줄이 생긴다. 

loop : 동영상이 계속해서 재생된다.

2) 오디오 태그 : <audeo src=""></audeo>