디폴트 XHTML과 CSS는 github에서 보실 수 있으며 다운로드 가능합니다. 다음 티스토리와 텍스트큐브, 구글 텍스트큐브를 이용하여 테스트해보실 수 있습니다. 제 홈페이지의 XHTML과 CSS를 참고하셔도 좋습니다.  

Github

DAUM TISTORY

TEXTCUBE

TEXTCUBE google - closed

Download

DAUM TISTORY

TEXTCUBE core

TEXTCUBE google - closed

레이아웃에 도전하시려면 기본적인 HTML과 CSS의 사용법은 알고 있어야합니다. 프로그래밍 배우듯 어려운 것이 아니니 부담없이 시작해 보시길 바랍니다. HTML과 CSS에 대한 설명은 하지 않겠습니다. 사실 레이아웃이 사이트 디자인의 절반은 완성한 것이니 레이아웃을 짜보면서 기본적인 사항을 익히는 것도 나쁘지는 않을 것 같습니다. 저 역시 여러 사이트에서 레이아웃 CSS을 따라하며 시작했었습니다.

저의 홈, 메인페이지에서도 동일하게 사용하고 있는 레이아웃의 디폴트 CSS를 먼저 보여드리겠습니다.

/* ---- Container ---- */

#container {                                  -> container는 어떤 레이아웃이든지 전체를 두르는 역할을 합니다.
    border-top: 5px solid #f1f1f1;
}
#container-inner {
    width: 100%;
}


/* ---- Header ---- */

#header {
    clear:both;
    width: 100%;                             -> 저의 홈페이지는 가로 사이즈 100%로 설정되어 있습니다.      
    background-color:#333;
    border-bottom:1px solid #ccc;
}
#header-inner {
    width:980px;                              -> 가로 사이즈 100% 안에 inner는 가로 사이즈 980px로 설정됩니다.
    margin: 0 auto;                           -> 브라우저에서 항상 중앙에 정렬되도록 합니다.
}
#header-alpha {                             -> 이후는 선택사항입니다. alpha와 beta 2개의 행을 만듭니다.
    width:720px;                                   alpha와 beta보다 더 많이 추가할 수도 있습니다.
}
#header-alpha-inner {
    width:700px;
    margin:20px 0;
}
#header-beta {
    width:240px;
}
#header-beta-inner {
    width:220px;
    margin:20px 0;
}
#header-alpha-inner, #header-beta-inner {
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;
}
#header-alpha, #header-beta {
    position: relative;
}
#header-alpha-inner, #header-beta-inner {
    position: static;
}
#header-alpha, #header-beta {
    display: inline;
    float: left;
}

CSS 를 조금이라도 아시는 분이라면 전체 레이아웃이 고작 이것밖에 안되냐고 생각하실 수도 있고, 어렵게 느끼신다면 마냥 복잡해 보일 수도 있겠습니다. CSS를 조금 다를 줄 아신다면 디폴트 CSS를 이용해서 계속 확장시키며 복잡한 레이아웃을 만들 수 있구나 하고 짐작을 하셨나요? 즉 위의 디폴트 CSS의 #Header를 다른 선택자로 변경해서 계속 붙여가는 것이지요.

#header {             -> #header를  #footer로
    clear:both;
    width: 100%;      
    background-color:#333;          
    border-bottom:1px solid #ccc;
}

#header 이 선택자명을 #footer와 같이 변경만 해주시고 이어서 붙여넣으면 된다는 이야기입니다. 그런데 #header만 있어도 될 텐데 #header-inner와 같이 inner 선택자가 있습니다. 그 이유는 레이아웃 각 영역 사이의 간격을 조절하는데 편리하기 때문입니다. #header와 #header-inner를 분리시켜서 CSS의 크기가 2배가 되었네요. 하지만 분리시키지 않았다면 정말 짧다는 걸 아시겠지요? 취향에 따라 대여섯 줄로 짧게 만들어 쓰실 수도 있다는 뜻이지요. Navigation, elsewhere, project, mylog, foot는 모두 똑같은 디폴트 CSS를 통해 반복 사용된 것을 확인해보세요. project에서는 3행이 사용되었습니다. alpha, beta 그리고 gamma가 추가된 것이지요. 실제 저의 메인 페이지 CSS는 다음과 같습니다.

http://minordev.com/layout.css

@charset "utf-8";

/*
     Layout Project by minordev
*/

body {
    margin:0;
    padding:0;
    font-family: Arial, "Helvetica Neue", Verdana;
    line-height: 1;
}
                        
/* ---- Container ---- */

#container {
    border-top: 5px solid #f1f1f1;
}
#container-inner {
    width: 100%;
}
                   
