HTML을 공부하기 위해서는 기본적으로 시맨틱 태그의 화면구조를 이해하고 넘어가야 되는데요. 크게는 head와 body로 body영역의 세부요소로는 header / section / footer가 있죠.
이번글에서는 그 화면구조에 해당되는 시맨틱 태그에 대해 살짝 정리해보고 넘어가볼까 합니다. 학원에서 공부하면서 HTML4와 HTML5의 차이점을 알아봤는데 section에 해당하는 콘텐츠 영역의 시맨틱 태그가 다르더라고요.
HTML4는 <div id="header"><div id="footer>형식으로 모든 구조를 만들지만 html5에서는 <header><footer><nav><article>등으로 시맨틱 태그를 쓰고 div는 css를 넣을때 사용된다고 하네요.
■ HTML5의 기본 구조
이클립스를 켜고 HTML File을 만들면 기본적으로 생성되는 시맨틱 태그들입니다.
● <html>
이 파일은 html이라고 정의 내리고 항상 마지막은 </html>로 마무리 해줘야 합니다.
● <head>
이 영역에는 <meta>,<title>,<style>등의 시맨틱 태그가 들어갑니다. <meta>는 인코딩 타입이 들어가고, <title>은 문서의 제목, <style>에는 자바스크립트나 CSS를 넣습니다.
● <body>
body영역에 코드들이 들어가면 웹 브라우저에 표시됩니다. 또 대부분의 시맨틱 태그들이 이 영역에서 사용되죠. 밑에서 정리할 <header>,<section>,<nav>,<article>,<footer>태그들이 화면을 구성합니다.
■ 웹에서 표시되는 BODY영역의 구조
HTML5의 꽃이라 불리는 body영역안에 위 사진과 같이 화면을 나누기 위해 시맨틱 태그를 이용합니다. 자주 방문하는 포탈 사이트인 네이버나 다음을 방문해봐도 이렇게 구성되어 있죠. 일단 하나 하나 정리해볼게요.
● <header>
위에서 언급한 <head>는 <html>바로 밑에 쓰이지만 <header>는 <body>안에 있기 때문에 둘은 전혀 다릅니다. <header>는 주로 머리말, 제목을 표현하기 위해 쓰입니다.
● <nav>
HTML5에서 새롭게 생긴 시맨틱 태그이고 네비게이션이라고 불립니다. 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크의 역활을 담당합니다. <nav>는 주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용이 가능합니다.
● <section>
<body>영역은 콘텐츠를 <Header>,<section>,<footer>의 3가지 공간에 콘텐츠를 저장하는데요. 그 중 <section>은 본문 콘텐츠를 담고 있습니다. <section>안에 <section>을 넣는 것도 가능합니다.
● <article>
<section>이 콘텐츠를 분류한다면 이 <article>태그안에는 실질적인 내용을 넣습니다. 뉴스로 예를 들면 정치/ 연예/ 사회의 대분류는 <section>이고, 정치의 기사내용과 연예의 기사내용들을 <article>에 넣는 것이죠.
● <aside>
사이드바라고 불르기도 하며, 본문 이외의 내용을 담고 있는 시맨틱 태그입니다. 주로 본문옆에 광고를 달거나 링크들을 이 공간에 넣어 표현합니다.
● <footer>
화면의 구조 중 제일 아래에 위치하고, 회사소개 / 저작권 / 약관 / 제작정보 들이 들어갑니다. 연락처는 <address>태그를 사용하여 표시합니다.
● <div>
위 사진에는 없지만 <div>는 HTML5에 와서 글자나 사진등 콘텐츠들을 묶어서 CSS 스타일을 적용시킬때 사용합니다.
'프로그래밍 > HTML·CSS' 카테고리의 다른 글
| CSS〃간단한 드롭다운 메뉴(Simple Dropdown Menu) (4) | 2019.03.17 |
|---|---|
| CSS〃글자 밑 호버 이펙트 (Bottom Border Hover Effect) (0) | 2019.03.17 |
| HTML5〃목록 태그(ul / ol / dl ) (0) | 2015.11.23 |
| HTML5〃텍스트(Text) 태그 정리 (0) | 2015.11.22 |