9.9 다단(Multi Column)
화면을 여러개의 열로 나눈 구조.
단의 개수
단의 개수를 지정해서 나눌 수 있다.
/*단을 2개로 나눈다*/
.column{
column-count: 2;
}
단의 폭을 지정해서 나눌 수 있다. 현재 화면의 크기에 따라 단의 개수가 결정된다.
/*한 단의 폭이 200px이 되도록 단을 나눈다*/
.column{
column-width: 200px;
}
column-width속성과 column-count 속성을 동시에 부여하면 column-width의 값에 따라 단의 개수를 나누되 column-count 값보다 많아지지 않는다.
/*화면 폭이 ~600px 일 때 까지 단이 2개, ~800px일 때 까지 단이 3개이고 그 이후론 창이 커져도 단의 개수가 늘어나지 않는다. (실제로는 단 사이의 공간 때문에 600, 800px보다 큰 값일때 단의 개수가 변한다.)*/
.column{
column-width: 200px
column-count: 3;
}
특정한 element를 어러 단에 걸쳐서 두고 싶으면 column-span 속성을 사용하면 된다.
<style>
/*class가 column인 element의 단을 4개로 나눔*/
.column{
column-count: 4;
}
/*제목(h1태그)은 모든 단에 걸쳐서 위치*/
h1{
column-span: all;
}
</style>
<body>
<div class="column">
<h1>Lorem ipsum dolor sit amet.</h1>
consectetur adipisicing elit. Molestiae blanditiis nostrum eum ipsam, ...
</div>
</body>단의 속성
단의 세부 사항을 조절할 수 있는 속성이 있다.
.column{
/*단 사이의 간격*/
column-gap: 30px;
/*단 사이의 구분선: column-rule*/
column-rule-width: 2px; /*구분선 두께*/
column-rule-style: dashed; /*구분선 종류*/
column-rule-color: gray; /*구분선 색상*/
column-rule: 2px dashed gray; /*두께, 종류, 색상 순*/
} 참고
'공부를 합니다 > 웹 (Web)' 카테고리의 다른 글
| 생활코딩 CSS_10.1 배경(background) (0) | 2020.04.03 |
|---|---|
| 생활코딩 CSS_10 그래픽 (0) | 2020.04.03 |
| 생활코딩 CSS_9.8 Float (0) | 2020.03.16 |
| 생활코딩 CSS_9.7 미디어 쿼리(Media Query) (0) | 2020.03.16 |
| 생활코딩 CSS_9.6 Flex (0) | 2020.03.05 |