/* ---- Navigation ---- */
#nav {
    clear:both;
    width: 100%;      
    background-color:#333;
    border-bottom:1px solid #ccc;
}
#nav-inner {
    width:980px;
    margin: 0 auto;
}
#nav-alpha {
    width:720px;
}
#nav-alpha-inner {
    width:700px;
    margin:20px 0;
}
#nav-beta {
    width:240px;
}
#nav-beta-inner {
    width:220px;
    margin:20px 0;
}
#nav-alpha-inner, #nav-beta-inner {
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;
}
#nav-alpha, #nav-beta {
    position: relative;
}
#nav-alpha-inner, #nav-beta-inner {
    position: static;
}
.column-left #nav-alpha, .column-left #nav-beta {
    display: inline;
    float: left;
}
.column-right #nav-alpha, .column-right #nav-beta {
    display: inline;
    float: right;
}

/* ---- Elsewhere  ---- */

#elsewhere {
    clear:both;
    width: 100%;
    padding: 10px 0;   
    background-color:#fff;
    border-bottom:1px solid #ccc;
}
#elsewhere-inner {   
    width:980px;
    margin: 0 auto;
}
#elsewhere-alpha {
    width:720px;
}
#elsewhere-alpha-inner {
    width:700px;
}
#elsewhere-beta {
    width:240px;
}
#elsewhere-beta-inner {
    width:220px;
}
#elsewhere-alpha-inner, #elsewhere-beta-inner {
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;
}
#elsewhere-alpha, #elsewhere-beta {
    position: relative;
}
#elsewhere-alpha-inner, #elsewhere-beta-inner {
    position: static;
}
.column-left #elsewhere-alpha, .column-left #elsewhere-beta {
    display: inline;
    float: left;
}
.column-right #elsewhere-alpha, .column-right #elsewhere-beta {
    display: inline;
    float: right;
}
            
/* ---- Project ---- */
            
#project {
    clear:both;
    width: 100%;
    padding: 10px 0;   
    background-color:#f9f9f9;
    border-bottom:1px solid #ccc;
}
#project-inner {
    width:980px;
    margin: 0 auto;
}
#project-alpha {
    width:480px;
}
#project-beta {
    width:240px;
}
#project-gamma {
    width:240px;   
}
#project-alpha-inner {
    width:460px;
    margin:20px 0;
}
#project-beta-inner {
    width:220px;
    margin:20px 0;
}      
#project-gamma-inner {
    width:220px;
    margin:20px 0;   
}
#project-alpha-inner, #project-beta-inner, #project-gamma-inner {
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;
}
#project-alpha, #project-beta, #project-gamma {
    position: relative;
}
#project-alpha-inner, #project-beta-inner, #project-gamma-inner {
    position: static;
}
.column-left #project-alpha, .column-left #project-beta, .column-left #project-gamma {
    display: inline;
    float: left;
}
.column-right #project-alpha, .column-right #project-beta, .column-right #project-gamma {
    display: inline;
    float: right;
}
                     
/* ---- mylog ---- */

#mylog {
    clear:both;
    width: 100%;
    background-color:#fff;
    border-bottom:1px solid #ccc;
}
#mylog-inner {
    width:980px;
    margin: 0 auto;
}
#mylog-alpha {
    width:720px;
}
#mylog-beta {
    width:240px;
}
#mylog-alpha-inner {
    width:700px;
    margin:20px 0;
}
#mylog-beta-inner {
    width:220px;
    margin:20px 0;
}
#mylog-alpha-inner, #mylog-beta-inner {
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;
}
#mylog-alpha, #mylog-beta {
    position: relative;
}
#mylog-alpha-inner, #mylog-beta-inner {
    position: static;
}
.column-left #mylog-alpha, .column-left #mylog-beta {
    display: inline;
    float: left;
}
.column-right #mylog-alpha, .column-right #mylog-beta {
    display: inline;
    float: right;
}

/* ---- Footer ---- */

#footer {
    clear:both;
    width:100%;
    margin-bottom: 20px;
    padding-bottom: 10px;
    background-color:#333;
}
#footer-inner {
    width:980px;
    margin:0 auto;
}
#footer-alpha {
    width:720px;
    font-size:10px;
}
#footer-beta {
    width:240px;
    font-size:10px;
}
#footer-alpha-inner {
    width:700px;
}
#footer-beta-inner {
    width:220px;
}
#footer-alpha-inner, #footer-beta-inner {
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;
}
#footer-alpha, #footer-beta {
    position: relative;
}
#footer-alpha-inner, #footer-beta-inner {
    position: static;
}
.column-left #footer-alpha, .column-left #footer-beta {
    display: inline;
    float: left;
}
.column-right #footer-alpha, .column-right #footer-beta {
    display: inline;
    float: right;
}
                 
/* Utilities ----------------------------------------------------------------- */
                 
#nav:after,
#nav-inner:after,
#elsewhere:after,
#elsewhere-inner:after,
#project:after,
#project-inner:after,
#mylog:after,
#mylog-inner:after,
#footer:after,
#footer-inner:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
}