Study/Javascript, Jquery, CSS
[CSS] Column 요소 스타일
v명월v
2020. 2. 17. 22:59
안녕하세요. 명월입니다.
이 글은 CSS에서 Column 스타일에 대한 설명입니다.
Column 스타일은 저도 자주 사용하는 기능은 아닙니다만, 프로젝트 사양에 따라 사용하기도 하기 때문에 정리해 두었습니다.
Column 스타일 종류는 아래와 같습니다.
| 스타일 프로퍼티 | 설명 |
|---|---|
| column-count | 컬럼의 열 수를 지정하는 것 |
| column-width | 컬럼의 열 폭을 지정하는 것(실제 열 폭은 영역 크기에 따라 변화) |
| columns: -width -count; | 위 두 스타일의 Shorthand 스타일 |
| column-gap | 컬럼 사이의 간격 |
| column-span | 복수의 컬럼을 건너는 요소 |
| column-rule-width | 각 컬럼을 구분하는 선의 굵기 |
| column-rule-style | 각 컬럼을 구분하는 선의 종류 |
| column-rule-color | 각 컬럼을 구분하는 선의 색깔 |
| column-rule | 위 세 두타일의 Shorthand 스타일 |
| break-before | 개 페이지 지정 스타일(전) |
| break-after | 개 페이지 지정 스타일(후) |
| break-inside | 개 페이지 지정 스타일 |
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<h1>CSS 컬럼 스타일의 예제</h1>
안녕하세요... 명월입니다. 이번 포스트는 CSS의 컬럼 스타일에 관해 기술하고 있습니다. 이 글은 예제를 위한 글입니다. 감사합니다.안녕하세요... 명월입니다. 이번 포스트는 CSS의 컬럼 스타일에 관해 기술하고 있습니다. 이 글은 예제를 위한 글입니다. 감사합니다.안녕하세요... 명월입니다. 이번 포스트는 CSS의 컬럼 스타일에 관해 기술하고 있습니다. 이 글은 예제를 위한 글입니다. 감사합니다.안녕하세요... 명월입니다.
<hr />
안녕하세요... 명월입니다. 이번 포스트는 CSS의 컬럼 스타일에 관해 기술하고 있습니다. 이 글은 예제를 위한 글입니다. 감사합니다.안녕하세요... 명월입니다.
</div>
</body>
</html>
위 html 태그를 Column 스타일을 적용하겠습니다.
div {
/* 높이 브라우저의 80%*/
height: calc(80vh);
/* Column은 최소 브라우저의 100px 혹은 3개로 분할한다.*/
columns: 100px 3;
/* Column 간의 간격은 50px로 설정한다. */
column-gap: 50px;
/* Column을 구분하는 선 두께, 유형, 색상 */
column-rule: 2px solid blue;
}
div > h1 {
/* Column 횡단 요소 */
column-span:all;
/* 정렬 스타일: 가운데 */
text-align:center;
}
Column 스타일은 브라우저 사이즈의 폭에 따라 변경됩니다. Column의 폭이 100px 이하가 되면 3개 이하의 분할이 된다.
gap은 각 열 사이의 간격 폭입니다. 그리고 선 두께와 유형, 색상을 설정합니다.
Column 스타일은 위처럼 표현은 됩니다만, 이게 각각의 Column 스타일을 설정할 수가 없습니다. 그래서 문제가 브라우저의 크기에 따라 스타일을 예측하기가 어렵고 세부적인 설정이 어렵습니다.
저도 이 글을 작성하면서 만든 예제도 여러가지 테스트를 했지만, 다른 스타일 적용이나 단락 등을 설정하는게 쉽지가 않네요.
이미지를 위 아래가 아닌 왼쪽 오른쪽으로 나열할 때, 사용할 만하다고 생각됩니다만, 그것도 Column 스타일보단 각각 div로 float 설정으로 나열하는게 더 좋을 것 같네요.
여기까지 CSS에서 Column 스타일에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.