열 수 크로스 브라우저. CSS3 다중 열 소개. 우리는 열로 작업합니다. 여러 열 사용

재산 안으로 침입하다현재 요소 내에 페이지 및 열 나누기를 배치하는 방법을 정의합니다. 기본적으로 페이지 또는 열 나누기는 자동으로 설정되며 상위 요소에서 상속되지 않습니다. avoid-page 값은 인쇄할 때와 같이 페이징된 문서의 형식을 지정할 때만 사용되며 브라우저에 표시될 때와 같이 비분할 보기에서는 무시됩니다. avoid-column 값은 다중 열 텍스트에 사용됩니다.

유효한 값

  • CSS2 CSS3 자동- 현재 요소 앞의 자동 페이지 또는 열 나누기(기본값)
  • CSS2 CSS3 피하다
  • CSS3 페이지를 피하십시오- 현재 요소 내에서 페이지 나누기를 취소합니다.
  • CSS3 피하기 열- 현재 요소 내부의 열 나누기 취소

사용 예

안으로 침입: 자동; - 균등 분포

모든 요소 내에서 또는 요소 사이에서 가장 적절한 위치에 나누기가 자동으로 배치되는 열 간 컨텐츠의 균일한 배포. 균일한 분포를 사용하면 텍스트 밀도가 다소 균일한 열의 높이가 거의 동일합니다.

