multi-column

유석현(SeokHyun Yu)·2022년 11월 15일
0

CSS

목록 보기
27/32
post-thumbnail
<!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>Document</title>
        <style>
            .column {
                text-align: justify;
                column-count: 4;
                column-width: 200px;
                column-gap: 30px;
                column-rule-style: solid;
                column-rule-width: 1px;
                column-rule-color: red;
            }
            h1 {
                column-span: all;
            }
        </style>
    </head>
    <body>
        <div class="column">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus error
            ab reiciendis accusantium. Fugit adipisci nisi at, incidunt iure
            voluptatem, commodi ut error illum earum nemo eligendi distinctio
            voluptate rerum? Sed eveniet provident corporis quaerat fugiat atque
            fuga consequuntur a explicabo! Minima suscipit placeat quisquam
            totam tempore hic dolores! Quod odit maiores nisi eius quisquam
            provident, earum consequuntur voluptate reiciendis? Facilis
            voluptatum ducimus modi sint velit odio optio, officiis,
            exercitationem similique dignissimos harum aliquam quia expedita
            quisquam culpa? Illo enim quaerat nam officia voluptatum! Et quas
            assumenda distinctio consequuntur cum? Nostrum voluptatem dolore
            quisquam ad libero ea maxime sapiente consequatur perspiciatis, quos
            dicta culpa impedit animi sit consectetur, minima nulla.
            Voluptatibus labore iure beatae, maiores dolorem inventore voluptas
            omnis eligendi! Eos explicabo, nesciunt veniam illum maxime beatae
            accusamus consectetur similique, cum dignissimos autem officiis
            tenetur pariatur provident. Quod facere voluptates, architecto,
            dignissimos perspiciatis inventore corporis ipsam velit, suscipit
            cupiditate aliquid! Minus illo aspernatur consequatur temporibus
            dicta voluptate autem minima ab, cum corrupti omnis nesciunt veniam
            inventore. Rem, officiis corrupti.
            <h1>HELLO</h1>
            Earum sequi ducimus minima vero, laborum corrupti tempore voluptas
            unde facere? Quam ea unde maiores voluptates corporis facilis velit!
            Assumenda officia sint corporis doloremque itaque et dolores, error
            minima nemo inventore. A, eveniet ipsa temporibus asperiores in nemo
            iste cum voluptate. Ipsum aut sunt molestiae sint magni at ut eos
            eaque dicta incidunt asperiores soluta enim cupiditate facilis, qui,
            veniam quae ullam rerum? Possimus dolor commodi quis necessitatibus
            maiores tempore optio? Molestias esse, quas numquam rerum tempore
            eum veritatis alias incidunt a libero, fuga laborum, repudiandae
            enim dignissimos cumque natus modi illum excepturi fugit mollitia
            delectus necessitatibus ut debitis! Soluta, incidunt! Praesentium
            similique, ab amet, magnam veniam dolores hic consectetur eaque
            asperiores tempora nostrum porro quos accusantium eligendi obcaecati
            quas! Cumque est amet eos consequuntur vitae corrupti quas esse
            facere iusto?
        </div>
    </body>
</html>

profile
Backend Engineer

0개의 댓글