1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
n ..
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
1
2
3
4
5
6
1
2
3
4
5
6
7
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
1
2
3
4
5
6
7
8
9
1
2
1
2
3
4
5
6
7
8
9
a
b
a
c
Vladimir Carrer씨는 스타일시트 단 두줄을 설정하는 것으로 다양한 크기의 컬럼을 설정하는 그리드 프레임웍을 소개했습니다. 위 데모는 아래의 간단한 두줄로 이루어진 스타일시트와 최소한의 HTML 코드만으로 만들어진 것입니다.
.row { display:table; width:960px; margin:0 auto }
.cell { display:table-cell; vertical-align:top; padding-left:10px }
<div class="row">
<div class="cell" style="background-color:#aaa;">1</div>
<div class="cell" style="background-color:#bbb;">2</div>
<div class="cell" style="background-color:#ccc;">3</div>
</div>위 스타일시트를 분석하면 다음과 같습니다.
.row {
display: table; /* 전체 컨테이너에 테이블 스타일을 적용 */
width: 960px; /* 전체 폭, 사이즈 변경을 비롯해 단위 %, em에 변경 가능 */
margin: 0 auto /* 좌우 중앙에 배치 */
}
.cell {
display: table-cell; /* 각 컬럼에 테이블의 셀 스타일을 적용 */
vertical-align: top; /* 상단(top) 정렬 */
padding-left: 10px /* 컬럼 간의 간격 너비 */
}
Comments
Got something to add? You can just leave a comment.
awesome~ RT “@firejune: 단 두줄짜리 컬럼 그리드 스타일시트 http://firejune.com/1643”
from twitter
[경준호] 단 두줄짜리 컬럼 그리드 스타일시트: .row{ display:table; width:660px; margin:0 auto;} .cell{ display:t... http://firejune.com/1643 @trendspottor
from Topsy
Your Reaction Time!