애니빌드.LAB
HTML guide
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
내용에 맞는 요소(태그)들이 추가되었다.
요소(태그) | 설명 |
---|---|
<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는 미디어 컨텐츠를 위해 새로운 표준을 제공한다.
요소(태그) | 설명 |
---|---|
<audio> | 멀티미디어 컨텐츠, 사운드, 음악 그리고 여러 음향물을 위한 태그. |
<video> | 무비 클립이나 기타 비디오물 등의 비디오 컨텐츠를 위한 태그. |
<source> | 비디오나 오디오 요소들 안에 정의된 미디어 소스를 위한 태그. |
<embed> | 플러그인을 사용하는 임베디드 컨텐츠를 위한 태그. |
<track> | 미디어 플레이어에서 사용되는 텍스트 트랙을 위한 태그. |
Canvas
캔버스 요소는 자바스크립트에서 웹페이지에 그림(드로잉)을 그릴때 사용된다.
요소(태그) | 설명 |
---|---|
<canvas> | 스크립트로 그래픽을 만든다. |
ETC
HTML5는 더 많은 기능적인 폼 요소들을 제공한다.
요소(태그) | 설명 |
---|---|
<datalist> | <input>에서 사용할 수 있는 값을 리스트로 사용할 수 있는 태그. |
<keygen> | 유저들을 증명할 수 있는 키를 생성한다. |
<output> | 스크립트로 짜여져서 만들어지는 일반적인 것과 다른 결과물을 위한 태그. |