Layout 만들기 #3
2010. 5. 9. 22:10미리 CSS에 설정되어 있는 레이아웃 배치에 의해 XHTML에서 클래스의 선택자 변경 만으로 레이아웃 배치를 바꿔보겠습니다. 앞서
column-left?
column-right?에서 설명드렸지만 다음 티스토리, 텍스트큐브의 Layout Project 스킨에서 어떤 모양으로
작동되는지 간단하게 동영상으로 보여드리겠습니다. 이것의 활용 방법은 많이 쓰이지 않지만 미리 설정된 레이아웃이 있다면, 컨텐츠에
따라 레이아웃을 쉽게 변경 가능하다는 점에서 도움이 되리라 생각합니다.
<body class=" ... "> 와 같이 body 테그의 클래스를 통해 전체적인 레이아웃 변화를 보여드리지만 body 태그가 아닌 각 header, content, footer 열에서 사용할 수도 있습니다. 다음과 같습니다.
그리고 column-left와 column-right로 행의 레이아웃 변화 뿐만 아니라 layout-left, layout-center, layout-right의 쓰임도 확인해보세요. 일반적으로는 중앙에 위치하는 레이아웃이 많이 쓰입니다. 하지만 왼쪽으로 위치시키거나 오른쪽으로 위치시키는 레이아웃도 종종 볼 수 있지요.
CSS를 살펴보면 간단합니다.
body태그에 class="column-left" 혹은 class="column-right"라고 사용되었으니 CSS에서는 .column-left #header-alph와 같이 차례대로 선택자를 이어서 쓰면 됩니다. .column-left에는 속성이 float가 쓰이고 값은 left입니다. .column-right는 값이 right 입니다.
<body class=" ... "> 와 같이 body 테그의 클래스를 통해 전체적인 레이아웃 변화를 보여드리지만 body 태그가 아닌 각 header, content, footer 열에서 사용할 수도 있습니다. 다음과 같습니다.
<div id="header" class="column-left">
<div id="content" class="column-right">
<div id="footer" class="column-left">
그리고 column-left와 column-right로 행의 레이아웃 변화 뿐만 아니라 layout-left, layout-center, layout-right의 쓰임도 확인해보세요. 일반적으로는 중앙에 위치하는 레이아웃이 많이 쓰입니다. 하지만 왼쪽으로 위치시키거나 오른쪽으로 위치시키는 레이아웃도 종종 볼 수 있지요.
CSS를 살펴보면 간단합니다.
.column-left #header-alpha, .column-left #header-beta, .column-left #header-gamma {
display: inline;
float: left;
}
.column-right #header-alpha, .column-right #header-beta, .column-right #header-gamma {
display: inline;
float: right;
}
body태그에 class="column-left" 혹은 class="column-right"라고 사용되었으니 CSS에서는 .column-left #header-alph와 같이 차례대로 선택자를 이어서 쓰면 됩니다. .column-left에는 속성이 float가 쓰이고 값은 left입니다. .column-right는 값이 right 입니다.
'Customize' 카테고리의 다른 글
| 가로 사이즈 수정하기 (0) | 2010.05.09 |
|---|---|
| 구글 텍스트큐브의 차이 (0) | 2010.05.09 |
| Layout 만들기 #2 (0) | 2010.05.09 |
| Layout 만들기 #1 (0) | 2010.05.09 |
| 몇 가지 주의 사항 (0) | 2010.05.09 |