HTML 레이아웃 요소(HTML Layout Elements)
HTML에는 웹 페이지의 다른 부분을 정의하는 여러 의미 요소가 있다:
 |
<header> - 문서 또는 섹션의 헤더를 정의한다 <nav> - 내비게이션 링크 세트를 정의한다 <section> - 문서에서 제목(주제)별로 나눌 수 있는 요소를 정의한다 <article> - 독립적이고 자체적인 콘텐츠를 정의한다 <aside> - 사이드바와 같이 내용 외에 내용을 정의한다 <footer> - 문서 또는 섹션의 바닥글을 정의한다 <details> - 사용자가 필요에 따라 열고 닫을 수 있는 추가 세부 정보를 정의한다 <summary> - <details> 요소의 제목을 정의한다 |
HTML header 요소
<header> 요소에는 웹 사이트의 로고, 제목, 메뉴, 소개 정보 등의 내용을 기술한다.
예시로 네이비의 상단의 로고나 웹사이트 이름 등의 내용을 기술한다.
HTML footer 요소
<footer> 요소에는 웹 사이트의 저작권 정보, 제작자의 정보 등의 내용을 기술한다.
예시로 네이비의 상단의 로고나 웹사이트 이름 등의 내용을 기술한다.
HTML nav 요소
<nav> 요소에는 주로 웹 페이지 전체 페이지의 네비게이션 메뉴를 기술한다.
일반적으로 웹 페이지 상단에 표시된다. 보통 메뉴바를 기술하는데 <nav> 태그를 사용한다.
HTML aside 요소
<aside> 요소에는 주요 컨텐츠 이외에 남아 있는 컨텐츠 등을 기술한다.
웹 페이지에서 왼쪽, 오른쪽 등의 영역을 지정하는데 사용될 수 있다.
네이버 사이트에서는 로그인 페이지 및 광고 컨텐츠를 기술하고 있다.
HTML Section 요소
문서의 가장 핵심적인 내용을 기술하는 부분이다.
하나의 <section>은 하나의 주제를 가지며 보통 h1~h6 태그의 제목 요소와 함께 사용한다.
- 주의사항
- 하나의 section 요소에는 하나의 heading 요소, 즉 h1~h6 태그를 사용해야만 한다.
- 주제별로 나눌 경우에는 하나의 주제 안에 또다른 세부 주제가 있을 경우에는 section 요소 안에 section 요소를 중첩하여 사용한다.
- 중첩하여 heading 요소인 h1~h6태그를 사용할 경우에는 h1~h6 수준을 활용하여 레벨을 결정한다.
통상적인 section의 활용예시는 아래와 같이 사용한다.
첫번째는 주제별로 section 요소를 사용하는 경우이며,
두번째는 section을 중첩하여 메인 주제에 세부 주제를 포함하는 구조의 예시이다.
| <section> <h1>제목1</h1> <p>첫번째 주제에 대한 본문 내용1</p> </section> <section> <h1>제목2</h1> <p>두번째 주제에 대한 본문 내용2</p> </section> |
| <section> <h1>제목1</h1> <p>첫번째 주제에 대한 본문 내용1</p> <section> <h1>제목2</h1> <p>두번째 주제에 대한 본문 내용2</p> </section> </section> |
HTML article 요소
단독적인 주제의 내용을 기술하는 부분이다. 이 부분이 실제의 콘텐츠 내용을 담는 요소이다.
맹수 article이 포함된 section 요소의 예시는 아래와 같다.
| <sectin> <article> <h1>사자</h1> <p>단락 내용 1</p> </article> <article> <h1>호랑이</h1> <p>단락 내용 2</p> </article> <article> <h1>하이에나</h1> <p>단락 내용 3</p> </article> |
아래는 전체적인 HTML 레이아웃의 요소들을 전반적으로 기술한 예제 코드이다.
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>동물의 왕국</title> </head> <body> <header> 정글의 맹수들 </header> <nav>맹수들</nav> <section> <article> 사자 </article> <article> 호랑이 </article> <article> 하이에나 </article> </section> <aside> 사이드바 </aside> <footer> 꼬리말 </footer> </body> </html> |
마무리
전체적인 HTML 레이아웃 요소에 대해 살펴보았다.
HTML 레이아웃 요소에는
- header 요소
- nav 요소
- aside 요소
- section 요소
- article
- footer
등의 요소를 활용하여 HTML 문서의 전체적인 구조를 정의한다.
간단한 것이라도 HTML 구조를 정의하여 코드를 만들어보자...
꼭 실습과 반복만이 여러분의 코드의 실력을 향상시킨다.
모두 화이팅!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 반응형 웹 디자인 (0) | 2023.05.26 |
|---|---|
| HTML 레이아웃 코딩 예제 (0) | 2023.05.25 |
| HTML HEAD 요소 (0) | 2023.05.23 |
| HTML 자바스크립트(Javascript) (0) | 2023.05.22 |
| HTML 파일 경로(File Path) (0) | 2023.05.21 |
댓글