column-left? column-right?
2010. 5. 9. 22:04CSS에서가 아닌 XHTML에서 class="left" 혹은 class="right"처럼 왼쪽, 오른쪽을 변경해주는 것만으로
레이아웃 배치를 간단하게 수정하는 방법이 있을까요? 특이한 부분을 이미 발견하셨을 겁니다.
.column-left와 .column-right에 각각 float: left;와 float: right의 속성이 사용되고 있습니다. 미리 레이아웃의 배치를 왼쪽순으로 할 것이냐 오른쪽 순으로 할 것이냐를 설정해 두었다면 XHTML에서 쉽게 .column 클래스를 선택하는 것으로 레이아웃 배치를 변경할 수 있습니다. XHTML에서 다음과 같이 쓸 수 있습니다.
alpha 와 beta 순서는 XHTML에서 먼저 쓰인 영역 순으로 배치가 됩니다. 만약 beta를 alpha보다 먼저 쓴다면, class="column-left"의 경우 beta가 왼쪽에 자리잡게 되겠지요. 저의 디폴트 XHTML+CSS에서는 body 테그에 쓰이고 있으나 elsewhere 열에서만 쓰려면 <div id="elsewhere" class="column-left">와 같이 각 열에 맞출 수도 있습니다. 때문에 이것은 간단한 tip의 역할이고, 개인 사이트에서 레이아웃 배치를 자주 변경하는 경우는 없으니 "column-left", "column-right"와 같은 활동은 거의 쓰이지 않을 것입니다. 그래서 보통은 다음과 같이 left, right 클래스 없이 고정시켜두고 혹시라도 배치를 달리해야한다면 CSS에서 변경해주는 것만으로도 완벽합니다.
하지만 레이아웃을 자유자재로 누구나 쉽게 만들자라는 목표가 있기에 컨텐츠가 다이나믹하다면 이 tip의 활용도가 무척 높을 것입니다. 다음의 영상으로 레이아웃 변경을 자유자재로 하는 모습을 HD화질이니 전체보기로 확인해 보세요.
(스피커 볼륨을 줄여놨는데, 연결이 잘못되어 있었는지 지지직 소리가 녹음됐네요. youtube 볼륨을 끄고 보세요.)
.column-left #elsewhere-alpha, .column-left #elsewhere-beta {
display: inline;
float: left;
}
.column-right #elsewhere-alpha, .column-right #elsewhere-beta {
display: inline;
float: right;
}
.column-left와 .column-right에 각각 float: left;와 float: right의 속성이 사용되고 있습니다. 미리 레이아웃의 배치를 왼쪽순으로 할 것이냐 오른쪽 순으로 할 것이냐를 설정해 두었다면 XHTML에서 쉽게 .column 클래스를 선택하는 것으로 레이아웃 배치를 변경할 수 있습니다. XHTML에서 다음과 같이 쓸 수 있습니다.
<body class="column-left">
alpha 와 beta 순서는 XHTML에서 먼저 쓰인 영역 순으로 배치가 됩니다. 만약 beta를 alpha보다 먼저 쓴다면, class="column-left"의 경우 beta가 왼쪽에 자리잡게 되겠지요. 저의 디폴트 XHTML+CSS에서는 body 테그에 쓰이고 있으나 elsewhere 열에서만 쓰려면 <div id="elsewhere" class="column-left">와 같이 각 열에 맞출 수도 있습니다. 때문에 이것은 간단한 tip의 역할이고, 개인 사이트에서 레이아웃 배치를 자주 변경하는 경우는 없으니 "column-left", "column-right"와 같은 활동은 거의 쓰이지 않을 것입니다. 그래서 보통은 다음과 같이 left, right 클래스 없이 고정시켜두고 혹시라도 배치를 달리해야한다면 CSS에서 변경해주는 것만으로도 완벽합니다.
#elsewhere-alpha, #elsewhere-beta { -> .column-left 클래스 없이 레이아웃 고정
display: inline;
float: left;
}
하지만 레이아웃을 자유자재로 누구나 쉽게 만들자라는 목표가 있기에 컨텐츠가 다이나믹하다면 이 tip의 활용도가 무척 높을 것입니다. 다음의 영상으로 레이아웃 변경을 자유자재로 하는 모습을 HD화질이니 전체보기로 확인해 보세요.
(스피커 볼륨을 줄여놨는데, 연결이 잘못되어 있었는지 지지직 소리가 녹음됐네요. youtube 볼륨을 끄고 보세요.)
'Customize' 카테고리의 다른 글
| Layout 만들기 #1 (0) | 2010.05.09 |
|---|---|
| 몇 가지 주의 사항 (0) | 2010.05.09 |
| 열과 행으로 마무리 (0) | 2010.05.09 |
| Default XHTML+CSS 두번째 (0) | 2010.05.09 |
| Default XHTML+CSS (0) | 2010.05.09 |