10. 다단 레이아웃(column)

CSS

10. 다단 레이아웃(column)

HJ76 2023. 4. 1. 12:51

다단 레이아웃

텍스트를 column 속성으로 다단을 생성
다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미

column 속성

column-count : 단의 갯수를 설정
column-rule : 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정
column-gap : 단과 단사이의 여백을 설정
column-span : 단과 안의 포함된 요소를 다단편집에서 해제(all)

선택자 {column-count: 값;}
선택자 {column-gap: 값;}
선택자 {column-rule: 값;}
선택자 {column-span: 값;}

<!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>
        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. Neque dolorem cumque porro magnam eius, quo necessitatibus reiciendis. Ea voluptas vitae aspernatur quod, maxime laborum perferendis, assumenda delectus in doloremque odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorem cumque porro magnam eius, quo necessitatibus reiciendis. Ea voluptas vitae aspernatur quod, maxime laborum perferendis, assumenda delectus in doloremque odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorem cumque porro magnam eius, quo necessitatibus reiciendis. Ea voluptas vitae aspernatur quod, maxime laborum perferendis, assumenda delectus in doloremque odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorem cumque porro magnam eius, quo necessitatibus reiciendis. Ea voluptas vitae aspernatur quod, maxime laborum perferendis, assumenda delectus in doloremque odio.</p>
    </div>
</body>
</html>