1. 문서파일 구조
-
HTML.BODY요소는 자신의 요소 안에 존재하는 모든 요소들의 root(root section)가 되고,
Body Section안에서 크게header와footer로 구분지을 수 있습니다. -
header요소는 일반적으로 로고, 내비게이션, 검색 등과 같은 것을 포함. -
본문의 주요 컨텐츠의 경우에는
main요소를 사용할 수 있다. -
본문의 하단 영역에서는
footer요소를 사용해 내비게이션, 사이트에 대한 정보,
저작권 등의 내용을 작성할 수 있습니다. -
일반적으로 카테고리를 분류하려는 목적에서 사용되는
general section이 있으며
이 안에서 신문의 기사나 블로그의 기사글등을article요소로 사용할 수 있습니다. -
보조적인 수단으로
aside요소가 있고, 해당 요소는 광고(배너)와 같은 내용을 포함합니다.
1.1 컨테이너와의 차이
-
섹션 요소는 일반적인 컨테이너 태그인
divspan처럼 단순하게 요소들을 그룹핑 해주는
개념이 아닙니다. -
section요쇼는HTML문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다.
1.2 Section
-
Section태그는 문서 파일에서 독립적인 구획을 나타낼 때 사용합니다.
보통 제목 태그(h)를 자식요소로 같이 사용합니다. -
div요소처럼 사용될순 있지만, 다른 컨텐츠와 구분하기 위해서 주로 사용됩니다.
<body>
<h1>Choosing an Apple</h1>
<!-- Apple에 대한 소개 컨텐츠를 보여주기 위해 섹션으로 구획을 정함 -->
<section>
<h2>Introduction</h2>
<p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>
<!-- Apple을 판단하는 내용을 보여주기 위해 섹션으로 구획을 정함 -->
<section>
<h2>Criteria</h2>
<p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
</section>
</body>
1.3 article
-
article요소는 현재 문서, 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는
요소를 정의할 때 사용합니다. -
블로그 포스터나, 논평, 보도 기사, 소셜 미디어 등에 관한 내용이 포함될 수 있습니다.
<article>
<h2>2월 19일 날씨 정보</h2>
<h3>서울</h3>
<p>맑음</p>
<h3>대전</h3>
<p>흐림</p>
<h3>부산</h3>
<p>비</p>
</article>
섹션 요소들은 제목 태그
h등을 같이 사용하여 컨텐츠의 대한 제목을 포함시켜
독립적인 요소임을 식별해야 합니다. 그렇지 않다면 요소의 내용이 무엇에 관한 내용인지
판별하기 어려워 집니다.
1.4 aside
aside요소는 페이지의 다른 컨텐츠들과 약간의 연관성은 있지만, 분리해서 별도로
페이지 영역을 정의할 때 사용합니다.
<h2>과메기</h2>
<p>과메기는 경상북도 포항 지역의 특산물로 청어나 꽁치를 추운 겨울 동안 얼렸다 녹였다를 반복하여 반건조시킨 음식이다.</p>
<aside>
<h4>포항</h4>
<p>포항시는 대한민국 경상북도 동해안에 위치하고 있으며, 포항시 중심을 관통하는 형산강이 영일만에 유입되면서
넓은 충적평야를 형성하고 있다.</p>
</aside>
1.5 nav
-
nav태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 내비게이션 링크들의
집합을 정의할 때 사용합니다. -
자주 쓰이는 예제는 메뉴, 목차, 색인등이 있습니다.
/* CSS 부분
ul {
list-style-type: none;
}
li {
display: inline-block;
} */
<nav>
<ul>
<li><a href="/html/intro">HTML</a> </li>
<li><a href="/css/intro">CSS</a> </li>
<li><a href="/javascript/intro">JavaScript</a> </li>
</ul>
</nav>
1.6 header
-
header태그는 일반적으로 섹션의 제목, 목차, 검색, 로고 등을 포함하는데 사용합니다. -
헤더는 보통 도입부에 해당하는 컨텐츠나 내비게이션 링크의 집합등과 같은 정보를 포함하게
됩니다. -
하나 이상의 제목 요소(h1~h6), 로고나 아이콘, 저자의 정보등을 요소로 포함할 수 있다.
<article>
<header>
<h3>날씨 정보</h4>
<h4>2월 19일</h4>
<p>- 기상청 제공 -</p>
</header>
<p>서울 : 맑음</p>
<p>대전 : 흐림</p>
<p>부산 : 비</p>
</article>
1.7 footer
-
footer태그는 일반적으로 섹션의 저자, 링크, 저작권 정보, 연락처, 페이지 맨 위로
올라갈 수 있는 Top 버튼 등을 포함하는데 사용됩니다. -
항상 하단의 위치해야 할 필요성은 없으며, 상단에 위치해도 무방합니다.
<footer>
<p>Copyright © 2018 tcpschool.co.,Ltd. All rights reserved.</p>
<address>Contact webmaster for more information. 070-1234-5678</address>
</footer>
1.8 main
-
main요소는 문서 또는 애플리케이션body요소의 메인 컨텐츠에 해당합니다. -
main요소의 컨텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적인 관련이 있는
컨텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함하면 안됩니다. -
하나의 문서에는 하나의
main태그를 사용해야 합니다. -
main요소는articlesection같은 다른 섹션 요소의 자손 요소가 되면 안됩니다.
자손 요소로 저 요소들을 사용할 수는 있습니다.
<main>
<h1>바나나</h1>
<p>바나나는 바나나는 파초과 바나나 속에 속하는 숙근성 영년생 열대과수를 총칭한다.</p>
<article>
<h2>다이어트 식품</h2>
<p>바나나는 탄수화물이 약 27%이고 비타민 A와 C가 풍부하며, 100g당 87kcal의 열량을 갖는다.</p>
</article>
<article>
<h2>다양한 섭취법</h2>
<p>바나나는 열매를 주식으로 이용할 뿐 아니라 미성숙한 열매는 채소로 다양한 요리에 응용된다.</p>
</article>
</main>
main 요소를 사용하는 올바른 마크업
<main><section></section></main>
<main>
<section>
<header></header>
</section>
</main>
<main hidden></main>
<main hidden></main>태그들의 사용 방향
