블로그 프로필 이미지

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