안녕하세요 기술지원팀 김명길입니다. 레이아웃을 위한 HTML5 시맨틱 태그들에 대해 알아보겠습니다.
<header> 태그 – 머리말(제목) 정하기
<header> 태그는 특정 부분의 머리말(header)에 해당합니다. 사이트 전체의 제목 부분이 될 수도 있고
<article>의 제목 부분이 될 수도 있습니다. 사이트 시작 부분에 사용하는 헤더라면 사이트 맨 위쪽이나 왼쪽에 주로 삽입 하며, 헤더 안에 <from> 태그를 사용해서 검색창을 넣거나 <nav>태그를 사용해 사이트 메뉴를 넣습니다.
<nav> 태그 – 문서를 연결하는 내비게이션 링크
<nav> 태그는 웹사이트에서 내비게이션 부분인 메뉴 부분에 많이 사용됩니다. HTML이나 XHTML로
웹 문서를 만들때는 별도의 <div>태그를 이용해 ‘nav’나’menu’등 특별한 ID를 지정해 주어야 했지만
HTML5에서는 <nav> 태그가 있기 때문에 이 태그를 사용하면 어느 부분이 내비게이션인지 손쉽게 알 수 있습니다.
<nav> 태그는 <header>나 <footer> 태그 , 또는 <aside> 태그 안에 포함시킬 수도 있고 독립해서 사용할수도 있습니다. 즉 위치에 영향을 받지 않습니다.
<hn> 태그 – 제목 표시하기
<hn> 태그는 각 웹 콘텐츠 영역에서 제목을 표시할 떄 사용하는 태그입니다. 제목태그 <h1>,<h2>, <h3>,<h4>,<h5>,<h6> 태그 처럼 여섯 단계로 나누어져 있고 숫자가 클수록 그 크기가 작아집니다.
<iframe> 태그 – 외부 문서 삽입하기
*프레임: 프레임이란 웹페이지에서 독립적으로 제어할수있는 여러 개의 구역(or여러개의 화면)이라한다
HTML5에서는 기존 HTML의 프레임 세트(frameset) 구조를 허용하지 않지만, 웹 문서 안에 다른 웹 문서를 가져와 표시하는 인라인 프레인(inline frame)은 계속해서 지원합니다. 인라인 프레임을 삽입하는 태그는 <iframe> 태그입니다.
ex) <iframe src=”삽입할 문서주소” [속성 = “속성값”]> </iframe>
<iframe> 태그에서는 여러 속성을 이용해 원하는 형태로 표시할 수 있습니다. 사용할 수 있는 주요 속성은 다음과 같습니다.
width : 인라인 프레임의 너비입니다. 픽셀 값으로 표시합니다.
height : 인라인 프레임의 높이입니다. 픽셀 값으로 표시합니다.
name : 인라인 프레임의 이름입니다.
seamless : 프레임의 테두를 없애서 마치 본문의 일부처럼 보이게 합니다. 속성값없이 seamless라고 쓰면 됩니다. 이소속성은 아직 크롬과 사파리에서만 지원합니다
src : 프레임에 표시할 문서의 주소를 지정합니다.
<section> 태그 – 콘텐츠 영역 나타내기
<section> 태그는 문서에서 콘텐츠 영역을 나타냅니다.
보통 <section> 태그와 <article> 태그가 혼동되기도 하는데,각 <section> 태그는 문맥의 흐름 중에서 주제별로 콘텐츠를 묶을때 사용합니다. 따라서 <header> 태그 안에는 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용됩니다.
<section> 태그 안에 또 다른 <section> 태그를 넣을 수도 있고, 실제 콘텐츠가 들어 있는 <article> 태그를 넣을 수도 있습니다.
<article> 태그 – 실제 콘첸츠 내용 넣기
article의 사전상 의미가 신문이나 잡지에서 ‘기사’를 뜻하는 것처럼 <aritcle> 태그 역시 웹상의 실제 내용을 말합니다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 모두 여기에 해당됩니다.
앞에서 말했듯이 <section>과 <article> 태그를 자주 혼동하곤 하는데, 독립적으로 배포하거나 재 사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 쓰면됩니다. <article> 태그에 비해 <section> 태그는 콘텐츠 기준이라기보다 헤더와 섹션, 푸터와 구분하기 위한 기능상의 구분입니다.