스타일( column-count: 3; column-gap: 2em; column-rule: 1px solid #666; )

텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트

break-inside: avoid-column; - 열 나누기 취소

스타일( column-count: 3; column-gap: 2em; column-rule: 1px solid #666; ) .style div( break-inside: avoid-column; )

첫 번째 블록텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트

두 번째 블록텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트

세 번째 블록텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트

break-inside 속성은 CSS 3 다중 열 레이아웃 모듈 사양에 정의되어 있으며 블록 요소에 적용되고 모든 페이지 미디어에서 유효하며 해당 값은 문서 계층 구조의 상위 요소에서 상속되지 않으며 기본값은 자동입니다. 이 속성은 현재 모든 주요 브라우저에서 지원됩니다.

또한보십시오:

  • break-after - 요소 뒤에 열 또는 페이지 나누기를 설정하는 규칙
  • break-before - 요소 앞에 열 또는 페이지 나누기를 설정하는 규칙
  • -webkit-column-break-after - 요소 뒤에 열 나누기를 설정하는 규칙
  • -webkit-column-break-before - 요소 앞에 열 나누기를 설정하는 규칙
  • -webkit-column-break-inside - 요소 내부에 열 나누기를 설정하는 규칙

기준 치수 CSS3 열신문이나 잡지와 유사하게 여러 세로 컨테이너에 걸쳐 있도록 콘텐츠를 구성할 수 있는 다중 열 레이아웃을 설명합니다. 열에는 제목, 텍스트, 표, 그림 및 기타 인라인 요소가 포함될 수 있습니다.

다중 열 모델

브라우저 지원

즉: 10
가장자리: 12
파이어폭스: 52, 2모즈
크롬: 50, 4 -웹킷-
원정 여행: 9, 3.1 -웹킷-
오페라: 37, 11.5 -웹킷-
iOS 사파리: 9, 3.2 -웹킷-
안드로이드용 UC 브라우저: 11.8
안드로이드용 크롬: 73
삼성 인터넷: 5, 4 -웹킷-

이전 게시물

2012년 11월 24일

영국에서 가장 매력적인 작은 마을 15곳

1. 버릭어폰트위드

Berwick은 10세기에 영국에 합병된 노섬브리아 왕국 시대에 앵글로 색슨족 정착지로 설립되었습니다. 이 지역은 400년 이상 동안 잉글랜드 왕국과 스코틀랜드 왕국 사이의 역사적인 국경 전쟁의 중심이었으며 Berwick의 소유권이 두 왕국 사이에서 여러 차례 바뀌었습니다. 마지막으로 주인이 바뀐 것은 글로스터의 리차드가 1482년에 영국으로 다시 가져갔을 때였습니다. 오늘날까지도 많은 버위커 사람들은 스코틀랜드에 친밀감을 느끼고 있습니다.

오늘날 Berwick-upon-Tweed는 중세 성벽, 엘리자베스 성벽, 13세기 성 유적, 17세기 'Old Bridge', 시청, 영국 최초의 군대 막사, 영국 최북단 호텔 등 눈에 잘 띄는 역사로 많은 사람들이 방문하고 있습니다. .

2.호밀

고대 호밀은 모두 자갈이 깔린 거리와 바다 옆에 무너져 내린 집들이 줄지어 서 있는 곳입니다. 원래 Cinque Ports Confederation의 일부였으며 중세 시대에 무역과 군사 목적으로 중요한 5개의 전략적 도시였던 오늘날 Rye는 사실상 살아있는 박물관입니다. Ypres Tower로 널리 알려진 Rye Castle은 프랑스의 빈번한 습격으로부터 보호하기 위해 Henry III에 의해 1249년에 지어졌습니다. 더 오래된, 노르만 시대의 St. Mary's Church는 마을을 굽어보고 있습니다. Rye는 또한 영국에서 가장 유명한 해변 중 하나인 카이트서퍼와 해변 애호가를 위한 2마일 길이의 놀이터인 Camber Sands에서 불과 몇 분 거리에 있습니다.

그림 1. 다중 열 레이아웃의 예

1. 열의 수와 폭

열의 수와 너비를 결정하는 것은 다중 열 레이아웃을 구축할 때 기본입니다. column-count 및 column-width 속성은 열의 수와 너비를 설정하는 데 사용됩니다.

세 번째 속성인 columns 는 열의 너비와 개수를 동시에 설정하는 속기 속성입니다.

명시적 열 나누기, 콘텐츠 및 높이 제약 조건과 같은 기타 요소는 열의 실제 수와 너비에 영향을 줄 수 있습니다.

1.1. 열 너비: 열 너비 속성

column-width 속성은 각 열이 차지하는 최소 너비를 지정합니다.

속성은 상속되지 않습니다.

통사론

열 너비: 자동; 열 너비: 100px 열 너비: 10em 열 너비: 3.3vw; 열 너비: 상속; 열 너비: 초기;

1.2. 열 수: 열 수 속성

column-count 속성은 열의 수를 나타내며 너비는 사용 가능한 공간의 너비를 기준으로 계산됩니다. column-width 가 column-count 와 동시에 지정되면 column-count 값이 최대 열 수로 간주됩니다.

속성은 상속되지 않습니다.

통사론

열 수: 자동; 열 수: 2; 열 수: 상속; 열 수: 초기;

1.3. 단일 열 속성으로 열 설정

columns 속성은 column-width 및 column-count 를 설정하기 위한 속기 속성입니다. 생략된 값은 초기값으로 설정됩니다.

속성은 상속되지 않습니다.

통사론

열: 12em; /* 열 너비: 12em; 열 수: 자동 */ 열: 자동 12em; /* 열 너비: 12em; 열 수: 자동 */ 열: 2; /* 열 너비: 자동; 열 개수: 2 */ 열: 2 자동; /* 열 너비: 자동; 열 수: 2 */ 열: 자동; /* 열 너비: 자동; 열 개수: 자동 */ 열: 자동 자동; /* 열 너비: 자동; 열 개수: 자동 */ 열: 상속; 열: 초기;

2. 열 간격 및 구분선

열 간격 및 구분선은 단일 다중 열 컨테이너의 열 사이에 배치됩니다. 공백 및 구분 기호의 길이는 열의 높이와 같습니다. 열 간격은 공간을 차지합니다. 즉, 인접한 열의 콘텐츠를 밀어냅니다.

구분선은 공간을 차지하지 않고 열 사이의 간격 중간에 그립니다. 즉, 구분선의 존재 또는 두께는 다른 것의 배치를 변경하지 않습니다.

행은 다중 열 요소의 경계 바로 위에 채워집니다. 요소에 스크롤 영역이 있는 경우 구분선이 열과 함께 스크롤됩니다. 구분선은 콘텐츠가 있는 두 열 사이에만 표시됩니다.

2.1. 열 사이의 간격: column-gap 속성

column-gap 속성은 열 사이의 간격을 정의합니다. 열에 column-rule 속성을 사용하여 구분선이 설정되어 있는 경우 이 선은 간격 중간에 위치하며 너비는 전체 너비를 변경하지 않습니다.

속성은 상속되지 않습니다.

통사론

열 간격: 정상; 열 간격: 3px; 컬럼-갭: 2.5em; 컬럼 갭: 3% 열 간격: 상속; 열 간격: 초기;

2.2. 구분선 색상: column-rule-color 속성

column-rule-color 속성은 구분선의 색상을 지정합니다.

속성은 상속되지 않습니다.

통사론

열 규칙 색상: 분홍색; 열 규칙 색상: #D71C3B; 열-규칙-색상: rgb(192, 56, 78); 열 규칙 색상: 투명; 열-규칙-색상: hsla(0, 100%, 50%, 0.6); column-rule-color: 상속; column-rule-color: 이니셜;

2.3. 구분선 스타일: column-rule-style 속성

column-rule-style 속성은 구분선의 스타일을 설정합니다.

속성은 상속되지 않습니다.

열 규칙 스타일
값:
없음 값은 0으로 평가됩니다. 기본값.
숨겨진 마찬가지로 값이 none 인 경우 선이 숨겨집니다.
점이 찍힌 선을 일련의 정사각형 점으로 표시합니다.
파선 선을 일련의 대시로 표시합니다.
단단한 일반 라인.
더블 간격을 두고 두 개의 평행한 가는 선으로 구분선을 표시합니다. 구분선의 너비는 지정되지 않았지만 줄의 합과 줄 사이의 간격은 column-rule-width 값과 같습니다.
홈 캔버스에 눌러진 3D 선을 표시합니다. 이것은 하나는 더 어둡고 하나는 더 밝은 두 가지 색상으로 그림자를 만들어 달성됩니다.
산등성이 볼륨의 구분선을 표시합니다. 그루브의 반대 효과 .
삽입 지정된 선 색상보다 어두운 실선을 표시합니다.
시초 column-rule-color 속성에 지정된 색상으로 실선을 표시합니다.
초기의 속성 값을 기본값으로 설정합니다.
계승하다 부모 요소에서 속성 값을 상속합니다.

통사론

열 규칙 스타일: 없음; 열 규칙 스타일: 숨김; 열 규칙 스타일: 점선; 열 규칙 스타일: 파선; 열 규칙 스타일: 솔리드; 열 규칙 스타일: 이중; 열 규칙 스타일: 그루브; 열 규칙 스타일: 능선; 열 규칙 스타일: 삽입; 열 규칙 스타일: 처음; 열 규칙 스타일: 상속; 열 규칙 스타일: 초기;

2.4. 구분선 너비: column-rule-width 속성

column-rule-width 속성은 구분선의 너비를 설정합니다. 음수 값은 허용되지 않습니다. column-rule-style 속성 없이는 작동하지 않습니다.

속성은 상속되지 않습니다.

통사론

열 규칙 너비: 얇은; 열 규칙 너비: 중간; 열 규칙 너비: 두꺼운; 열 규칙 너비: 1px; 열 규칙 너비: 2.5em 열 규칙 너비: 상속; 열 규칙 너비: 초기;

2.5. 구분선 속성 속기: column-rule 속성

column-rule 속성은 column-rule-width 속성 column-rule-style column-rule-color 의 줄임말입니다.

속성은 상속되지 않습니다.

통사론

열 규칙: 점선; 열 규칙: 솔리드 8px; 열 규칙: 솔리드 블루; 열 규칙: 두꺼운 삽입 파란색; 열 규칙: 상속; 열 규칙: 초기;

3. 단 나누기

콘텐츠가 여러 열에 배치되면 브라우저는 열 나누기가 배치되는 위치를 결정해야 합니다. 콘텐츠를 열로 분할하는 문제는 콘텐츠를 페이지로 분할하는 것과 유사합니다. 이 문제를 해결하기 위해 페이지 나누기와 동일한 속성에서 열 나누기를 설명할 수 있는 세 가지 새로운 속성인 break-before , break-after 및 break-inside 가 도입되었습니다.

4. 열 범위: 열-범위 속성

column-span 속성을 사용하면 요소가 여러 열에 걸쳐 있을 수 있습니다. 컨테이너 블록이 아니라 내부의 특정 요소(예: 헤더)에 대해 지정됩니다.

앞으로는 표 셀에 적용할 수 있는 colspan 속성과 유사하게 확장할 열 수를 지정할 수 있지만 CSS3 사양에는 가능한 값이 none 및 all 두 가지뿐입니다.

이 속성은 Firefox에서 기본적으로 작동하지 않습니다. 사용자는 기능을 명시적으로 활성화해야 하며 layout.css.column-span.enabled를 true로 설정해야 합니다. Firefox에서 설정을 변경하려면 about:config 로 이동하십시오.

속성은 상속되지 않습니다.

통사론

열 범위: 없음 열 범위: 모두; 열 범위: 상속; 열 범위: 초기;

5. 내용으로 열 채우기: column-fill 속성

column-fill 속성은 열이 콘텐츠로 채워지는 방식을 제어합니다. 열을 채우는 데는 두 가지 전략이 있습니다. 열 높이를 정렬하거나 정렬하지 않을 수 있습니다. 열이 정렬된 경우 브라우저는 열 높이에 영향을 줄 수 있는 강제 중단, 과부, 고아 및 기타 속성을 고려하면서 열 높이 변경을 최소화해야 합니다. 열이 정렬되지 않은 경우 순차적으로 채워지며 일부는 부분적으로 채워지거나 전혀 채워지지 않을 수 있습니다.

속성은 상속되지 않습니다.

통사론

열 채우기: 자동; 열 채우기:균형; column-fill: 전체 균형; 열 채우기: 상속; 열 채우기: 초기;

6. 오버플로

6.1. 여러 열 컨테이너 내부의 오버플로

이로 인해 열이 끊어지는 경우를 제외하고 열의 경계를 넘어 확장되는 콘텐츠는 열의 경계를 넘어 확장되며 잘리지 않습니다. 이것은 주로 이미지에 적용됩니다. 이 문제를 해결하려면 이미지에 대해 다음 속성을 설정해야 합니다.

Img ( display: block; /* 이미지 아래의 아래쪽 패딩 제거 */ width: 100%; /* 이미지를 컨테이너 블록의 전체 너비로 늘립니다 */ )

6.2. 여러 열 컨테이너 외부의 페이지 매김 및 오버플로

다중 열 컨테이너의 가장자리에 있는 열 너머로 확장되는 콘텐츠 및 구분선은 오버플로 속성에 따라 잘립니다.

다중 열 컨테이너는 열 높이 제한(예: 높이 또는 최대 높이를 통한) 및 명시적 열 구분으로 인해 공간보다 더 많은 열을 가질 수 있습니다. 이 경우 행 방향으로 추가 열이 생성되어 다음 페이지로 이동합니다.

그만큼 CSS 다중 열 레이아웃 모듈연장하다 블록 레이아웃 모드텍스트의 여러 열을 쉽게 정의할 수 있습니다.줄이 너무 길면 사람들은 텍스트를 읽는 데 어려움을 겪습니다. 눈이 한 줄의 끝에서 다음 줄의 시작으로 이동하는 데 너무 오래 걸리면 어느 줄에 있었는지 추적하지 못합니다. 따라서 큰 화면을 최대한 활용하려면 저자는 신문과 마찬가지로 폭이 제한된 텍스트 열을 나란히 배치해야 합니다.

불행하게도 이것은 고정된 위치에서 열 구분을 강제하거나 텍스트에서 허용되는 마크업을 심각하게 제한하거나 영웅적인 스크립팅을 사용하지 않고는 CSS 및 HTML과 함께 할 수 없습니다. 이 제한은 새로운 CSS 속성을 추가하여 기존 블록 레이아웃 모드를 확장함으로써 해결됩니다.

열 사용

열 개수 및 너비

두 개의 CSS 속성인 column-count 및 column-width 열 표시 여부와 표시 개수를 제어합니다.

열 수 속성은 열 수를 특정 수로 설정합니다. 예를 들어,

예 1

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

#col ( 열 수: 2; )

결과

콘텐츠를 두 개의 열로 표시합니다(다중 열 호환 브라우저를 사용하는 경우).

열 너비 속성은 원하는 최소 열 너비를 설정합니다. column-count 도 설정되지 않은 경우 브라우저는 자동으로 사용 가능한 너비에 맞는 만큼의 열을 만듭니다.

예 2

HTML

CSS

#wid(열 너비: 100px; )

결과

다중 열 블록에서 콘텐츠는 필요에 따라 자동으로 한 열에서 다음 열로 흐릅니다. 모든 HTML, CSS 및 DOM 기능은 편집 및 인쇄와 마찬가지로 열 내에서 지원됩니다.

열 속기

대부분의 경우 웹 디자이너는 두 가지 CSS 속성인 column-count 또는 column-width 중 하나를 사용합니다. 이러한 속성에 대한 값이 겹치지 않으므로 종종 단축 열을 사용하는 것이 편리합니다. 예를 들어

CSS 선언 column-width: 12em은 columns: 12em으로 대체될 수 있습니다.

예 3

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Exceptioneur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

CSS

#col_short( 열: 12em; )

CSS 선언 column-count: 4 는 columns: 4 로 대체될 수 있습니다.

예 4

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Exceptioneur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

CSS

#columns_4 ( 열: 4; )

결과

두 개의 CSS 선언 column-width: 8em 및 column-count: 12는 columns: 12 8em으로 대체될 수 있습니다.

실시예 5

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Exceptioneur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

CSS

#columns_12 ( 열: 12 8em; )

결과

높이 균형

CSS3 열 사양에서는 열 높이가 균형을 이루어야 합니다. 즉, 브라우저는 각 열의 콘텐츠 높이가 대략 동일하도록 최대 열 높이를 자동으로 설정합니다. 파이어폭스는 이렇게 합니다.

그러나 경우에 따라 열의 최대 높이를 명시적으로 설정한 다음 첫 번째 열에서 시작하여 필요한 만큼의 열을 만들어 콘텐츠를 배치하고 오른쪽으로 넘칠 수 있도록 하는 것도 유용합니다. 따라서 높이가 제한된 경우 다중 열 블록에서 CSS height 또는 max-height 속성을 설정하여 각 열이 해당 높이까지 증가할 수 있으며 새 열을 추가하기 전에 더 이상 증가하지 않습니다. 이 모드는 또한 레이아웃에 훨씬 더 효율적입니다.

열 간격

열 사이에 간격이 있습니다. 권장 기본값은 1em 입니다. 이 크기는 column-gap 속성을 다중 열 블록에 적용하여 변경할 수 있습니다.

실시예 6

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Exceptioneur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

CSS

#column_gap ( 열 수: 5; 열 간격: 2em; )

결과

우아한 저하

열 속성은 열을 지원하지 않는 브라우저에서 무시됩니다. 따라서 해당 브라우저에서 단일 열에 표시되고 지원 브라우저에서 여러 열을 사용하는 레이아웃을 만드는 것이 상대적으로 쉽습니다.

결론

CSS3 열은 웹 개발자가 화면 공간을 최대한 활용할 수 있도록 도와주는 기본 레이아웃입니다. 상상력이 풍부한 개발자는 특히 자동 높이 균형 기능을 사용하여 많은 용도를 찾을 수 있습니다.

페이지의 텍스트를 여러 열로 정렬하는 방법은 무엇입니까? 그리고 자동으로 할 수 있습니까? 분명히 웹 개발에 참여했거나 참여했던 많은 사람들이 이러한 작업에 직면했으며 종종 까다로운 스타일이 필요하거나 추가 JavaScript 라이브러리를 사용해야 하는 복잡한 솔루션에 직면했습니다(예: Columnizer 플러그인 참조). jQuery).

다중 열 콘텐츠 레이아웃(그리드에 블록을 배치하는 문제에 더 가까운 일반적인 다중 열 페이지 레이아웃 작업과 혼동하지 말 것)은 웹 표준의 세계에서 오랫동안 진행되어 왔으며 , 마지막으로 해당 CSS3 다중 모듈 -열 레이아웃 형식으로 후보 추천 상태에 도달했을 뿐만 아니라 접두어(-moz- 또는 -webkit-)가 있는 곳과 현재(Opera 11.1+) 및 계획된 버전(IE10+), 접두사 없이 즉시.

논평
Internet Explorer 10의 경우 이는 자동으로 HTML/CSS/JS를 사용하여 Windows 8 Metro 스타일 앱을 개발할 때 CSS3 다중 열을 사용할 수 있음을 의미합니다.

이 기사의 목적을 위해 코드를 혼동하기 위해 브라우저 접두어를 사용하지는 않겠지만 실제 사용에서는 Firefox, Safari 및 Chrome에 대한 접두어 지원을 추가하는 것을 잊지 마십시오.

두 가지 더 중요한 세부 사항을 즉시 언급하겠습니다.
첫째, 대부분의 경우 텍스트에 다중 열 레이아웃을 사용하는 것은 점진적 향상 경로를 따라 사이트 콘텐츠 표시를 개발하는 것으로 간주할 수 있습니다. 이 내에서 더 현대적인 사이트의 사용자는 더 많은 혜택을 받게 됩니다.

둘째, 다중 열 표시는 미디어 쿼리(및 반응형 디자인 아이디어)의 기능과 잘 작동합니다. 예를 들어 다양한 화면 크기에서 텍스트 형식을 다른 열 수로 지정할 수 있습니다.

그리고 서론에서 마지막으로 언급하고 싶은 것은 이것에 더 이상 연연하지 않고 명확한 양심을 가지고 기술적 세부 사항으로 넘어가기 위해입니다. 다중 열 텍스트 레이아웃을 사용할 때 이러한 배열은 또한 특정 읽기 순서(유럽 언어의 경우 왼쪽에서 오른쪽으로). 따라서 시선을 한 열에서 다른 열로 옮기려면 특히 세로 스크롤의 경우 추가 작업을 가능한 한 적게 수행해야 합니다.

이러한 의미에서 열의 수평 특성은 수평 스크롤과 더 잘 결합됩니다(Win8의 많은 응용 프로그램에서 사용되므로 예를 들어 USA Today 응용 프로그램에서 명확하게 볼 수 있음).

일반적으로 스피커는 훌륭하지만 사용자의 편의성을 잊지 마십시오. 그리고 이제 싸울 것입니다!

스피커

따라서 여러 열에 배치하려는 텍스트(콘텐츠)가 있습니다. 어디서부터 시작해야 할까요?

이러한 요소를 다중 열 요소로 전환하려면 CSS 스타일을 통해 다음 속성 중 하나를 설정해야 합니다. 열 너비또는 열 수이외의 값으로 자동. 예를 들어,
텍스트를 두 열로 나누려면 다음과 같이 하십시오.

기사( 열 수: 2; )

브라우저가 나머지 작업을 수행합니다.

대체 속성 - 열 너비- 열의 최적 너비를 설정할 수 있습니다.

기사( 열 너비: 150px; )

동시에 브라우저 자체는 지정된 열 너비에 맞게 조정하여 외부 컨테이너를 채우는 데 필요한 수의 열로 내용을 나눕니다. 중요한 점은 실제 너비는 지정된 것과 다를 수 있습니다.위 또는 아래: 위 그림에서 회색 막대의 너비는 정확히 150픽셀입니다. 보시다시피 열의 실제 너비보다 작습니다.

이 동작은 사양에 의해 정의되며 반응형 마크업을 개발할 때 (자동으로) 더 많은 유연성을 허용합니다.

예를 들어 100px 너비의 컨테이너가 있고 열 너비를 45px로 설정하면 브라우저는 두 개의 열만 맞는 것으로 간주하고 전체 공간을 채우기 위해 각 열의 크기를 50px로 늘립니다. (이것은 다음 섹션에서 설명할 열 사이의 간격도 고려합니다.)

어떤 의미에서 이것은 창 크기에 따라 미디어 쿼리를 사용하여 열 너비를 자동으로 계산하여 다른 수의 열을 지정하는 것의 대안으로 볼 수 있습니다.

@media (min-width:400px) ( 기사 ( column-count: 2; ) ) @media (min-width:600px) ( 기사 ( column-count: 3; ) ) ...

대안에 대해 이야기하는 것은 이번이 두 번째이며 그 이유는 다음과 같습니다.

카운트 vs. 너비

위의 설명에서 알 수 있듯이 사양에서는 열의 수와 너비를 설정하는 두 가지 방법을 제공합니다(그런데 모든 열에 대해 동일합니다!).
  • 열 수콘텐츠를 나눌 열 수를 지정할 수 있으며 열 너비는 사용 가능한 공간을 고려하여 브라우저에서 결정됩니다.
  • 열 너비 comes from the back: 열의 대략적인 값을 나타내지만 열 수 계산은 브라우저의 재량에 맡깁니다.
대부분의 경우 숫자 또는 길이에 대해 각각 작동하는 둘 중 하나를 사용합니다. 표기를 단순화하기 위해 다음과 같은 짧은 속성이 있습니다. 열, 지정된 데이터의 형식에 반응합니다.

열: 12em; /* 열 너비: 12em; 열 수: 자동; */ 열: 2; /* 열 너비: 자동; 열 수: 2; */열: 자동; /* 열 너비: 자동; 열 수: 자동; */ 열: 자동 12em; /* 열 너비: 12em; 열 수: 자동; */열: 2 자동; /* 열 너비: 자동; 열 수: 2; */

열 수와 최적의 너비를 모두 지정하면 어떻게 됩니까? 사양에 따르면, 이 경우 열 수최대 열 수를 정의합니다.

기사( columns: 150px 3; /* column-width: 150px; column-count: 3; */ )

사실, CSS3에 대한 일부 기사(예 참조)를 포함하여 웹 표준의 진화에 따라 웹 개발자에게 영감을 줄 수 있는 가능성을 살펴보기를 바랍니다. 응답성이 뛰어나고 유연하며 강력한 콘텐츠 관리 도구가 점점 더 가까워지고 있습니다. 그리고 복잡한 문제를 해결하는 것이 점점 더 쉬워지고 있습니다.

인터렉티브

ietestdrive.com에서 CSS3 다중 열을 가지고 놀 수 있습니다.

시도하고 실험하십시오. 브라우저 개발자에게 버그를 보고하십시오. 그리고 이전(그리고 현대적으로 보이지만 여전히 완전히 표준을 준수하지 않는) 브라우저의 사용자가 무엇을 보게 될지 생각하는 것을 잊지 마십시오. 예를 들어 jQuery Columnizer 플러그인을 사용할 수 있습니다. 작은 화면과 큰 화면의 적응성과 시청자를 염두에 두십시오.

페이지의 텍스트를 여러 열로 정렬하는 방법은 무엇입니까? 그리고 자동으로 할 수 있습니까? 분명히 웹 개발에 참여했거나 참여했던 많은 사람들이 이러한 작업에 직면했으며 종종 까다로운 스타일이 필요하거나 추가 JavaScript 라이브러리를 사용해야 하는 복잡한 솔루션에 직면했습니다(예: Columnizer 플러그인 참조). jQuery).

