고정 헤더 영역
상세 컨텐츠
본문
반응형
column-with - 단의 너비 고정하고 다단 구성하기
- 한 화면을 여러 단으로 구성할 때 단의 너비를 고정해 놓고 화면을 분할할 수도 있고 단의 개수를 고정해 놓고 화면을 분할할 수도 있다.
column-width: <크기> | auto
속성
<크기> : 단 너비를 직접 지정한다.
auto : 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동 계산된다.
<html>
<head>
<meta charset="utf-8">
<style>
.multi {
-webkit-column-width: 120px;
-moz-column-width: 120px;
column-width: 120px;
}
</style>
</head>
<body>
<div class="multi">
<p>동해물과 백두산이</p>
<p>동해물과 백두산이</p>
<p>동해물과 백두산이</p>
</div>
</body>
</html>
column-count 속성 - 단의 개수 고정하고 다단 구성하기
- 다단 화면을 만들 때 단의 개수를 고정해 놓을 수 있다. 단의 개수를 고정하면 브라우저의 너비와 상관없이 단의 개수를 항상 일정하게 유지할 수 있다.
column-count: <숫자> | auto
속성
- <숫자> : 콘텐츠가 들어갈 단의 개수를 지정한다. 0보다 큰 수를 사용한다.
- auto : 단의 너비(column-width) 같은 다른 속성에 따라 단의 개수가 자동 계산된다.
<html>
<head>
<meta charset="utf-8">
<style>
.multi {
column-count: 3;
}
</style>
</head>
<body>
<div class="multi">
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</p>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</p>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</p>
</div>
</body>
</html>
column-rule 속성 - 구분선의 색상, 스타일, 너비 지정하기
- 화면을 여러 단으로 구성할 때 단과 단 사이에 여백을 두는 것만으로도 구분하지만 좀 더 확실히 구분하기 위해 수직선을 넣기도 한다. column-rule 속성을 이용해 선의 스타일을 지정한다.
column-rule-color: <색상>
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outest
columne-rule-width: <크게> | thin | medium | thick
column-rule: <너비> | <스타일> | <색상>
- rule-color 등 각각 지정을 하는 것보단 column-rule에 한꺼번에 지정을 하면 관리가 편하다.
<html>
<head>
<meta charset="utf-8">
<style>
.multi {
column-count: 3;
column-rule: 1px solid #yellow
}
</style>
</head>
<body>
<div class="multi">
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
</div>
</body>
</html>
break-after 속성 - 다단 위치 지정하기
- 웹 문서의 경우, 문서 전체에서 내비게이션이나 사이드바, 푸터 등의 영역은 제외하고 대부분 실제 콘텐츠 부분만 다단으로 구성한다. 따라서 다단을 어디부터 시작할지 지정하는 속성도 필요하다.
속성
- break-before : 특성 요소 앞에 단을 나눈다.
- break-after : 특정 요소 뒤에 단을 나눈다.
- break-inside : 특정 요소 안에 단을 나눈다.
<html>
<head>
<meta charset="utf-8">
<style>
.multi {
column-count: 3;
column-rule: 2px dotted #000;
text-align: justify;
}
.multi h3 {
break-before: column;
}
</style>
</head>
<body>
<div class="multi">
<h3>아보카도</h3>
<p>아보카도는 나무에서 열린다. 지방으로 이루어졌는데, 식물성 지방으로 이루어져 있다.</p>
<h3>애국가</h3>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
</div>
</body>
</html>
column-span 속성 - 여러 단을 하나로 합치기
- 여러 개로 나뉜 단의 흐름을 따라가다가 중간에 단을 합쳐 내용을 표시해야 할 경우기 있다. column-span 속성을 이용해 단을 합칠 수 있다.
column-span: 1 | all
속성
- 1 : 단을 하나만 합치는 것이므로 합치지 않는 것과 같다. 기본 값이다.
- all : 전체 단을 하나로 합쳐 표현한다.
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 표 스타일 (2) (0) | 2021.05.07 |
|---|---|
| [CSS 기초] 표 스타일 (1) (0) | 2021.05.06 |
| [CSS 기초] CSS 포지셔닝과 주요 속성들 (0) | 2021.05.01 |
| [CSS 기초] 여백을 조절하는 속성들 (0) | 2021.04.28 |
| [CSS 기초] 테두리 관련 속성들 (0) | 2021.04.27 |
댓글 영역