html5 의 새로운 태그와 속성
- 퍼블리셔/html
- 2011. 12. 21. 06:00
html5의 전체적인 마크업에 대한 글은 쉽지 않게 찾을수 있을겁니다. 그중에서 어떤것이 html5에서 새로 사용하는것인지 한번 알아봅니다.
자세한 것은 나중에 차차 다루기로 하면 전체적으로 새로 생겨난 태그가 무었이고 어디에 사용하는지만 우선 알아봅니다.
일단 다 접고 설명 들어갑니다.
section : 일반적인 문서나 애플리케이션 영역을 표시합니다. 섹션의 제목을 나타내는 h1 ~ h6 와 함께 사용할 수 있습니다. 또한 article 를 포함할 수 있습니다. 티스토리의 경우 본문을 감싸는 큰 디비젼으로 사용하면 됩니다. 즉 본문, 위치로그, 태그,방명록, 공지사항,보호글...등등이 모두 이안에 들어갑니다.
article : 뉴스 기사나 블로그 글 같은 독립적인 텐츠를 표시합니다. 티스토리의 경우 본문이나 보호글, 공지사항, 방명록 등 한페이지에 보여지는 부분을 넣을 수 있습니다.
aside : 문서의 주요 부분을 표시하고 남는 사이드바 콘텐츠를 표시합니다.
여기까지 보면 대략 아래처럼 사용하면 이해하기 편할겁니다.
hgroup : 제목과 그에 관련된 부제목을 하나로 묶을때 사용합니다.
header : 해더부분으로 사이트 소개나 네비게이션 등을 표시하기도 하고 내용 중간에서는 머리글 역활을 하기도 합니다. 예전 마크업중 <div id="header"> 이라고 했던 부분을 그냥 <header> 로 구조적으로 표현합니다.
footer : 푸터 부분을 표시합니다. 사이트 제작자나 저작권 정보 등을 나타낼 떼 주로 사용합니다. 예전에 <div id="footer"> 이라고 마크업하고 제일 하단에 표시했던 부분인데 이제 <footer> 이렇게 간단하게 표시합니다.
nav : 사이트안의 네비게이션 요소로 표시합니다. 이것은 header 안에 하나만 표시하는것이 아니라 필요에 따라 사이드바나 다른곳에서도 표시할 수 있습니다. 뜻은 네비게이션 용도로 사용하면 되는겁니다.
figure : 그림이나 비디오 같은 멀티미디어 요소를 넣을때 사용합니다.
figcaption : figure 안에서 비디오나 멀티미디어의 캡션(제목이나 간략 설명)을 표시합니다.
audio : 멀티미디어 중 음악에 해당하는 부분을 표현할때 사용합니다. API 제공.
video : 멀티미디어 중 비디오에 해당하는 부분을 표현할때 사용합니다.
embed : 플러그인 콘텐츠를 표시합니다.
mark : 텍스트에 형광펜으로 칠한 것과 같은 강조 효과를 나타낼 때 사용합니다.
pregress : 시간이 걸리는 작업과정을 막대로 표시합니다.
meter : 측정값을 표시합니다.
time : 날짜나 시간을 표시합니다.
ruby, rt, rp : 루비 문자를 표현합니다.
canvas : 웹상에 그래픽을 표시합니다. API와 함께 사용해 다양한 애플리케이션을 만들수 있습니다.
command : 사용자 실행 명령어를 표시합니다.
details : 추가적인 정보나 사용자가 요청하는 정보를 표시합니다.
datalist : 사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 목록으로 보여줍니다.
keygen : 양식을 서버로 전송할 때 한 쌍의 키를 만들어 private key는 로컬에 저장하고 public key는 서버에 저장합니다.
output : 수학적인 계산의 결과값을 표시합니다.
html5에서도 계속 사용할 수 있는 태그와 새로운 속성들.
media : 링크할 미디어를 지정합니다.
hreflang : 링크하는 대상의 언어를 지정합니다.
rel : area가 포함된 무서와 area가 링크하는 대상 간의 관계를 지정합니다.
target : href 속성에서 지정한 링크의 target을 지정합니다.
value : 첫번째 항목의 값을 지정합니다. html4에서는 사용하지 않도록 권고했었지만 html5에서는 ol 태그안에 있는 li 태그에서만 사용할 수 있습니다.
charset : 문자 인코딩을 선언합니다.
autofocus : 입력 필드에 포커스를 줍니다. input type="hidden" 일때는 제외.
placeholder : 입력 필드에 힌트 내용을 푯시합니다. 입력을 하기 위해 필드 내부를 클릭하면 힌트내용은 사라집니다. 검색창같은 곳에 미리 검색이라고 써 놓은 경우입니다.
repuired : 필수 입력 필드를 설정합니다.
autocomplete : 자동 완성 기능을 켜거나 끕니다.
min, max : 입력 필드에서 숫자나 범위를 지정할 때 값의 최소값, 최대값을 지정합니다.
multple : 입력 필드에서 값을 여러개 허용합니다.
pattern : 입력 필드에서 조건을 사용한 일반식을 표현합니다.
step : 입력 필드에서 숫자나 범위를 지정할 때 값을 조절하는 단계를 지정합니다.
novalidate : form 에서 서버로 양식을 전송하는 동안 유효했는지 보중할 수 없음을 나타냅니다.
type : 메뉴의 종류를 선택합니다. 선택할 수 있는 값은 toolbar 와 context 입니다.
label : 메뉴명을 지정합니다.
scoped : 해당 요소의 부모 요소와 자식 요소가 스타일의 적용 대상이 됩니다. 이 속성을 지정하지 않으면 문서 전체가 적용 대상이 됩니다.
async : 스크립트를 실행할 수 있게 되면 즉시 비동기적으로 실행됩니다.
menifest : 오프라인 웹 캐시를 사용할 경우 menifest 파일의 경로를 지정합니다.
reversed : 목록 지정에서 이 속성을 지정하면 목록이 역순으로 표시됩니다.
start : 첫번째 항목의 시작값을 지정합니다. 이전 버젼에서는 사용하지 않도록 권고했으나 html5에서는 다시 사용할 수 있습니다.
seamless : 문서 내용의 일부인 것처럼 끼워넣은 표시가 나지 않도록 iframe을 삽입합니다.
sandbox : iframe 안에 플러그인이나 폼, 스크립트 같은 특정 기능을 허용할 수도 있고, 하지 않을 수도 있습니다.
여기까지 간략하게 소개를 했습니다.
전반적인 내용은 아래의 슬라이드를 보시면 전체그림을 잡는데 도움이 되실겁니다.
자세한 것은 나중에 차차 다루기로 하면 전체적으로 새로 생겨난 태그가 무었이고 어디에 사용하는지만 우선 알아봅니다.
일단 다 접고 설명 들어갑니다.
section : 일반적인 문서나 애플리케이션 영역을 표시합니다. 섹션의 제목을 나타내는 h1 ~ h6 와 함께 사용할 수 있습니다. 또한 article 를 포함할 수 있습니다. 티스토리의 경우 본문을 감싸는 큰 디비젼으로 사용하면 됩니다. 즉 본문, 위치로그, 태그,방명록, 공지사항,보호글...등등이 모두 이안에 들어갑니다.
새로운 태그
article : 뉴스 기사나 블로그 글 같은 독립적인 텐츠를 표시합니다. 티스토리의 경우 본문이나 보호글, 공지사항, 방명록 등 한페이지에 보여지는 부분을 넣을 수 있습니다.
aside : 문서의 주요 부분을 표시하고 남는 사이드바 콘텐츠를 표시합니다.
여기까지 보면 대략 아래처럼 사용하면 이해하기 편할겁니다.
<section> <article>본문</article> <article>공지사항 글</article> <article>방명록</article> </section> <aside>사이드바</aside>
hgroup : 제목과 그에 관련된 부제목을 하나로 묶을때 사용합니다.
header : 해더부분으로 사이트 소개나 네비게이션 등을 표시하기도 하고 내용 중간에서는 머리글 역활을 하기도 합니다. 예전 마크업중 <div id="header"> 이라고 했던 부분을 그냥 <header> 로 구조적으로 표현합니다.
footer : 푸터 부분을 표시합니다. 사이트 제작자나 저작권 정보 등을 나타낼 떼 주로 사용합니다. 예전에 <div id="footer"> 이라고 마크업하고 제일 하단에 표시했던 부분인데 이제 <footer> 이렇게 간단하게 표시합니다.
nav : 사이트안의 네비게이션 요소로 표시합니다. 이것은 header 안에 하나만 표시하는것이 아니라 필요에 따라 사이드바나 다른곳에서도 표시할 수 있습니다. 뜻은 네비게이션 용도로 사용하면 되는겁니다.
figure : 그림이나 비디오 같은 멀티미디어 요소를 넣을때 사용합니다.
figcaption : figure 안에서 비디오나 멀티미디어의 캡션(제목이나 간략 설명)을 표시합니다.
audio : 멀티미디어 중 음악에 해당하는 부분을 표현할때 사용합니다. API 제공.
video : 멀티미디어 중 비디오에 해당하는 부분을 표현할때 사용합니다.
embed : 플러그인 콘텐츠를 표시합니다.
mark : 텍스트에 형광펜으로 칠한 것과 같은 강조 효과를 나타낼 때 사용합니다.
pregress : 시간이 걸리는 작업과정을 막대로 표시합니다.
meter : 측정값을 표시합니다.
time : 날짜나 시간을 표시합니다.
ruby, rt, rp : 루비 문자를 표현합니다.
canvas : 웹상에 그래픽을 표시합니다. API와 함께 사용해 다양한 애플리케이션을 만들수 있습니다.
command : 사용자 실행 명령어를 표시합니다.
details : 추가적인 정보나 사용자가 요청하는 정보를 표시합니다.
datalist : 사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 목록으로 보여줍니다.
keygen : 양식을 서버로 전송할 때 한 쌍의 키를 만들어 private key는 로컬에 저장하고 public key는 서버에 저장합니다.
output : 수학적인 계산의 결과값을 표시합니다.
새로 추가된 속성.
html5에서도 계속 사용할 수 있는 태그와 새로운 속성들.
media : 링크할 미디어를 지정합니다.
hreflang : 링크하는 대상의 언어를 지정합니다.
rel : area가 포함된 무서와 area가 링크하는 대상 간의 관계를 지정합니다.
target : href 속성에서 지정한 링크의 target을 지정합니다.
value : 첫번째 항목의 값을 지정합니다. html4에서는 사용하지 않도록 권고했었지만 html5에서는 ol 태그안에 있는 li 태그에서만 사용할 수 있습니다.
charset : 문자 인코딩을 선언합니다.
autofocus : 입력 필드에 포커스를 줍니다. input type="hidden" 일때는 제외.
placeholder : 입력 필드에 힌트 내용을 푯시합니다. 입력을 하기 위해 필드 내부를 클릭하면 힌트내용은 사라집니다. 검색창같은 곳에 미리 검색이라고 써 놓은 경우입니다.
repuired : 필수 입력 필드를 설정합니다.
autocomplete : 자동 완성 기능을 켜거나 끕니다.
min, max : 입력 필드에서 숫자나 범위를 지정할 때 값의 최소값, 최대값을 지정합니다.
multple : 입력 필드에서 값을 여러개 허용합니다.
pattern : 입력 필드에서 조건을 사용한 일반식을 표현합니다.
step : 입력 필드에서 숫자나 범위를 지정할 때 값을 조절하는 단계를 지정합니다.
novalidate : form 에서 서버로 양식을 전송하는 동안 유효했는지 보중할 수 없음을 나타냅니다.
type : 메뉴의 종류를 선택합니다. 선택할 수 있는 값은 toolbar 와 context 입니다.
label : 메뉴명을 지정합니다.
scoped : 해당 요소의 부모 요소와 자식 요소가 스타일의 적용 대상이 됩니다. 이 속성을 지정하지 않으면 문서 전체가 적용 대상이 됩니다.
async : 스크립트를 실행할 수 있게 되면 즉시 비동기적으로 실행됩니다.
menifest : 오프라인 웹 캐시를 사용할 경우 menifest 파일의 경로를 지정합니다.
reversed : 목록 지정에서 이 속성을 지정하면 목록이 역순으로 표시됩니다.
start : 첫번째 항목의 시작값을 지정합니다. 이전 버젼에서는 사용하지 않도록 권고했으나 html5에서는 다시 사용할 수 있습니다.
seamless : 문서 내용의 일부인 것처럼 끼워넣은 표시가 나지 않도록 iframe을 삽입합니다.
sandbox : iframe 안에 플러그인이나 폼, 스크립트 같은 특정 기능을 허용할 수도 있고, 하지 않을 수도 있습니다.
여기까지 간략하게 소개를 했습니다.
전반적인 내용은 아래의 슬라이드를 보시면 전체그림을 잡는데 도움이 되실겁니다.