다중 열 콘텐츠 레이아웃(그리드에 블록을 배치하는 문제에 더 가까운 일반적인 다중 열 페이지 레이아웃 작업과 혼동하지 말 것)은 웹 표준의 세계에서 오랫동안 진행되어 왔으며 , 마지막으로 해당 CSS3 다중 모듈 -열 레이아웃 형식으로 후보 추천 상태에 도달했을 뿐만 아니라 접두어(-moz- 또는 -webkit-)가 있는 곳과 현재(Opera 11.1+) 및 계획된 버전(IE10+), 접두사 없이 즉시.

논평
Internet Explorer 10의 경우 이는 자동으로 HTML/CSS/JS를 사용하여 Windows 8 Metro 스타일 앱을 개발할 때 CSS3 다중 열을 사용할 수 있음을 의미합니다.

이 기사의 목적을 위해 코드를 혼동하기 위해 브라우저 접두어를 사용하지는 않겠지만 실제 사용에서는 Firefox, Safari 및 Chrome에 대한 접두어 지원을 추가하는 것을 잊지 마십시오.

두 가지 더 중요한 세부 사항을 즉시 언급하겠습니다.
첫째, 대부분의 경우 텍스트에 다중 열 레이아웃을 사용하는 것은 점진적 향상 경로를 따라 사이트 콘텐츠 표시를 개발하는 것으로 간주할 수 있습니다. 이 내에서 더 현대적인 사이트의 사용자는 더 많은 혜택을 받게 됩니다.

