1. 다단 나누기 : 너비 기준(column-width) / 개수 기준(column-count)
단을 나누는 방법에는 두 가지가 있습니다. 하나는 단의 너비를 기준으로 나누는 방법과 단의 개수를 기준으로 나누는 방법이 있습니다. 전자의 경우 column-width를 후자의 경우는 column-count를 사용합니다. 다단의 전체 너비를 500px이라고 가정해봅시다. column-width:100px;으로 단을 나누는 경우 한 단의 크기가 100px로 고정이 되기 때문에 5개의 단이 생성됩니다. column-count:4;의 경우 단의 개수를 4개로 지정하기 때문에 4개의 단을 생성합니다. column-width를 사용하는 경우 브라우저 창의 너비가 달라지면 단의 개수가 변합니다. 반면, column-count를 사용하는 경우 브라우저 창의 너비가 달라져도 단의 개수는 변하지 않지만 단의 너비가 달라집니다.
예를 들어, 전체 너비가 500px에서 전체 창의 너비가 1000px로 증가한다면 각 단의 너비에는 변화가 없는 대신 단의 수는 5개에서 10개로 늘어나게 됩니다. 반면, column-count는 단의 개수는 그대로 고정됩니다. 전체 창의 너비가 500px에서 1000px로 증가해도 columnn-count:4;로 지정되어 있다면 단의 개수는 그대로 4개입니다. 대신, 각 단의 크기가 변합니다. column-width와 column-count는 필요에 따라 자유롭게 선택해서 사용하시면 됩니다.
<head>
<style>
.zero{
column-width:100px;
}
.one{
column-count :3;
}
.two{
column-count : 4;
}
</style>
</head>
<body>
<div class="zero">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
<br><br>
<div class="one">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
<br><br>
<div class="two">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
</body>
2. 단 사이의 간격 지정하기 : column-gap
단 사이의 간격을 지정하고자 하는 경우에는 column-gap을 사용합니다.
<head>
<style>
.two{
column-count : 4;
}
.three{
column-count : 4;
column-gap : 3px;
}
</style>
</head>
<body>
<div class="two">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
<br><br>
<div class="three">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
</body>
3. 다단 합치기 : column-span
다단을 합치기 위해서는 column-span을 사용해야 합니다. column-span의 값을 all로 지정한다면 단을 모두 하나로 합칠 수 있습니다. 단, 단을 부분적으로 합치는 것은 불가능하다는 단점이 있습니다.
<head>
<style>
.zero{
column-width:100px;
}
.add{
column-span : all;
}
</style>
</head>
<body>
<div class="zero">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
<div class="add">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
</body>
4. 다단 구분선 사용하기
다단의 구분선을 사용하기 위해서는 column-rule-style을 사용하면 됩니다. column-rule-style의 값은 아래 표를 참조해주세요.
| 유형 | 설명 |
| none | 기본 값. 구분선 없음 |
| hidden | 구분선 숨기기 |
| solid | 실선 |
| double | 이중선 |
| dashed | 파선 |
| dotted | 점선 |
| ridge | 입체적으로 튀어나온 느낌을 주는 선 |
| groove | 입체적으로 들어간 느낌을 주는 선 |
구분선의 유형을 지정했으면 column-rule-color와 column-rule-width를 사용해 구분선의 색과 두께를 지정할 수 있습니다.
<head>
<style>
.two{
column-count : 4;
}
.line{
column-count : 4;
column-rule-style : dashed;
column-rule-color : #00a0fd;
column-rule-width : 5px;
}
</style>
</head>
<body>
<div class="two">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
<br><br>
<div class="line">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
</body>
6. 접두사 사용하기
다단과 관련된 일부 속성들은 브라우저 제조업체 접두사를 함께 사용해야만 동작하는 경우가 있습니다. 크롬과 사파리 브라우저의 경우 접두사 '-webkit-'를 파이어폭스 브라우저의 경우 접두사 '-moz-'를 익스플로러 브라우저의 경우 '-ms-'를 오페라 브라우저의 경우 '-o-' 접두사를 사용하시면 됩니다.
<head>
<style>
.zero{
column-width:100px;
-webkit-column-width:100px;
-moz-column-width:100px;
-ms-column-width:100px;
-o-column-width:100px;
}
.add{
column-span : all;
}
</style>
</head>
<body>
<div class="zero">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
<div class="add">
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
다단 생성 테스트 화면입니다. 구역이 올바르게 나누어졌는지 확인해주세요.
</div>
</body>'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [CSS] 배치 형태 - position (0) | 2021.01.31 |
|---|---|
| [CSS] 배치 형태 - display (0) | 2021.01.30 |
| [CSS] 글자 스타일 (0) | 2021.01.28 |
| [CSS] 속성 선택자, 가상 클래스 선택자 (0) | 2021.01.27 |
| [CSS] 선택자의 기본 (0) | 2021.01.26 |
