Column 요소 스타일 [Jquery, CSS]

공부/Jquery,CSS  2016.03.16 03:17

안녕하세요. 명월입니다
저번 포스트까지 선택자에 관해서 공부하였으면 이번 포스트부터 Style 효과에 관해서 공부하겠습니다.


CSS는 기본적으로 글자, 색, 배경이 기본 스타일인데 그 부분은 거의 제가 알고 있는 부분이라서 일단은 생략하겠습니다. 공부하다가 모르는 게 나오면 포스트를 하는 거로 하겠습니다.


이번 포스트는 저도 처음 보는 스타일 요소인데 챕터는 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 개 페이지 지정 스타일

일단 Column style에 관한 내용은 정리했습니다. 다음은 예제를 통해서 각 스타일을 공부해 보겠습니다.



연습을 위한 예제를 작성하였습니다. 그럼 위의 표에 있는 스타일들을 적용해서 어떤 효과가 있는지 공부하겠습니다.


※Column스타일은 크롬, 사파리는 -webkit-, 파이어폭스는 -moz-, MS는 -ms-의 접두어가 필요합니다.



먼저 column의 경우는 사이즈는 폭에 따라 변경된다고 하니 구분하기가 어렵고 먼저 그 뒤 숫자 3은 3단 페이지를 생성시킨다는 뜻이고 gap은 각 column 안의 간격, 룰은 파란 선의 굵기 스타일입니다.
그리고 h1에는 span이 붙어 있는데 이 3개의 Column을 지나는 h1을 뜻하는 것입니다. 즉 위 타이틀같이 생성되었습니다. 마지막 hr에 break 스타일을 쓰므로 다음 컬럼으로 재작성의 의미가 있습니다.


개인적으로 예제를 만들면서 사용해 봤는데 다루기가 쉽지가 않네요.. 페이지 벗어나기가 일쑤고 크기를 변경하면 재갱신이 일어나지 않아 선과 글자가 깨짐 현상도 나타납니다. 이미지 리스트를 만들 때 정도 이외에는 사용할 일이 없을 듯싶네요..
혹시 사용하고 계신 분 있으면 꼭 보고 싶네요.


댓글 0개가 달렸습니다.
댓글쓰기