둘째, 다중 열 표시는 미디어 쿼리(및 반응형 디자인 아이디어)의 기능과 잘 작동합니다. 예를 들어 다양한 화면 크기에서 텍스트 형식을 다른 열 수로 지정할 수 있습니다.

그리고 서론에서 마지막으로 언급하고 싶은 것은 이것에 더 이상 연연하지 않고 명확한 양심을 가지고 기술적 세부 사항으로 넘어가기 위해입니다. 다중 열 텍스트 레이아웃을 사용할 때 이러한 배열은 또한 특정 읽기 순서(유럽 언어의 경우 왼쪽에서 오른쪽으로). 따라서 시선을 한 열에서 다른 열로 옮기려면 특히 세로 스크롤의 경우 추가 작업을 가능한 한 적게 수행해야 합니다.

이러한 의미에서 열의 수평 특성은 수평 스크롤과 더 잘 결합됩니다(Win8의 많은 응용 프로그램에서 사용되므로 예를 들어 USA Today 응용 프로그램에서 명확하게 볼 수 있음).

일반적으로 스피커는 훌륭하지만 사용자의 편의성을 잊지 마십시오. 그리고 이제 싸울 것입니다!

스피커

따라서 여러 열에 배치하려는 텍스트(콘텐츠)가 있습니다. 어디서부터 시작해야 할까요?

