2025-01-24T01:44:03

doc/html5/08_섹션.md

@@ -0,0 +1,83 @@
+# 섹션
+HTML5에서 웹 페이지의 구조를 논리적으로 나누고 의미를 부여하기 위해 다양한 섹션 태그가 도입되었습니다. 이러한 섹션 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.
+
+```html
+<article>
+  <header>
+    <h1>제목</h1>
+    <time datetime="2023-11-23">2023년 11월 23일</time>
+  </header>
+  <main>
+    <h2>주요 콘텐츠</h2>
+    <p>본문 내용</p>
+    <img src="image.jpg" alt="이미지 설명">
+  </main>
+  <footer>
+    <p>작성자: 홍길동</p>
+  </footer>
+</article>
+```
+
+## section
+문서의 독립적인 섹션을 나타냅니다. 주제별로 내용을 구분할 때 사용합니다.
+```html
+<section>
+  <h2>첫 번째 섹션</h2>
+  <p>이 섹션은 첫 번째 내용을 담고 있습니다.</p>
+</section>
+```
+
+## article
+독립적인 콘텐츠 블록을 나타냅니다. 블로그 게시글, 뉴스 기사 등과 같이 재사용 가능한 콘텐츠에 사용합니다.
+```html
+<article>
+  <h2>블로그 게시글</h2>
+  <p>오늘의 날씨는 맑습니다.</p>
+</article>
+```
+
+## nav
+네비게이션 링크를 모아놓은 섹션을 나타냅니다.
+```html
+<nav>
+  <ul>
+    <li><a href="#">홈</a></li>
+    <li><a href="#">소개</a></li>
+    <li><a href="#">문의</a></li>
+  </ul>
+</nav>
+```
+
+## aside
+본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
+```html
+<aside>
+  <h3>광고</h3>
+  <img src="ad.jpg" alt="광고 이미지">
+</aside>
+```
+
+## header
+섹션의 헤더 부분을 나타냅니다. 제목, 검색창 등을 포함할 수 있습니다.
+```html
+<header>
+  <h1>웹 사이트 제목</h1>
+  <nav>
+    </nav>
+</header>
+```
+
+## main
+HTML5에서 도입된 태그로, HTML 문서의 주요 콘텐츠를 감싸는 역할을 합니다. 
+* 유일성: 하나의 HTML 문서에 main 태그는 하나만 사용해야 합니다.
+* 위치: body 태그 안에 위치해야 합니다.
+* 내용: main 태그 안에는 웹 페이지의 주요 내용만 포함해야 합니다.
+* 헤더와 푸터: header와 footer 태그는 main 태그의 외부에 위치해야 합니다.
+
+## footer
+섹션의 푸터 부분을 나타냅니다. 저작권 정보, 연락처 등을 포함할 수 있습니다.
+```html
+<footer>
+  <p>&copy; 2023 모든 권리 보유</p>
+</footer>
+```