- 텍스트를 column 속성으로 다단을 생성
- 다단은 레이아웃을 여러 개의 컬럼으로 쪼개서 구성한다는 의미
- column-count: 단의 갯수를 설정
- column-rule: 단과 단 사이의 구분선, 구분의 모양, 두께, 색상을 설정
- column-gap: 단과 단 사이의 여백을 설정
- column-span: 단과 안의 포함된 요소를 다단 편집에서 해제(all)
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>다단 레이아웃</title>
<style>
div, h2, p {margin: 0;}
h2 {padding: 0 0 20px; text-align: center;}
.col {
text-align: justify;
padding: 20px;
background-color: blanchedalmond;
border: 3px solid purple;
column-count: 3;
column-gap: 30px;
column-rule: 1px solid green;
}
.col>h2 {column-span: all;}
</style>
</head>
<body>
<div class="col">
<h2>다단 레이아웃</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro tenetur veritatis, perspiciatis saepe, officiis autem dolorum blanditiis magni fugiat animi maxime tempore consectetur iure vero quidem ad similique est doloribus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem velit, est, deleniti non modi ullam magnam provident asperiores tempora ad ducimus cupiditate nobis eligendi voluptatem rem laudantium voluptate aliquid nam? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio quidem laboriosam numquam ullam? Veniam aliquid soluta odit quaerat doloremque corporis eius error labore, animi quibusdam sequi aperiam tempora, quia non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, omnis? Molestias distinctio soluta minus quod accusamus doloremque necessitatibus itaque dignissimos ipsa maiores porro culpa deleniti hic at, voluptatum praesentium possimus!</p>
</div>
</body>
</html>
728x90
반응형
'KDT > HTML | CSS' 카테고리의 다른 글
| 미디어 쿼리(Media Query) (1) | 2023.03.30 |
|---|---|
| Flex 레이아웃 (1) | 2023.03.30 |
| CSS Position (0) | 2023.03.29 |
| CSS 디스플레이 / 폼 (0) | 2023.03.29 |
| 박스 모델(Box Model) (0) | 2023.03.29 |