이러한 요소를 다중 열 요소로 전환하려면 CSS 스타일을 통해 다음 속성 중 하나를 설정해야 합니다. 열 너비또는 열 수이외의 값으로 자동. 예를 들어,
텍스트를 두 열로 나누려면 다음과 같이 하십시오.

기사( 열 수: 2; )

브라우저가 나머지 작업을 수행합니다.

대체 속성 - 열 너비- 열의 최적 너비를 설정할 수 있습니다.

기사( 열 너비: 150px; )

동시에 브라우저 자체는 지정된 열 너비에 맞게 조정하여 외부 컨테이너를 채우는 데 필요한 수의 열로 내용을 나눕니다. 중요한 점은 실제 너비는 지정된 것과 다를 수 있습니다.위 또는 아래: 위 그림에서 회색 막대의 너비는 정확히 150픽셀입니다. 보시다시피 열의 실제 너비보다 작습니다.

이 동작은 사양에 의해 정의되며 반응형 마크업을 개발할 때 (자동으로) 더 많은 유연성을 허용합니다.

예를 들어 100px 너비의 컨테이너가 있고 열 너비를 45px로 설정하면 브라우저는 두 개의 열만 맞는 것으로 간주하고 전체 공간을 채우기 위해 각 열의 크기를 50px로 늘립니다. (이것은 다음 섹션에서 설명할 열 사이의 간격도 고려합니다.)

