프로그래밍/CSS

생활코딩 css 정리 - 22. 다단(multi column)

가카리 2018. 1. 15. 23:29
반응형
25. 다단(multi column)

다단(multi column)은 아래 신문처럼 화면을 분활해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미합니다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공합니다.


먼저 column-count 속성을 2로 주게되면?

multi-column.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        .column
            text-align: justify;
            column-count:2;
/*            column-width: 200px;*/
       
</style>
</head>
<body>
<div class="column">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eius nostrum adipisci in ad sed vel, illo quibus-dam quas perspiciatis aliquam magnam consectetur quisquam totam. Reprehenderit porro architecto est num-quam repellendus odit modi commodi, quis aut, quaerat asperiores aliquid maiores consectetur. Obcaecati accu-samus excepturi commodi eum facilis vitae vel exercitationem! Quia obcaecati aliquam error labore numquam animi fugiat mollitia unde inventore molestiae soluta nam temporibus amet est, ullam officiis iure fugit. Delectus vel, alias non mollitia nulla, itaque magnam consectetur. Iste a, officia, iure tempore incidunt laborum quas placeat itaque error accusamus libero voluptatum velit fugiat distinctio saepe nemo ipsum.
</div>
</body>
</html>

실행 화면


다음과 같이 컬럼이 2개로 분할됩니다.


만약 다음과 같이 column-width를 200px로 주게 되면 200px로 컬럼을 나누게 됩니다.

실행 화면

만약 column-count와 column-width를 둘 다 주면 어떻게 될까요?

최대 4개의 컬럼까지 만들어지고 컬럼의 width가 200px보다 작아지게 되면 컬럼의 수를 줄이게 됩니다.

이번에는 column-gap과 column-rule-style을 알아봅시다. gap은 컬럼사이의 간격을 의미하고 rule-style은 컬럼사이의 뭐를 넣을지 정할 수 있습니다.


실행 화면은 다음과 같습니다.
 

만약 다음과 같이 column-rule-width와 column-rule-color를 지정하면 컬럼 사이의 선에 대한 스타일을 지정할 수 있습니다.


그리고 column-span:all옵션은 컬럼이 나뉜것을 무시하고 쭉 길게 쓰고 싶을 때 사용합니다.


column-span:all 적용 후 컬럼을 무시하고 제목을 작성하게 됩니다.

반응형