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 /* 컬럼 간의 간격 너비 */
}

이 스타일시트를 이용하여 구축한 다른 예제1예제2도 확인해 보세요.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

avatar

captcha