프로그래밍/HTML&CSS
다단 레이아웃
하와이블루
2022. 9. 14. 19:55
728x90
다단 레이아웃은 신문의 양식과 비슷하게 신문을 보면 제목 헤드라인이 있고 그 밑으로 2~3개 정도의 단으로 구분한 모습이다. 다단 레이아웃의 모양을 먼저 이미지로 구현해보았다.
위 이미지와 같이 본인이 구현하고자하는 웹 문서의 모양을 미리 구현해봄으로써 시각화 된 이미지를 활용하여 더 쉽게 CSS 스타일을 구현할 수 있을 것이다.
이제 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>
</head>
<body>
<div class="col">
<h2>다단 레이아웃</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ...</p>
</div>
</body>
</html>
그 다음으로 CSS를 작성하여 스타일을 입혀주는데, 단을 구현하기 위해서는 몇가지 속성들을 알아야한다.
| 종류 | 설명 |
| column-count | 생성하고자하는 단 개수를 설정 |
| column-rule | 단과 단 사이의 구분선의 모양, 두께, 색상을 설정 |
| column-gap | 단과 단 사이의 여백을 설정 |
| column-span | 단과 단의 포함된 요소를 다단 편집에서 해체(headLine) |
<style>
div, h2, p{margin: 0; padding: 0;}
body{margin: 10px;}
h2{padding: 0 0 20px; text-align: center;}
div.col{
text-align: justify;
padding: 20px;
background-color: gold;
column-count: 3; /*단의 개수를 3개로 설정*/
column-gap: 30px; /*단의 여백를 30px로 설정*/
column-rule: 3px dashed red; /*단의 모양을 3px, 실선, red로 설정*/
}
.col > h2 {column-span: all;} /*headLine 설정*/
</style>위 코드와 같이 CSS를 작성하여 결과를 보면,
처음에 이미지로 구현한 것과 비슷한 다단 레이아웃을 구현할 수 있다.
728x90