웹페이지

CSS STEP 25 - Column

IT의 큰손 2023. 4. 18. 15:22
728x90

★ Column

  • 다단 구조
p {
    column-count : 3;
}
  • 컬럼과 컬럼 사이의 간격
column-gap : 20px;
  • 컬럼 테두리
column-rule : 1px solid gray;
  • 실행 결과

실행 결과

 

■ Card Layout

  • HTML 코드
<body>
    <h1>Card Layout</h1>

    <div id="list">

        <!-- <div class="item">
            <img src="images/rect_icon01.png">
            <div class="txt">
                Lorem ipsum dolor sit amet.
            </div>
        </div> -->

        <!-- (div.item>((img[src=images/rect_icon$$.png])+(div.txt>lorem5)))*18 -->
        <div class="item">
            <img src="images/rect_icon01.png" alt="">
            <div class="txt">Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon02.png" alt="">
            <div class="txt">Nam in atque praesentium tempore?</div>
        </div>
        <div class="item">
            <img src="images/rect_icon03.png" alt="">
            <div class="txt">Asperiores perferendis voluptates nostrum impedit!</div>
        </div>
        <div class="item">
            <img src="images/rect_icon04.png" alt="">
            <div class="txt">Est tempore quaerat id adipisci.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon05.png" alt="">
            <div class="txt">Obcaecati corrupti earum ad vitae?</div>
        </div>
        <div class="item">
            <img src="images/rect_icon06.png" alt="">
            <div class="txt">Eaque eum fugiat dignissimos labore.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon07.png" alt="">
            <div class="txt">Consequuntur dicta nulla unde temporibus.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon08.png" alt="">
            <div class="txt">Reiciendis aspernatur sapiente modi optio.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon09.png" alt="">
            <div class="txt">Placeat nostrum reprehenderit est veniam.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon10.png" alt="">
            <div class="txt">Dolorem at alias tempora quasi!</div>
        </div>
        <div class="item">
            <img src="images/rect_icon11.png" alt="">
            <div class="txt">Possimus cumque deserunt modi ex.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon12.png" alt="">
            <div class="txt">Recusandae ducimus facilis aut voluptas.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon13.png" alt="">
            <div class="txt">Nemo tempora dolores esse quasi!</div>
        </div>
        <div class="item">
            <img src="images/rect_icon14.png" alt="">
            <div class="txt">Sunt numquam labore ratione iure?</div>
        </div>
        <div class="item">
            <img src="images/rect_icon15.png" alt="">
            <div class="txt">Explicabo nemo dolor dolorum expedita!</div>
        </div>
        <div class="item">
            <img src="images/rect_icon16.png" alt="">
            <div class="txt">Quaerat nisi soluta a voluptas?</div>
        </div>
        <div class="item">
            <img src="images/rect_icon17.png" alt="">
            <div class="txt">Maxime vero culpa assumenda beatae.</div>
        </div>
        <div class="item">
            <img src="images/rect_icon18.png" alt="">
            <div class="txt">Nisi quibusdam consequatur quam at.</div>
        </div>

    </div>
    
</body>
  • CSS 코드
    • page-break-insid : 페이지에 의해서 짤리는 것을 막는 것
<style>

#list {
    /* border : 1px solid black; */
    width : 800px;
    column-count : 5;
}

#list .item {
    border : 1px solid black;
    width : 150px;
    margin : 0px auto 15px auto;
    font-size : 14px;
    color : #444;
    /* text-align : center; */
    border-radius: 3px;
    box-shadow: 3px 3px 2px #999;
    page-break-inside: avoid;/*페이지에 의해서 짤리는것을 막는 것 */
}

#list .item img {
    display: block;
    margin : 20px auto;
    box-shadow : -1px -1px 1px #555;
}

#list .item .txt {
    margin : 0px 12px 20px 12px;
}

</style>
  • 실행 결과

실행 결과

 

728x90
저작자표시 비영리 변경금지