CSS 다중 열

CSS 다중 열 배치

CSS 다중 열 배치는 우리가 다중 열 텍스트를 쉽게 정의할 수 있게 해줍니다 - 신문처럼:

삼국지

첫 번째 회
원도의 용사들이 만찬을 벌이고 세 결의를 맺었다
황巾 英웅의 머리를 베고 첫 번째 공로를 세웠다
세상의 대세는 오래갈 수 없고, 결국 합쳐지고 분리되는 것입니다: 제국 말기에는 일곱 나라가 분열하여 전쟁을 벌렸고, 마침내 秦에 합쳐졌습니다; 秦이 멸망한 후, Chu와 Han이 분열하여 전쟁을 벌렸고, 마침내 Han에 합쳐졌습니다; Han은 고조왕이 백장을 베고起义하여 천하를 일치시키고, 나중에 광무제가 중興하여, 헌제에 이르러 삼국으로 나뉘게 되었습니다. 혼란의 원인을 추적하면, 아마桓, 맹제로부터 시작되었을 것입니다.桓제는 장류를 금지하고,宦자에게 신뢰를 두었습니다.桓제가 죽은 후, 맹제가 즉위하자, 대장군 소무, 대부 진란이 함께 보좌했습니다; 그때宦자 이절 등이 권력을 장악하자, 소무와 진란이 그들을 살해하려 했지만, 기밀이 유출되어 그들의 공격을 받아 살해당했습니다. 이후 중추는 더욱 불법적으로 행동했습니다. 건릉 2년 4월, 천자는 원덕전에 오르고 앉자마자, 대청으로부터 거대한 청록이 나무에서 날아내려와 의자에 몸을 감았습니다. 천자는 놀라 쓰러지고, 주변 사람들이 급히 구조하여 관중으로 돌아갔습니다. 그러나 나무는 사라졌습니다. 갑자기 큰霹雳과 강우가 시작되어 밤까지 이어졌고, 많은 집이 파괴되었습니다. 건릉 4년 2월, 둥guang은 지진이 일어났고, 또 바다가 범람하여 해안 주민들은 모두 거대한 파도에 의해 바다로 몰려갔습니다. 강화 원년, 여자 닭이 공을 떨어뜨렸습니다. 6월 초, 10여 미터의 검은 기운이 원덕전으로 날아들었습니다. 여름 7월, 유림에서虹이 나타났고, 오리원 산봉우리는 모두 무너졌습니다. 여러 가지 불길한 일이 나타났습니다. 천자는 이러한 재앙의 원인을 물어보고, 예사랑이 상서를 올려, 여자 내관이 정치에 개입한 것이 원인이라고 주장했습니다. 천자는 상서를 보고 기가 막혔습니다. 이절은 천자의 뒤를 쳐다보고, 주변 사람들에게 모두 알렸습니다. 그래서 다른 일로 이절을 죄로 몰아서 농사지을 곳으로 추방했습니다. 나중에 장랑, 조충, 방자, 단균, 이절, 후량, 섬섬, 천광, 하융, 고승 등 열 명이 함께 권력을 장악하여 '십상서'라는 이름을 얻었습니다. 천자는 장랑을 존경하고 '아버지'라고 불렀습니다. 정치는 점점 더 나빠지고, 전 세계 사람들이 혼란을 원하고 도적이 벌어지기 시작했습니다.

...... ......

CSS 다중 칼럼 속성

이 장에서는 다음 다중 칼럼 속성을 배울 것입니다:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

브라우저 지원

표에서 수는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

속성 크롬 IE 파이어폭스 사파리 오페라
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS 다중 칼럼 생성

column-count 속성은 요소가 얼마나 많은 칼럼으로 나누어져야 할지 지정합니다.

다음 예제에서는 <div> 요소 내의 텍스트가 3개의 칼럼으로 나누어집니다:

예제

div {
  column-count: 3;
}

시도해 보세요

CSS 칼럼 간 간격 지정

column-gap 속성은 칼럼 간 간격을 지정합니다:

다음 예제에서는 칼럼 간 간격이 40 픽셀로 설정되었습니다:

예제

div {
  column-gap: 40px;
}

시도해 보세요

CSS 칼럼 규칙

column-rule-style 속성은 칼럼 간 규칙의 스타일을 지정합니다:

예제

div {
  column-rule-style: solid;
}

시도해 보세요

column-rule-width 속성은 칼럼 간 규칙의 너비를 지정합니다:

예제

div {
  column-rule-width: 1px;
}

시도해 보세요

column-rule-color 속성은 칼럼 간 규칙의 색상을 지정합니다:

예제

div {
  column-rule-color: lightblue;
}

시도해 보세요

column-rule 속성은 위의 모든 column-rule-* 속성을 설정하는 요약 속성입니다.

다음 예제에서는 칼럼 간 규칙의 너비, 스타일, 색상을 설정합니다:

예제

div {
  column-rule: 1px solid lightblue;
}

시도해 보세요

요소가 얼마나 많은 칼럼을 건너야 할지 지정

column-span 속성은 요소가 얼마나 많은 칼럼을 건너야 할지 지정합니다.

다음 예제에서는 <h2> 요소가 모든 칼럼을 건너야 한다고 설정되었습니다:

예제

h2 {
  column-span: all;
}

시도해 보세요

칼럼 너비 지정

column-width 속성은 칼럼에 권장 최적 너비를 지정합니다.

다음 예제에서는 칼럼의 권장 최적 너비가 100px로 설정되었습니다:

예제

div {
  column-width: 100px;
}

시도해 보세요

CSS 다중 칼럼 속성

다음 표는 모든 다중 칼럼 속성을 나열합니다:

속성 설명
column-count 요소가 나누어야 할 칼럼 수를 설정합니다.
column-fill 칼럼을 채우는 방법을 설정합니다.
column-gap 칼럼 간 간격을 지정합니다.
column-rule 모든 column-rule-* 속성을 설정하는 요약 속성을 사용합니다.
column-rule-color 규칙의 색상을 설정합니다.
column-rule-style 규칙 스타일을 설정합니다.
column-rule-width 규칙 간격을 설정합니다.
column-span 요소가 얼마나 많은 열을 건너뛰어야 하는지 정의합니다.
column-width 열에 권장되는 최적의 너비를 지정합니다.
columns column-width와 column-count를 설정하는 줄서식 속성