웹싸이트의 가장 기본적인 레이아웃 구성2015. 10. 1. 13:26
SMALL
웹싸이트의 틀은 기본적으로 header, sidebar, content, footer 로 이루어져 있다. 이건 꼭 구성되어야할 틀의 구성이 아닌, 오랫동안 구성되어온 하나의 습관처럼 되어 만들어진 규칙이기도 하다. HTML5로 넘어오면서 이런 틀의 규칙을 적용하여 좀더 의미있는 요소들이 많이 생겨나게 되었다. 오늘 설명할 레이아웃 구성을 이미지로 표현하면 바로 아래의 기본적인 레이아웃 구성 이미지와 같다.
기본적인 레이아웃 구성 이미지
(이미지1-1)
+ 위의 이미지에서는 표시되지 않았지만, 가장 바깥쪽 테두리는 wrap 요소 이며 sidebar 와 content 를 감싸는 요소는 container 이다.
기본적인 레이아웃 구성요소 설명
wrap : 모든 레이아웃을 감싸고 있는 레이아웃
header : 기본적으로 웹싸이트 로고나 메인메뉴가 들어가는 레이아웃
container : sidebar 레이아웃 과 content 레이아웃을 감싸는 레이아웃
sidebar : 서브메뉴를 표시하는 레이아웃
content : 페이지의 내용을 표시하는 레이아웃
footer : 저작권 글이나, 기타 메뉴가 들어가는 레이아웃
HTML 코드
<!doctype html> <html> <head> <meta charset="utf-8"> <title>가장 기본적인 레이아웃 구성</title> <style> div{ border:solid 1px #000; font-weight:bold; font-size:30px; text-align:center;} #wrap{ width:1024px; padding:10px;background-color:#ccbaba; overflow:hidden; margin:0 auto;} #header{background-color:#1ed741; height:80px; color:#fff;} #container{ padding:10px;background-color:#3d3939; overflow:hidden; margin:10px 0;} #sidebar{ float:left; width:320px;background-color:#f57373; height:400px;} #content{ float:right; width:650px; background-color:#ccbaba; height:400px;} #footer{ background-color:#2f26e4; height:80px; color:#fff;} </style> </head> <body> <div id="wrap"> <div id="header"> header </div> <div id="container"> <div id="sidebar"> sidebar </div> <div id="content"> content </div> </div> <div id="footer"> footer </div> </div> </body> </html>
실행화면 - 크롬
(이미지1-2)
LIST
'웹프로그래밍 > HTML/CSS/SCRIPT' 카테고리의 다른 글
| Uncaught SyntaxError: Unexpected token : (1774) | 2018.09.04 |
|---|---|
| HTML 의 FORM 요소로 지정할 수 있는 속성과 속성값 (346) | 2015.07.20 |
| CSS 의 word-wrap, word-break : 텍스트의 줄바꿈 형식을 지정하고 싶을때 (1326) | 2015.06.23 |
| 웹제작시 정말 유용한 CSS (943) | 2015.06.02 |
| iframe 을 이용하여 페이지 전체 이동없이 원하는 페이지만 로드해보자. (768) | 2015.06.02 |
