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> 태그 정도 ?

이 글은 본 저작자 표시 규칙 하에 배포할 수 있습니다. 자세한 내용은 Creative Commons 라이선스를 확인하세요.

'Web > HTML CSS' 카테고리의 다른 글

[HTML] <meta> 태그  (0) 2019.12.16
[HTML] DOCTYPE 선언  (0) 2019.12.16
[Bootstrap] AdminLTE - 대시보드 무료 템플릿  (0) 2019.12.04

댓글

댓글을 사용할 수 없습니다.

티스토리툴바