● <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>태그를 사용하여 표시합니다.
'공부노트 > HTML' 카테고리의 다른 글
| [HTML]Form (0) | 2021.08.20 |
|---|---|
| [HTML]Anchor (0) | 2021.08.19 |
| 첫 시작 0817 Html (0) | 2021.08.18 |