어떤 의미에서 이것은 창 크기에 따라 미디어 쿼리를 사용하여 열 너비를 자동으로 계산하여 다른 수의 열을 지정하는 것의 대안으로 볼 수 있습니다.

@media (min-width:400px) ( 기사 ( column-count: 2; ) ) @media (min-width:600px) ( 기사 ( column-count: 3; ) ) ...

대안에 대해 이야기하는 것은 이번이 두 번째이며 그 이유는 다음과 같습니다.

카운트 vs. 너비

위의 설명에서 알 수 있듯이 사양에서는 열의 수와 너비를 설정하는 두 가지 방법을 제공합니다(그런데 모든 열에 대해 동일합니다!).
  • 열 수콘텐츠를 나눌 열 수를 지정할 수 있으며 열 너비는 사용 가능한 공간을 고려하여 브라우저에서 결정됩니다.
  • 열 너비 comes from the back: 열의 대략적인 값을 나타내지만 열 수 계산은 브라우저의 재량에 맡깁니다.
대부분의 경우 숫자 또는 길이에 대해 각각 작동하는 둘 중 하나를 사용합니다. 표기를 단순화하기 위해 다음과 같은 짧은 속성이 있습니다. 열, 지정된 데이터의 형식에 반응합니다.

열: 12em; /* 열 너비: 12em; 열 수: 자동; */ 열: 2; /* 열 너비: 자동; 열 수: 2; */열: 자동; /* 열 너비: 자동; 열 수: 자동; */ 열: 자동 12em; /* 열 너비: 12em; 열 수: 자동; */열: 2 자동; /* 열 너비: 자동; 열 수: 2; */

열 수와 최적의 너비를 모두 지정하면 어떻게 됩니까? 사양에 따르면, 이 경우 열 수최대 열 수를 정의합니다.

기사( columns: 150px 3; /* column-width: 150px; column-count: 3; */ )

사실, CSS3에 대한 일부 기사(예 참조)를 포함하여 웹 표준의 진화에 따라 웹 개발자에게 영감을 줄 수 있는 가능성을 살펴보기를 바랍니다. 응답성이 뛰어나고 유연하며 강력한 콘텐츠 관리 도구가 점점 더 가까워지고 있습니다. 그리고 복잡한 문제를 해결하는 것이 점점 더 쉬워지고 있습니다.

인터렉티브

ietestdrive.com에서 CSS3 다중 열을 가지고 놀 수 있습니다.

시도하고 실험하십시오. 브라우저 개발자에게 버그를 보고하십시오. 그리고 이전(그리고 현대적으로 보이지만 여전히 완전히 표준을 준수하지 않는) 브라우저의 사용자가 무엇을 보게 될지 생각하는 것을 잊지 마십시오. 예를 들어 jQuery Columnizer 플러그인을 사용할 수 있습니다. 작은 화면과 큰 화면의 적응성과 시청자를 염두에 두십시오.