열과 행으로 마무리

열(세로, row)과 행(가로, column)으로 레이아웃을 마무리 지을 수 있습니다. 앞서 열을 맞춰봤으니 행을 설정해보겠습니다. 행의 선택자는 알파, 베타, 감마로 부르도록 하겠습니다. inner 역시 포함되어 있지요. 

#alpha { ... }
#alpha-inner { ... }

#beta { ...}
#beta-inner { ... }

제 홈페이지의 첫번째 컨텐츠는 ElseWhere입니다. 그리고 오른쪽에 Profile이 있습니다. 즉 2개의 행이 사용되고 있습니다. 그러니까 #alpha와 #beta로 되어 있는 것이지요. 전체 XHTML 소스를 간추려 살펴보겠습니다.

<!-- elsewhere -->
<div id="elsewhere">
    <div id="elsewhere-inner">

         <!-- 알파 영역 -->
         <div id="elsewhere-alpha">
             <div id="elsewhere-alpha-inner">

              <h1>ElseWhere</h1>
              <mt:ActionStreams> ... ...  </mt:ActionStreams>

             </div>
         </div>
         <!-- 알파 영역 끝 -->


         <!-- 베타 영역 -->
         <div id="elsewhere-beta">
             <div id="elsewhere-beta-inner">

            <mt:OtherProfiles> ... ... </mt:OtherProfiles>

             </div>
         </div>
         <!-- 베타 영역 끝 -->

    </div>
</div>

"elsewhere-alpha" 영역에 저의 최근 웹로그(기록)이 표시되고 "elsewhere-beta" 영역에 제가 이용하는 사이트의 프로필 링크가 표시된다는 걸 확인하셨습니다. 만약 행을 하나 더 추가하고자 한다면 선택자 명칭만 다를 뿐인 "elsewhere-gamma"를 beta 다음에 이어 넣으면 됩니다. 행을 4개로 할 경우 "elswhere-delta"를 이어붙이면 되고, 행을 5개로 한다면... force인가? 뭐로 하든 자신에게 편한 명칭을 쓰면 됩니다.

<!-- 감마 영역 -->
<div id="elsewhere-gamma">
      <div id="elsewhere-gamma-inner">
                       ... ...
      </div>
</div>
<!-- 감마 영역 끝 -->

CSS를 살펴보겠습니다. Default XHTML+CSS에서 전체 CSS를 이미 보셨겠지만 간추려서 살펴보겠습니다.

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

#elsewhere {
    clear:both;
    width: 100%;                         -> 화면 전체를 표시하기 위한 가로 크기 100% 설정
    padding: 10px 0;   
    background-color:#fff;
    border-bottom:1px solid #ccc;
}
#elsewhere-inner {   
    width:980px;                          -> 중앙 정렬을 위해 980px 크기와 margin:0 auto 설정
    margin: 0 auto;
}
#elsewhere-alpha {
    width:720px;                          -> 알파 영역의 전체 크기 720px
}
#elsewhere-alpha-inner {
    width:700px;                          -> 알바-inner 크기 700px
}
#elsewhere-beta {
    width:240px;                          -> 베타 영역의 전체 크기 240px
}
#elsewhere-beta-inner {
    width:220px;                          -> 베타-inner 크기 220px
}
#elsewhere-alpha-inner, #elsewhere-beta-inner {
    overflow: hidden;
    margin-right: 10px;                 -> 알파, 베타 inner의 크기가 영역 전체 크기보다 작은 이유
    margin-left: 10px;                       바로 margin 좌우로 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;
}

컨텐츠가 무엇인가에 따라 간격 margin 혹은 padding이 다를 테니 여백을 살짝 주는 것도 좋습니다. 전체 크기를 조금 더 넓게 설정해주는 것이 CSS를 완벽하게 다를 줄 모르는 분들에게는 도움이 되리라 생각합니다.