2020. 8. 21. 15:46ㆍHTML, CSS/HTML
▶ <nav>
-
navigation의 약어, 다른 페이지에 대한 링크를 제공하는 영역.
-
<header> 내의 메뉴, home, about, contact us, 목차, 색인 등을 설정.
- 반드시 header 내에 있어야 하는 것은 아님. -
특정한 페이지에서 외부로 나가는 링크를 그룹화 하여 연결할 때 <nav>를 통해 묶어 줄 수 있음.
- 예) 메뉴는 해당 페이지로 이동하는 역할을 함. 이때 전체 묶음을 <nav>를 통해 만들어낼 수 있음.
- 메뉴를 묶을 경우 보통 <nav> 사용. -
<nav></nav> 안에는 <ol>, <ul>이 삽입되어 사용되는 경우가 많음.
- 목록 세트를 <nav>로 묶어 사용.
- 이 부분이 navigation 역할을 하는 영역이라고 설정하는 것.
-
Block level 요소
※ <header>, <footer>, <main>, <article>, <section>, <aside>, <nav> 등 영역을 설정하는 태그들은 모두 Block level 요소에 해당함.
▶ <address>
-
<body>, <article>, <footer> 등의 기타 영역에서 연락처 정보를 제공하기 위해 사용됨.
- 주소, 이메일, 전화번호 등. -
Block level 요소.
▶ <div>
-
division의 약어, 아무것도 나타내지 않는 Contents 영역을 설정.
-
의미가 없기 때문에 다양한 상황에서 사용할 수 있음.
-
CSS 및 JS를 삽입해서 <div>가 존재하는 영역을 찾고, 스타일링을 하거나 제어를 할 수 있는 영역을 설정하려는 경우 많이 활용.
-
꾸미기 위한 목적으로 많이 사용되며 CSS를 통해 스타일링을 하기 전에는 Contents나 Layout에 어떠한 영향도 주지 않음.
-
Block level 요소.
▶ HTML Contents 구분 사용 예시
'HTML, CSS > HTML' 카테고리의 다른 글
| [HTML] 문자 콘텐츠(2) - p, hr, pre, blockquote (0) | 2020.08.22 |
|---|---|
| [HTML] 문자 콘텐츠(1) - ol, ul, li, dl, dt, dd (0) | 2020.08.22 |
| [HTML] Contents 구분(2) - main, article, section, aside (0) | 2020.08.21 |
| [HTML] Contents 구분(1) - header, footer, h1 ~ h6 (0) | 2020.08.21 |
| [HTML] Block 요소와 Inline 요소 (0) | 2020.08.20 |