<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sections</title>
</head>
<!-- body 요소는 콘텐츠를 담는 HTML 요소 -->
<!-- body 요소 내부가 콘텐츠 대부분을 차지하니, 용량이나 시맨틱에 신경을 많이 써야함 -->
<body>
<!-- heading 요소: 제목 -->
<!-- h1, h2, h3, h4, h5, h6 -->
<!-- h1: 가장 중요한 제목, h6: 가장 덜 중요한 제목 -->
<!-- heading 요소를 사용하면 제목을 포함하는 익명 영역(anonymous section)을 만든다 -->
<!-- heading 요소를 잘 활용하면 페이지 전체의 outline을 그리는데 용이해진다 -->
<h1>HTML Section 요소</h1>
<p>Section 1</p>
<h2>HTML Article 요소</h2>
<p>Section 2</p>
<h2>HTML Aside 요소</h2>
<p>Section 3</p>
<!-- HTML Article 요소 -->
<!-- |- HTML Section 요소 -->
<!-- |- HTML Aside 요소 -->
<!-- 한 Content 밑에 다른 Content의 제목들이 들어가면서 페이지 전체의 구조를 잡는 행위를 아웃라인을 잡는다라고 함 -->
<!-- 아웃라인이 잘 정의되어 있으면 나중에 네비게이션을 할때에도 용이해지고 크롤러나 콘텐츠를 긁어가는 다양한 도구들이 콘텐츠를 긁어갈때 여기가 가장 중요한 제목이고 이 콘텐츠가 가장 중요한 콘텐츠겠구나를 인식하고 긁어갈 수 있기 때문에 나중에 좀 더 시멘틱 쪽으로 유리한 작업을 수행할 수 있음 -->
<!-- section 요소 & article 요소 -->
<!-- 어떤 경우에 section을 쓰고, 어떤 경우에 article을 쓰는가? -->
<!-- 콘텐츠의 독립성을 기준으로 한다 -->
<!-- article 요소는 콘텐츠가 독립적일 때 사용 -->
<!-- section 요소는 콘텐츠가 다른 콘텐츠와 연관이 있을 때 사용 -->
<!-- div는 정말 최후의 수단으로만 남겨두어라 -->
<!-- article 요소 & section 요소 내에서는 heading 사용을 권장 -->
<article>
<h1>HTML Section 요소</h1>
<p>Section 1</p>
<section>
<h2>HTML Article 요소</h2>
<p>Section 2</p>
</section>
<section>
<h2>HTML Aside 요소</h2>
<p>Section 3</p>
</section>
</article>
<!-- header 요소 & hgroup 요소 -->
<!-- header는 특정한 콘텐츠의 시작부분을 나타내는 요소 -->
<article>
<header>
<!-- hgroup 요소는 heading 요소를 그룹화하여 "제목 - 부제목" 관계를 만드는 요소 -->
<hgroup>
<h1>HTML Section 요소</h1>
<h2>부제목</h2>
</hgroup>
<p>Section 1</p>
</header>
<section>
<h2>HTML Article 요소</h2>
<p>Section 2</p>
</section>
<section>
<h2>HTML Aside 요소</h2>
<p>Section 3</p>
</section>
</article>
<!-- footer & address 요소 -->
<footer>
<!-- footer 요소: 콘텐츠의 마무리 -->
<!-- copyright, 작성자 정보, 작성일 -->
<p>
<cite>출처: <a href="https://www.naver.com">네이버</a></cite>
</p>
<!-- address 요소: contact information -->
<address>
<p>작성자: <a href="mailto:fkstndnjs@naver.com">유석현</a></p>
</address>
<!-- publication information -->
<p>
<time>2022-10-11</time>
</p>
</footer>
<!-- nav: 페이지 네비게이션 콘텐츠를 담는 요소 -->
<nav>
<a href="#html-section">HTML Section 요소</a>
<a href="#html-article">HTML Article 요소</a>
</nav>
<article>
<header>
<hgroup id="html-section">
<h1>HTML Section 요소</h1>
<h2>부제목</h2>
</hgroup>
<p>Section 1</p>
</header>
<section id="html-article">
<h2>HTML Article 요소</h2>
<p>Section 2</p>
</section>
</article>
<!-- aside: 핵심 콘텐츠와 관련이 있기는 하나, 콘첸츠 전체의 흐름과는 크게 관련 없는 콘텐츠 -->
<!-- 콘텐츠 추천, 광고-->
<aside><iframe src="index.html"></iframe></aside>
<!-- heading 요솔ㄹ 활용하여 콘텐츠의 제목을 나타낼 수 있다 -->
<!-- article, section 요소는 페이지의 구역을 나누기 때문에 굉장히 중요한 요소 -->
<!-- header, footer, nav, aside 요소는 각각 용법에 따라 적극적으로 활용 -->
<!-- hgroup 요소를 통해 heading을 그루핑 할 수 있다 -->
<!-- address 요소를 통해 페이지 copyright 혹은 출처 혹은 기타 등등을 담을 수 있다 -->
</body>
</html>
Backend Engineer