CSS 다중 열

CSS 다중 열 배치

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

삼국지

첫 번째 회
양桃园의 英豪가 세 번째 결의를 맺었다
황巾의 英雄을 쳐서 첫 번째 공로를 세웠다

세상의 대세는 오래 갈수록 합쳐지고, 합쳐지면 분리되는 것입니다: 주말의 일곱 나라가 분열하여 청을 합쳐졌고, 청이 멸망한 후, 진, 한이 분열되어 한을 합쳐졌습니다; 한나라는 고조공이 흰 뱀을 쳐서起义하여 천하를 일치시키고, 나중에 광무 중興하여 선제에 이르러 삼국으로 분리되었습니다. 분열의 원인을 추적하면, 헌, 맹제 두제가 시작된 것입니다. 헌제는 선량한 사람들을 금속어망에 가두고,宦자를 신뢰했습니다. 헌제가 죽자, 맹제가 즉위하여 대장군 수우, 대부 진란이 함께 지지했습니다; 그때宦자 조절 등이 권력을 행사하자, 수우, 진란이 그들을 죽이려 했지만, 사건이 비밀로 유지되지 않아 그들의 손에 죽었습니다. 중추는 이후로 더욱 힘을 썼습니다. 건宁 원년 사월 보름날, 제가 원덕전에 들어갔습니다. 좌석에 앉으려 했을 때, 전각에서 갑자기 거대한 청색의 뱀이 기둥에서 날아내려서 의자에 떨어졌습니다. 제가 놀라서 쓰러졌고, 주변 사람들이 급히 치료해 주어 궁으로 들어갔습니다. 모든 관리들이 피신했습니다. 순간, 뱀은 사라졌습니다. 갑자기 커다란 雷와 비가 내리고, 눈보라까지 떨어져 밤까지 멈추지 않았습니다. 많은 집이 파괴되었습니다. 건宁 네 년二月, 둥양에서 지진이 일어났습니다; 또한 바다가 범람하여 해안 주민들은 모두 거대한 파도에 몰려 바다로 들어갔습니다. 광화 원년, 암자가 수제로 변했습니다.六月朔, 검은 기운이 열丈이 넘어 원덕전으로 날아들었습니다. 여름七月,虹이 옥당에서 나타났고, 오원산 연안이 모두 무너졌습니다. 여러 가지 불祥이 일어났고, 단 하나의 원인만은 아닙니다. 제가 재상들에게 재앙의 원인을 묻는 칙서를 내렸고, 상서 양룡이 상소를 올려, 궁중에서 여자들이 정치를 행사하는 것이 원인이라고 말했습니다. 그의 말은 매우 직설적이었습니다. 제가 상소를 보고 서로를 탄식하며 옷을 바꿨습니다. 조절은 뒤에서 조용히 보았고, 그의 말을 모두 주변 사람들에게 전했습니다; 그리고 그를 다른 일로 죄로 몰아넣고 농촌으로 추방했습니다. 나중에 장랑, 조충, 방추, 단균, 조절, 후량, 절소, 정강, 하융, 고승 등 열인이 서로 협력하여 악행을 저지르고, '십상시'라고 불렸습니다. 제가 장랑을 존경하며 '아부'라고 불렀습니다. 정치는 점점 더 나빠지고, 전국의 인심이 혼란스럽게 되어 도적들이 많이 일어났습니다.

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

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를 설정하는 간단한 속성