[CSS] Column 요소 스타일

Study/Javascript, Jquery, CSS  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 스타일에 대한 글이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

저작자표시 비영리 동일조건

'Study > Javascript, Jquery, CSS' 카테고리의 다른 글

[CSS] 색 스타일(color style) - 그라데이션(gradient)  (2) 2020.03.10
[CSS] 애니메이션(animation)  (0) 2020.02.28
[CSS] 트랜스폼 (transform)  (0) 2020.02.19
[CSS] 트랜지션 (transition)  (0) 2020.02.18
[CSS] 정렬 스타일(float)  (0) 2020.02.12
[CSS] 위치(postion)과 요소 객체 스타일(display)  (0) 2020.01.29
[CSS] 테두리 및 여백 스타일 - border, margin, padding  (0) 2020.01.28
[CSS] 문자 스타일  (0) 2020.01.27