HTML, CSS
(59)CSS_다단 레이아웃
빠스무
2023. 4. 3. 17:16
728x90
- 다단 레이아웃 예제
- 아래 링크를 통해 각 태그들의 설명을 볼 수 있다.
- https://jm-rograming.tistory.com/95
(56)CSS_레이아웃 기본 문법
다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양,
jm-rograming.tistory.com
<!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; }
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. Itaque assumenda quia iste debitis eos culpa esse, voluptatem enim dolorum, ipsum explicabo dignissimos aperiam totam cum magni libero vitae, obcaecati nobis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque assumenda quia iste debitis eos culpa esse, voluptatem enim dolorum, ipsum explicabo dignissimos aperiam totam cum magni libero vitae, obcaecati nobis?Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque assumenda quia iste debitis eos culpa esse, voluptatem enim dolorum, ipsum explicabo dignissimos aperiam totam cum magni libero vitae, obcaecati nobis?Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque assumenda quia iste debitis eos culpa esse, voluptatem enim dolorum, ipsum explicabo dignissimos aperiam totam cum magni libero vitae, obcaecati nobis?Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque assumenda quia iste debitis eos culpa esse, voluptatem enim dolorum, ipsum explicabo dignissimos aperiam totam cum magni libero vitae, obcaecati nobis?
</p>
</div>
<h2></h2>
</body>
</html>
