티스토리 뷰
오늘은 div 태그를 이용해서 초간단 웹페이지 레이아웃을 구성하는 것을 살펴 보겠습니다. div 태그에 대해서는 아래 포스팅 참조 해주세요.
[HTML5/CSS3] span 태그 & div 태그의 차이
1. 웹페이지 레이아웃 |
웹페이지는 일반적으로 Header 영역 / Navigation 영역 / Content 영역 / Footer 영역으로 나누어집니다. (모든 웹페이지가 그런것은 아닙니다)
- Header 영역 : 웹페이지를 나타내는 로고 또는 소개글이 위치합니다.
- Navigation 영역 : 웹페이지에서 다른 페이지로 이동하는 Menu Bar가 옵니다.
- Content 영역 : 웹 페이지의 내용
- Footer 영역 : 웹 페이지와 관련된 정보
그럼 이러한 4개의 영역으로 나누어지는 간단한 샘플예제를 살펴보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>웹 페이지 레이아웃</title> <style> *{ text-align: center; } .Header{ border : 2px solid red; line-height: 55px; height : 55px; } .Nav{ border : 2px solid blue; height : 110px; } .Content{ border : 2px solid green; height : 300px; line-height: 300px; } .Footer { border : 2px solid black; height : 55px; line-height : 55px; } ul { list-style: none; padding-left : 0px; } </style> </head> <body> <div class = "Header"> Header 영역 </div> <div class = "Nav"> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> </ul> </div> <div class = "Content"> Content 영역 </div> <div class = "Footer"> Footer 영역 </div> </body> </html> | cs |
위 HTML은 위에서 언급한 4개의 영역으로 나누어진 간단한 웹 페이지 레이아웃입니다. 간단한 샘플예제를 구성한다고 해도 CSS를 적용하지 않고는 전혀 레이아웃을 구성한 모습이 아니길래 CSS가 추가된 HTML 소스입니다. 아래는 웹페이지에서 실행한 모습입니다.
우리가 흔히보는 웹페이지 모습은 당연히 아닙니다 .. 이번 포스팅의 목적 중 하나인 div 태그를 통해 이런식으로 레이아웃을 잡을 수 있다는 것을 보여주는 것이니까요. 사이트마다 다양한 형태의 레이아웃을 취하고 있는만큼 한 사이트를 타겟삼아 연습삼아 레이아웃을 짜보는것도 좋은 공부가 될 것 같습니다.
2. 시맨틱 태그 |
방금 전 레이아웃을 잡기 위해서는 div 태그와 해당 태그마다 class 값을 정의하여 css를 적용해주는 방식을 취하고 있습니다. HTML5에서는 이러한 불편한 부분을 해소 해줄수 있는 시맨틱 태그라는 것을 제공하고 있습니다. 아래 샘플 예제를 살펴 보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>웹 페이지 레이아웃</title> <style> *{ text-align: center; } header{ border : 2px solid red; line-height: 55px; height : 55px; } nav{ border : 2px solid blue; height : 110px; } section{ border : 2px solid green; height : 300px; line-height: 300px; } footer { border : 2px solid black; height : 55px; line-height : 55px; } ul { list-style: none; padding-left : 0px; } </style> </head> <body>. <header> Header 영역 </header> <nav> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> </ul> </nav> <section> Content 영역 </section> <footer> Footer 영역 </footer> </body> </html> | cs |
위에 html에서 div 태그 대신에 각 영역에 맞는 시맨틱 태그들을 사용하고 있습니다.
- Header 영역 : <header></header>
- Navigation 영역 : <nav></nav>
- Content 영역 : <section></section>
- Footer 영역 : <footer></footer>
이런식으로 시맨틱 태그를 사용하여 레이아웃 영역을 잡는다면 유지보수 측면에서도 좋을 것 같습니다. 다음 포스팅부터는 CSS에 대해 알아보도록 하겠습니다.
'Programming > HTML&CSS' 카테고리의 다른 글
| [HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1 (0) | 2019.03.25 |
|---|---|
| [HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기 (0) | 2019.03.24 |
| [HTML5/CSS3] span 태그 & div 태그의 차이 (0) | 2019.03.22 |
| [HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기 (0) | 2019.03.21 |
| [HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 (<table> 태그) (0) | 2019.03.20 |