728x90
구조 관련 요소
기존 HTML에서는 콘텐츠의 구조를 구분할 수 있는 시맨틱한 요소가 제공되지 않았지만, HTML5에서는 구조를 설계할 수 있는 main, nav, section, article, aside, header, footer 등 다양한 구조 관련 요소가 새롭게 추가되었습니다. 오늘은 구조 관련 요소들에 대해 알아보겠습니다.
| 요소 유형 | 태그명 | 태그의 의미 및 특징 |
|---|---|---|
| 블록 레벨 요소 | <header> </header> |
1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있습니다. |
| 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>, <footer> 태그는 포함할 수 없습니다. | ||
| <sectionn> </section> |
1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소(<h2>~<h6>)를 포함하는 것이 좋습니다. | |
| 2. 텍스트 요소, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. | ||
| <footer> </footer> |
1. HTML 문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있습니다. | |
| 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>, <footer> 태그는 포함할 수 없습니다. | ||
| <nav> </nav> |
1. HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다. | |
| 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. | ||
| <article> </article> |
1. HTML 문서 내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목 요소(<h2>~<h6>)를 포함하는 것이 좋습니다. | |
| 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. | ||
| <aside> </aside> |
1. 메인 콘텐츠와 직접적으로 연관이 없는 영역을 의미하는 태그이며 HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 광고 등의 영역으로 | |
| 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. |
01. 구조 관련 디자인 예시
피그마를 이용해 구조 관련 디자인 예시를 만들어 보았습니다.
02. 구조 관련 예시
구조 태그들을 이용한 HTML 예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>구조 요소</title>
</head>
<body>
<header>
<h1><a href="#">반응형웹</a></h1>
<nav>
<ul>
<li><a href="#">MENU01</a></li>
<li><a href="#">MENU02</a></li>
<li><a href="#">MENU03</a></li>
<li><a href="#">MENU04</a></li>
<li><a href="#">MENU05</a></li>
</ul>
</nav>
</header>
<div id="container">
<section>
<h2>콘텐츠 그룹01</h2>
</section>
<section>
<h2>콘텐츠 그룹02</h2>
</section>
<article>
<h2>주요기사</h2>
</article>
<aside>광고</aside>
</div>
<footer>
<address>경기도 부천시 오정구 삼정동 032)674-5685 icoxpub@naver.com</address>
<p>COPYRIGHT © ALL right reserved.</p>
</footer>
</body>
</html>
결과보기
03. 구조 관련 예시 활용
예시를 활용해 직접 HTML 구조를 설정하고 CSS로 디자인을 입혀 보았습니다.
728x90
반응형
'HTML' 카테고리의 다른 글
| [HTML]블록 / 인라인 레벨 요소 (3) | 2022.08.19 |
|---|---|
| [HTML]웹표준, 웹접근성, 웹호환성 (10) | 2022.08.08 |
댓글