CSS3 다중 열 레이아웃

수다왕

프로필 보기 이 회원 글보기

· 8년 전 · 조회 1943 1943

CSS3 다중 열 레이아웃

CSS3 다중 열 레이아웃을 사용하면 신문과 같이 여러 텍스트 열을 쉽게 정의 할 수 있습니다.

CSS3 다중 열 속성

이 장에서는 다음과 같은 다중 열 특성에 대해 학습합니다.

1. column-count

2. column-gap

3. column-rule-style

4. column-rule-width

5. column-rule-color

6. column-rule

7. column-span

8. column-width

CSS3 여러 열 만들기

이 column-count속성은 요소가 분할되어야하는 열의 수를 지정합니다.

다음 예제에서는 <div> 요소의 텍스트를 3 개의 열로 나눕니다.

div {

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

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

column-count: 3;

}

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

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

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

column-count: 3;

}

</style>

</head>

<body>

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

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>

댓글 작성

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

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
3056	CSS Word Spacing 단어 간격	컴프	1,889	8년 전
3055	CSS Text Direction 텍스트 방향	컴프	1,979	8년 전
3054	CSS Line Height 라인 높이	컴프	1,989	8년 전
3051	CSS Letter Spacing 글자 간격 1	컴프	2,912	8년 전
3050	CSS Text Indentation 텍스트 들여 쓰기	컴프	1,943	8년 전
3049	CSS 텍스트 변환 Text Transformation	컴프	2,004	8년 전
3046	CSS 텍스트 방향 Text Direction	컴프	1,976	8년 전
3045	CSS 라인 높이 Line Height	컴프	1,848	8년 전
3044	HTML 글자 간격 Letter Spacing	컴프	2,272	8년 전
3043	CSS text-indent	컴프	2,214	8년 전
3042	CSS text-transform	컴프	2,042	8년 전
3041	CSS text-decoration	컴프	2,304	8년 전
3040	CSS Text Alignment	컴프	2,039	8년 전
3039	CSS Text Color	컴프	1,823	8년 전
3038	CSS Outline - Shorthand property	컴프	1,945	8년 전
3034	CSS Outline Width	컴프	2,175	8년 전
3033	CSS Outline Color	컴프	2,051	8년 전
3032	CSS CSS Outline	컴프	2,483	8년 전
3027	CSS CSS Box Model	컴프	2,463	8년 전
3026	CSS Setting max-width	컴프	2,038	8년 전
3025	CSS CSS Height and Width	컴프	1,662	8년 전
3024	CSS CSS Padding	컴프	2,305	8년 전
3023	CSS CSS Margins	컴프	1,981	8년 전
3022	CSS CSS Border Properties	컴프	2,604	8년 전
3021	CSS CSS Syntax and Selectors	컴프	1,961	8년 전
3020	HTML The HTML <audio> Element	컴프	2,048	8년 전
3019	HTML HTML <video> 요소 1	컴프	2,518	8년 전
3018	HTML html google map	컴프	2,610	8년 전
3017	HTML SVG와 캔버스의 차이점	컴프	3,717	8년 전
3016	HTML SVG Logo	컴프	2,149	8년 전

이전 다음

11 12 13 14 15

전체 목록

강좌