English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체 목록

CSS3 column-span 속성 사용 방법 및 예제

column-span CSS 속성은 요소가 다열 레이아웃에서 건너뛰는 열 수를 지정합니다. 여러 열을 건너뛰는 요소는 건너뛰는 요소라고 합니다.

다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

기본 값:none
적용 대상:블록 요소, float 및 절대 위치 요소는 제외됩니다.
thừa kế:아니요
애니메이션 가능:아니요.참조: 애니메이션 속성
버전: CSS3의 새 기능
JavaScript 문법:object.style.columnSpan="all"

column-span 사용 문법

이 속성의 문법은 다음과 같습니다:

column-span: none | all | initial | inherit

다음 예제는 column 속성을 사용하는 방법을 보여줍니다.-span 속성.

h1 {
    -webkit-column-span: all; /* Chrome, Safari, 오페라 */
            column-span: all; 
}
테스트를 보세요‹/›

속성 값

다음 표는 이 속성의 값을 설명합니다.

설명
none요소가 다열을 건너뛰지 않습니다. 기본 값입니다.
all

요소가 페이지 상의 모든 열을 건너뛰습니다. 요소 이전에 선언된 모든 내용은 요소 이전에 표시됩니다.

initial이 속성을 기본 값으로 설정합니다.
inherit지정된 경우, 관련 요소는 부모 요소 column을 사용합니다.-span 속성 값.

브라우저 호환성

column-span 속성의 브라우저 호환성을 확인하십시오. 다음 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다. 모든 주요 브라우저는 이 속성을 지원합니다.

  • Firefox 2+ -moz-

  • Google 크롬 4+ -webkit-

  • 인터넷 익스플로러 10+

  • Apple 사파리 3.1+ -webkit-

  • 오페라 11.1+ -o-,15+ -webkit-

더 읽어보기

다음 튜토리얼을 참조하십시오:CSS3다열 레이아웃

관련 속성:column-widthcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-countcolumns