HTML 5의 구조는 크게 헤더와 바디로 나뉜다
헤더는 웹 페이지의 타이틀, 링크 정보(CSS 파일, 폰트 등)이 주로 작성되고
바디는 실제 본문이 되는 부분으로 가장 많은 태그들이 작성되는 공간이다.
그러나 본 게시글에서는 대략적인 구조가 아닌 레이아웃(layout)에 대해 설명하도록 하겠다
| element 명 | element 표기 |
| 헤더 | <header> </header> |
| 바디 | <body> </body> |
| 내비게이션(메뉴) | <nav> </nav> |
| 사이드바 | <aside> </aside> |
| 아티클 | <article> </article> |
| 섹션(메인콘텐츠) | <section> </section> |
| 푸터 | <footer> </footer> |
하나씩 차근차근 해보자!
헤더 <header>
헤더는 브라우저 탭에 표시되는 사이트 제목을 말한다.
▼
푸터 <footer>
푸터는 보여지는 단어처럼 header의 반대격인 foot에 위치한 다는 것이다.
foot은 항상 아래쪽에 위치한다.
▼
위의 결과에서는 footer의 위치가 위쪽에 있어서 무엇인지 파악하기 힘들것이다.
내 블로그의 footer를 찾아보면, 페이지 가장 아래쪽에 위치하는 것을 확인할 수 있다.
바디 <body>
바디는 말 그래도 본체, 몸통을 의미한다.
가장 중요하고 중심이되는 컨텐츠가 포함되어 있다.
예시로 하나 만들어 보자.
▼
아직도 감이 오지 않는다면, 한 예로 네이버의 body 중 일부를 보여주겠다.
페이지 상단에 검색창, 네이버 로고, 메뉴 등이 헤더 안에 속해있는 일부분이다.
내비게이션 <nav>
내비게이션은 메뉴바라고도 할 수 있다.
▼
예제가 될만한 사이트를 찾았다.
이 사이트는 메뉴가 한가지밖에 없지만,
nav 태그 이외에 내비게이션을 생성하는 방법이 또 있다.
네이버에서는 <div>(레이아웃)을 사용해서 메뉴를 표시했다.
아티클 <article>
아티클은 메인 컨텐츠르 표시하는 부분이다.
신문에서 각 아티클을 볼 수 있듯이, 바디는 아티클의 복합적인 구조로 이루어져있기도 하다.
▼
예시로 다음(daum) 사이트를 확인한다.
메뉴바(내비게이션) 아래에 아티클 부분이 파란색으로 표시된 것을 확인할 수 있다.
섹션 <section>
섹션은 아티클을 구성하는 부분이라고 생각할 수 있다.
굳이 아티클을 먼저 선언하고 뒤이어 섹션을 사용하는 것은 아니지만,
섹션이 아티클처럼, 아티클이 섹션처럼 사용될 수도 있다.
▼
예시가 될만한 사이트를 찾아봤다.
사이드바 <aside>
사이드바는 말 그대로 페이지의 사이드에 있는 것이다.
주로 오른쪽에 위치하는 것이 자연스럽다.
▼
예시를 하나 보여주겠다.
뉴스를 보여줄때 오른쪽에 헤드라인만 보이는 것들이 일반적이라고 할 수 있다.
초간단한 HTML의 페이지 구조에 대해서 알아보았다!
'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글
| [HTML] Table 삽입하기 🐱🏍🐱🏍(+ caption, span 등) (2) | 2019.11.22 |
|---|---|
| [HTML] HTML Tags/Elements, Attributes 구분하기 (3) | 2019.11.21 |
| [HTML] HTML 파일 Chrome에서 실행하기 (2) | 2019.11.20 |
| [HTML] VS Code - HTML Extensions 설치, HTML 사용하기 (2) | 2019.11.20 |
| [HTML] HTML 이란 (4) | 2019.11.19 |
댓글