[HTML] HTML5 레이아웃 구조
HTML5 레이아웃 구조
웹이든 앱이든 UI를 배우기 위해서 가장 먼저 알아야할게 레이아웃 구조가 아닐까 싶다.
HTML 4.01 버전에서는 레이아웃을 아래와 같이 <div> 태그를 이용해 만들었다.
<body>
<div id="header">헤더(페이지 제목 등이 들어가는 자리)</div>
<div id="nav">네비게이션 바(페이지 상단에 카테고리가 담겨져있는 바)</div>
<div id="contents">콘텐츠(페이지 본문)</div>
<div id="footer">페이지 하단에 저작권이나 사업자 등록번호 같은 것들</div>
</body>
보면 알겠지만, id 속성을 이용해 억지로 의미를 부여한 느낌이다.
HTML5에선 저러한 값들을 아에 태그로 만들었다.
<body>
<header>헤더(페이지 제목 등이 들어가는 자리)</header>
<nav>네비게이션 바(페이지 상단에 카테고리가 담겨져있는 바)</nav>
<section>콘텐츠(페이지 본문)</section>
<footer>페이지 하단에 저작권이나 사업자 등록번호 같은 것들</footer>
</body>
위 예 말고도 새로 추가된 태그는 더 많다.
그 중 추가로 알아두면 좋겠다 싶은건 <aside> 태그 정도 ?
'Web > HTML CSS' 카테고리의 다른 글
| [HTML] <meta> 태그 (0) | 2019.12.16 |
|---|---|
| [HTML] DOCTYPE 선언 (0) | 2019.12.16 |
| [Bootstrap] AdminLTE - 대시보드 무료 템플릿 (0) | 2019.12.04 |