CSS day14

다단 레이아웃

다단 레이아웃

다단 레이아웃은 신문 모양을 떠올리면 이해가 쉬울 것이다. 신문을 보면 제목 헤드라인이 있고 그 밑으로 2~3개 정도의 단으로 구분한 모습이다. 만들 다단 레이아웃의 모양을 파위 포인트로 먼저 구현해보자.

위 이미지와 같이 본인이 구현하고자하는 웹 문서의 모양을 미리 구현해봄으로써 시각화되어 더 쉽게 CSS 스타일을 구현할 수 있을 것이다.

이제 HTML 부문을 작성해보자

<!--생략-->
...
<div class="col">
	<h2>다단 레이아웃</h2>
    <p>Lorem ipsum dolor sit amet consectetur ... </p>
    <p>Lorem ipsum dolor sit amet consectetur ... </p>
    <p>Lorem ipsum dolor sit amet consectetur ... </p>
</div>
...
<!--생략-->

그다음으로 CSS를 작성해보려하는데, 단을 구현하기 위해서는 몇가지 속성들을 알아야한다.

종류	설명
column-count	생성하고자하는 단 개수를 설정
column-rule	단과 단 사이의 구분선의 모양, 두께, 색상을 설정
column-gap	단과 단 사이의 여백을 설정
column-span	단과 단의 포함된 요소를 다단 편집에서 해체(headLine)

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 설정*/

이와 같이 CSS를 구현하여 결과를 보면,

이런 다단 레이아웃을 구현할 수 있다.