다단 레이아웃 이란?
텍스트를 column속성으로 다단을 생성해주는것
문법
column-count : 단의 갯수를 설정
column-rule : 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정
column-gap : 단과 단사이의 여백을 설정
column-span : 단과 안의 포함된 요소를 다단편집에서 해제(all)
HTML 코드
<!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;
}
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. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit sint. Voluptatibus.</p>
</div>
</body>
</html>
결과물
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_미디어 쿼리 (1) | 2023.03.30 |
|---|---|
| CSS_Felx 레이아웃 (0) | 2023.03.30 |
| CSS_clear (0) | 2023.03.30 |
| CSS_float (0) | 2023.03.30 |
| CSS_z-index (0) | 2023.03.30 |
