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

CSS3 열 규칙

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

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;
}

목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
2097
HTML 도대체 이 그라데이션 효과는 어떻게 주는걸까요? ㅠㅠ 6
2095
HTML 오늘은 뭐 짜달라, 고쳐달라는 분도 안 계시고, 1
2082
HTML zurb의 foundation (반응형 프레임워크) 12
2071
HTML 스크롤에 따라 변하는 메뉴... 1
2048
HTML 로고 크기에 제한이 있나요? 21
2046
HTML 이거 진짜 ㅂ ㅅ 같은건데... ctrl+ 0 ...OTL 1
2042
HTML html5 책 좀 추천 해주세요. ^^ 3
2022
HTML IE에서 CSS3 메뉴 적용이 되지 않습니다. 7
2017
HTML 웹 표준화 관련 사이트들 4
2001
HTML IE 때문에 고생하시는 분들께 드리는 팁 하나 1
1999
HTML 브라우저별 개별 css 적용 1
1996
HTML 안녕하세요~ for문과 CSS 질문입니다. 2
1994
HTML background-size:cover 1
1989
HTML css 간단한 질문 하나만 드릴께요 4
1988
HTML 주소 검색 소스~ 부탁드려요 ^^
1982
HTML CSS 게시판 위치별 제어 5
1975
HTML 홈페이지 카테고리 수정 도움 요청 2
1971
HTML 너무 멋진 사이트 발견! 그런데! 질문 3
1970
HTML 이미지 부드럽게 확대 하기 간단css 1
1964
HTML 접기/펼치기 소스 질문입니다. 도와주세요~~ 5
1961
HTML 크로스 브라우징..시 CSS를 잘 못부르네요. 2
1958
HTML 웹 표준으로 했는데 블랭크가...또 쌩기는데 이번엔.. 2
1954
HTML css...왜 위에 블랭크가 생길까요? 3
1951
HTML jQuery 이미지 체크박스 3
1947
HTML 엄한 질문 하나 드립니다. ㅎㅎㅎ 3
1944
HTML html5와 플래시로 제작된 기능이 동일하게 구현이 되는 예 2
1941
HTML 아이프레임으로 불러온 문서 내 특정영역 이동 2
1938
HTML 메뉴 테두리를 둥글게 하고싶은데 안되네요... 2
1929
HTML zen코딩 치트문서~ 8
1926
HTML 젠코딩 동영상 2
이전 다음
전체 목록