테스트 사이트 - 개발 중인 베타 버전입니다
SIR

CSS3 열 규칙

수다왕
프로필 보기이 회원 글보기
 · 8년 전 · 1040

CSS3 열 규칙


이 column-rule-style속성은 열 사이의 규칙 스타일을 지정합니다.


예

div {

    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

    -moz-column-rule-style: solid; /* Firefox */

    column-rule-style: solid;

}



29b5537665e5f097b04e4f58349f6a2c_1505796904_5523.JPG
 



<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

    -webkit-column-count: 3; /* Chrome, Safari, Opera */

    -moz-column-count: 3; /* Firefox */

    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */

    -moz-column-gap: 40px; /* Firefox */

    column-gap: 40px;

    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

    -moz-column-rule-style: solid; /* Firefox */

    column-rule-style: solid;

}

</style>

</head>

<body>


<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-style property.</p>


<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>


</body>

</html>



이 column-rule-width속성은 열 사이의 규칙의 너비를 지정합니다.

예
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}


이 column-rule-color속성은 열 사이의 규칙 색상을 지정합니다.

예
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}


이 column-rule속성은 위의 모든 column-rule- * 속성을 설정하기위한 속기 속성입니다.

다음 예제에서는 열 사이의 규칙의 너비, 스타일 및 색상을 설정합니다.

예
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3260
CSS align-content 속성
3259
CSS flex-wrap 프로퍼티 1
3258
CSS align-items 속성
3257
CSS justify-content 속성
3256
CSS 플렉스 방향
3255
CSS CSS3 Flexbox
3254
CSS CSS3 box-sizing 속성 사용 1
3253
CSS CSS3 box-sizing 속성없이
3252
HTML html예제 사이트
3251
CSS CSS3 사용자 인터페이스 속성
3250
CSS CSS3 사용자 인터페이스 - CSS3 개요 오프셋
3249
CSS CSS3 사용자 인터페이스 - CSS3 크기 조정
3248
CSS 열 너비 지정
3247
CSS 요소가 얼마나 많은 열을 포함하는지 지정
3246
CSS CSS3 열 규칙 현재글
3245
CSS CSS3 열 사이의 간격 지정
3244
CSS CSS3 다중 열 레이아웃
3243
CSS Breadcrumbs
3241
CSS 중앙 페이지 매김
3240
CSS 페이지 매김 크기
3239
CSS 링크 사이의 공간
3238
CSS 둥근 테두리
3237
CSS 테두리가있는 페이지 매김
3236
CSS 둥근 활성 및 호버링 버튼
3235
CSS Active 및 Hoverable Pagination
3234
CSS CSS 페이지 매김의 예
3233
CSS 애니메이션 버튼
3232
CSS 세로 단추 그룹
3231
CSS 테두리가있는 단추 그룹
3230
CSS 버튼 그룹
이전 다음
전체 목록