HTML

Start

  • <section>이나 <article> 엘리먼트에 <h1>엘리먼트를 삽입하는것을 권장한다. 만약 h1을 노출시키고 싶지 않으면 .blind 클래스를 사용하여 숨기도록 한다.
    자세한 내용은 HTML5 문서의 섹션과 윤곽에서 참고하길 바란다.
  • 외부 배너의 클래스 이름은 .ad_, 내부 배너의 클래스 이름은 .bnr_ 형식를 권장한다.

HTML5 마크업에 대한 참고사이트

Layout

Main page

메인페이지에서 사용되는 레이아웃 마크업 가이드

main

header#header

h1 : 로고나 사이트명칭

nav.gnb : 보통 우측 상단에 있는 작은버튼(loging, contact us...)

nav.lnb : 주로 사용되고 노출이 큰 메뉴

#container

aside.sideLeft

nav.snb

div.contents

article.spot : 큰배너 이미지&슬라이드 배너

.wrap

article

article

article

aside.sideRight

div.ad_xxx

HTML 소스

<main>
	<!-- Header -->
	<header id="header">
		<h1> 내용 </h1>
		<nav class="gnb"> 내용 </nav>
		<nav class="lnb"> 내용 </nav>
	</header>
	<!-- // Header -->

	<!-- Container -->
	<div id="container">
		<!-- Side left -->
		<aside class="side_left">
			.side_left
			<nav class="snb"> 내용 </nav>
		</aside>
		<!-- // Side left -->
		<!-- Contents -->
		<div class="contents">
			<!-- Spot -->
			<article class="spot">
				.spot
			</article>
			<!-- // Spot -->
			<!-- Body -->
			<div class="body">
				<article>
					<h1>title</h1>
					<p>text</p>
				</article>
				<article>
					<h1>title</h1>
					<p>text</p>
				</article>
				<article>
					<h1>title</h1>
					<p>text</p>
				</article>
			</div>
			<!-- // Body -->
		</div>
		<!-- // Contents -->
		<!-- Side right -->
		<aside class="side_right">.side_right</aside>
		<!-- // Side right -->
	</div>
	<!-- // Container -->

	<!-- Footer -->
	<footer id="footer">
		<h1> 내용 </h1>
		<nav> 내용 </nav>
		<p class="copyright"> </p>
	</footer>
	<!-- // Footer -->
</main>

Sub Page

서브페이지에서 사용되는 레이아웃

main

header#header

div#container

aside.side_left

nav.snb

div.contents

section

h1

div, p, section...

HTML 소스

<main>
	<!-- Header -->
	<header id="header">#header</header>
	<!-- // Header -->

	<!-- Container -->
	<div id="container">
		<!-- Side left -->
		<aside class="side_left">
			.side_left
			<nav class="snb">.snb</nav>
		</aside>
		<!-- // Side left -->
		<!-- Contents -->
		<div class="contents">
			<section>
				<h1>title</h1>
				<p>text</p>
				<section>
					<h1>title</h1>
					<p>text</p>
				</section>
			</section>
		</div>
		<!-- // Contents -->
	</div>
	<!-- // Container -->

	<!-- Footer -->
	<footer id="footer">#footer</footer>
	<!-- // Footer -->
</main>

HTML5 추가요소

Basic

내용에 맞는 요소(태그)들이 추가되었다.

HTML5에서 추가된 요소 목록
요소(태그) 설명
<article> 자체적으로 컨텐츠를 포함하는 신문 사설이나 블로그 포스팅, 포럼 게시글 등 여러곳에서 독립적으로 배포되는 글들을 의미한다.(예 : 뉴스 기사, 블로그 포스팅)
<aside> 컨텐츠의 주변 컨텐츠를 의미하며, aside 안의 컨텐츠들은 기존 컨텐츠를 둘러싸는 컨텐츠여만 한다.(부가적 컨텐츠)
<bdi> 텍스트의 방향(일반적으로 왼쪽->오른쪽)과는 다르게 쓰이는 언어들(아랍어, 히브리어, 페르시안어) 를 위한 태그.
<command> 버튼이나 라디오 버튼, 체크박스를 포함한다.
<details> 전체 문서에 대한 세부적인 설명 혹은 문서의 부분에 대한 설명을 담는다.
<summary> 대문자, 요약, 세부요소의 내부를 의미한다.
<figure> 비디오와 같은 독립적으로 쓰이는 컨텐츠들에 대한 그룹을 정의한다.
<figcaption> 위 <figure> 그룹에 대한 설명.
<footer> 문서나 어떤 영역의 푸터(하단내용) (예 : 저작자의 이름이나 문서의 날짜, 연락처 정보, 저작권 정보)
<header> 문서나 어떤 영역에 대한 서론이다. (예 : 네비게이션)
<mark> 글의 강조된 부분이다.
<meter> 최대값, 최소값을 알고 사용할 수 있을 때 측정한 정도의 크기다.
<nav> 네비게이션 영역이다.
<progress> 어떠한 진행 절차 도중을 의미한다.
<ruby> 주석 부분이다.(중국어 노트 혹은 등장인물 등)
<rt> 위의 <ruby> 에서 사용된 주석을 설명한다.
<rp> 브라우저가 <ruby>를 지원하지 않을 때 보여주는 내용이다.
<section> 챕터(장)들, 제목들, 푸터들 혹은 어떠한 문서의 부분들을 의미한다.
<time> 시간이나 날짜, 혹은 둘 다를 정의한다.
<wbr> 워드 브레이크. line-break를 사용할 수 있는 기회를 정의한다.
(역자주 : wrap기능, 즉 자동 줄바꿈 기능을 CSS로 정의할 수 있도록 따로 <wbr>태그로 사용하고, CSS에서 이를 line-break 속성을 이용해서 정의한다.)

Media

HTML5는 미디어 컨텐츠를 위해 새로운 표준을 제공한다.

HTML5에서 추가된 미디어 요소 목록
요소(태그) 설명
<audio> 멀티미디어 컨텐츠, 사운드, 음악 그리고 여러 음향물을 위한 태그.
<video> 무비 클립이나 기타 비디오물 등의 비디오 컨텐츠를 위한 태그.
<source> 비디오나 오디오 요소들 안에 정의된 미디어 소스를 위한 태그.
<embed> 플러그인을 사용하는 임베디드 컨텐츠를 위한 태그.
<track> 미디어 플레이어에서 사용되는 텍스트 트랙을 위한 태그.

Canvas

캔버스 요소는 자바스크립트에서 웹페이지에 그림(드로잉)을 그릴때 사용된다.

요소(태그) 설명
<canvas> 스크립트로 그래픽을 만든다.

ETC

HTML5는 더 많은 기능적인 폼 요소들을 제공한다.

요소(태그) 설명
<datalist> <input>에서 사용할 수 있는 값을 리스트로 사용할 수 있는 태그.
<keygen> 유저들을 증명할 수 있는 키를 생성한다.
<output> 스크립트로 짜여져서 만들어지는 일반적인 것과 다른 결과물을 위한 태그.
top