다단 레이아웃
- 텍스트를 column 속성으로 다단을 생성
- 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미
column-count: 단의 갯수를 설정
column-rule: 단과 단 사이의 구분선, 구분의 모양, 두께, 색상을 설정
column-gap: 단과 단 사이의 여백을 설정
column-span: 단과 안에 포함된 요소를 다단편집에서 해제(all)
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다단 레이아웃</title>
<style>
div, h2, p {margin: 0; padding: 0;}
h2 { padding: 0 0 20px; text-align: center;} /*padding 위 양옆 안주고아래만*/
div.col {
text-align: justify;
padding: 20px;
background-color: gold;
border: 3px solid red;
column-count: 3;
column-gap: 30px;
column-rule: 3px dashed red;
}
.col > h2 { column-span: all;}
</style>
</head>
<body>
<div class="col">
<h2>다단 레이아웃</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nostrum nulla dolorem velit aspernatur! Beatae quibusdam distinctio ipsum, iure aut, soluta quae numquam, labore temporibus quasi unde ut! Eaque, vel.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nostrum nulla dolorem velit aspernatur! Beatae quibusdam distinctio ipsum, iure aut, soluta quae numquam, labore temporibus quasi unde ut! Eaque, vel.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nostrum nulla dolorem velit aspernatur! Beatae quibusdam distinctio ipsum, iure aut, soluta quae numquam, labore temporibus quasi unde ut! Eaque, vel.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nostrum nulla dolorem velit aspernatur! Beatae quibusdam distinctio ipsum, iure aut, soluta quae numquam, labore temporibus quasi unde ut! Eaque, vel.</p>
</div>
</body>
</html>
'KDT 수업 > HTML | CSS' 카테고리의 다른 글
| [CSS] Flex 레이아웃 (0) | 2023.04.07 |
|---|---|
| [CSS] CSS Position (2) | 2023.04.04 |
| [CSS] CSS 디스플레이 / 폼 (0) | 2023.04.03 |
| [CSS] 박스 모델 (Box Model) (0) | 2023.04.03 |
| [CSS] CSS 배경 (0) | 2023.04.03 |