CSS

다단(multi column)

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

 

예제 - multi_column.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="egoing">
    <style>
      .column{
        text-align: justify;
        column-count: 4;
/*        column-width: 200px;*/
        column-gap:30px;
        column-rule-style: solid;
        column-rule-width: 5px;
        column-rule-color: red;
      }
      h1{
        column-span: all;
      }
    </style>
</head>
<body>
   <div class="column">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis nostrum eum ipsam, 
     
     quam expedita distinctio aspernatur voluptas inventore in officia at, a repudiandae modi vel dicta exercitationem accusamus? Tenetur minima doloremque, sequi id, necessitatibus deleniti porro ex maxime perferendis quaerat rerum molestias dolor fugit ullam expedita? Earum velit eaque, esse aliquid labore, ex, corporis odit deserunt consectetur sit aspernatur
      <h1>Lorem ipsum dolor sit amet.</h1>
       ipsam quos cupiditate dolores voluptatem non nam voluptas ab animi quidem adipisci repellat id quod. Laboriosam, distinctio, ut. Quia deserunt, voluptates illum eos, qui, doloremque recusandae laudantium aliquam amet rerum nulla, eveniet. Libero quas iusto, suscipit esse beatae voluptas labore. Nobis facere architecto adipisci ipsa molestias, possimus tempore. Obcaecati, quae laborum atque perspiciatis natus dolore repellendus in officia, sit! Placeat, nesciunt cupiditate similique vitae minima iusto blanditiis perferendis obcaecati enim odio delectus. Quaerat quos deserunt, voluptas aperiam. Quo neque ducimus accusamus quibusdam minima incidunt, voluptatem saepe iusto sit numquam, expedita distinctio aliquid voluptatum alias voluptate sint est ab similique ipsam unde quas porro error? Illum unde consequuntur ab optio architecto, adipisci odit saepe dolor est perferendis error autem iusto a iste tempore nam enim quaerat dicta fugit vel eaque itaque, laborum? Dolores consequatur quo labore dolorem nemo in, tempora animi enim delectus ipsam amet possimus et deserunt recusandae eveniet provident cum quaerat dolorum esse, nam doloremque! Porro sapiente labore aliquam incidunt temporibus praesentium est tempora magnam placeat rem. Autem non provident eos perferendis nihil numquam quisquam suscipit aut, vero minima ex iure cum possimus eveniet veniam aliquam nulla a dignissimos, fugit tempora eaque totam temporibus! Magni minus expedita tempore deserunt necessitatibus, quibusdam, repellat sequi quos exercitationem aliquam sapiente libero eius vitae rem ea nihil deleniti nemo debitis tempora soluta a similique inventore. Sit vero dignissimos facere dolore dicta nulla iure magni quos officiis esse hic accusantium, praesentium adipisci laudantium impedit provident fuga suscipit, placeat porro itaque voluptatum dolorem ullam velit quasi. Laboriosam distinctio explicabo, ullam fugit nesciunt nam itaque repellendus nemo doloribus officia unde quaerat aspernatur odit. Porro quisquam at officia, ad totam minima minus aliquid aliquam rerum dicta, odio sint optio. Exercitationem similique, dignissimos sit nihil fuga ex dolores molestiae ratione impedit error, vitae aliquid reiciendis maxime id odit sed eveniet. Corporis in mollitia assumenda, exercitationem ullam explicabo dolorum tempore architecto cum. Possimus natus ipsam facilis porro magni deleniti nulla eveniet aliquam incidunt minima nihil alias voluptatem, odio molestiae quaerat suscipit, officiis temporibus itaque veritatis, placeat modi corporis saepe harum delectus officia. Libero rerum expedita dolorem porro architecto reprehenderit eligendi molestiae, amet minima quae assumenda neque nulla error, officiis suscipit placeat, illo eius. Aliquid dicta cupiditate culpa consequatur totam. Qui consequuntur eveniet eum dicta repellendus quam ea quisquam dolore, distinctio, quidem facilis minus ratione ullam perferendis. Ad ea, aliquid doloremque distinctio enim hic sunt illum dolore, commodi iusto nobis temporibus nesciunt, vero quae velit perferendis dicta. Quod necessitatibus sit, accusamus odit aspernatur! Sequi, nisi aut at totam perspiciatis fugit quos minus sapiente consequatur neque officiis quibusdam qui nemo, voluptatibus minima dolore laboriosam. Recusandae similique accusamus vel eaque tempore fugiat dolore adipisci, tempora, impedit harum facere aspernatur et nam sequi, facilis architecto voluptate sunt iusto soluta. Itaque laboriosam tempore ab harum fugit natus, eius laborum culpa, impedit autem magni totam. Et dicta animi molestiae, aliquam, sequi enim. Accusamus consectetur eum eligendi nemo sunt provident ut repudiandae, distinctio! Recusandae harum animi quia perferendis maiores! Ratione quis cupiditate odio dolore nulla minus iure veritatis hic temporibus neque beatae delectus doloribus repellat quisquam alias mollitia accusantium perferendis, quibusdam recusandae, iusto modi maiores excepturi corrupti voluptatibus! Facere, maiores ea natus culpa necessitatibus temporibus, eaque, vitae nihil animi repudiandae expedita aspernatur quo sequi, soluta. Minus eligendi tenetur ullam, doloremque, quod libero provident excepturi beatae cumque quo, voluptate. Quam deleniti minus officiis. Sit velit, debitis voluptatem modi consequatur doloremque aperiam assumenda expedita odio nesciunt quis ipsam, cumque impedit quia veritatis error quidem similique accusantium eos, qui sunt? Blanditiis facere tenetur eius minus dolorum, praesentium doloremque consequatur accusamus quis expedita, reiciendis odio optio illo voluptatibus ut asperiores quos officia totam distinctio eaque. Aspernatur eaque nihil porro illo laboriosam ex ea id fuga ipsa! Cum reprehenderit, cumque dolorum aliquam quidem aliquid soluta corrupti pariatur fugiat quae excepturi tempora, nostrum eveniet accusamus consectetur alias minus nulla unde. Rem expedita vitae labore culpa, id sit reiciendis quaerat, temporibus nemo eos modi error excepturi voluptatem. Non officia, accusantium inventore reiciendis cupiditate laboriosam ullam quaerat officiis facilis modi eum iste eius, soluta, iure nobis dolor. Similique deserunt beatae officia reprehenderit quo, aliquam facilis autem nihil in! Quisquam minima sunt corporis, ipsum maiores nam quia corrupti, odit id suscipit ratione voluptate nisi incidunt sequi eum facilis dicta deleniti aliquid ducimus maxime esse qui. Sunt eius, deserunt illo quod ducimus quasi, sed soluta ipsum inventore nisi! Optio modi omnis, ex, fugit nemo eveniet. Nostrum, incidunt porro, dolores non, dolor velit commodi eius recusandae eaque necessitatibus molestiae dolorem unde ipsa voluptatum. Ipsa ab minus atque non quis debitis delectus similique excepturi, ipsum suscipit perferendis doloribus deleniti nam blanditiis architecto quae fuga porro perspiciatis magnam ipsam pariatur. Quia, temporibus. Molestias quia nesciunt vitae quam, deserunt dolor adipisci architecto minus natus facere, molestiae, sint eum. Soluta magni totam ducimus, deserunt quam, nisi unde, asperiores iusto, repudiandae aperiam dolorem ab libero aliquam fugit ratione voluptatem sunt vel earum saepe debitis id nostrum minus ullam quaerat. Amet molestias deserunt quae assumenda ut odit corporis accusantium saepe labore ad. Distinctio in doloremque, deleniti provident ducimus quisquam at, temporibus odio eligendi, consequuntur sequi quibusdam facere aut enim vel similique eius asperiores aperiam ratione suscipit est eum dolore. In eius dignissimos, quod illum dolores! Molestiae possimus eius, illo incidunt optio deleniti, nihil odit nisi harum, quo ex. Corporis omnis accusantium consequuntur ratione laudantium magni tempora expedita. Earum ullam, aspernatur quisquam doloremque soluta quae eius tempora atque magni omnis ex vel iusto, similique eos provident! Autem ipsum aliquam quasi minima, incidunt perferendis facere, optio nobis rerum dolor ipsam quas. Quam consectetur recusandae voluptatem. Praesentium excepturi sunt ut neque eum labore ducimus repudiandae eveniet quibusdam explicabo, iure obcaecati nobis, veritatis quis et accusantium ipsa.
   </div>
</body>
</html>

참고

댓글

댓글 본문
  1. 곤비
    0219
  2. 새콤달콤
    완료
  3. DreamBoy
    2023.09.19. CSS - 레이아웃 - 다단(multi column) 파트를 시작합니다.
  4. AgainstartJH
    2022년 11월 22일 화요일 학습완료!
  5. 헤밍웨이
    220823 감사합니다!
  6. INJE
    22/03/18
  7. pmxsg
    2021.12.28 재수강
  8. 드림보이
    2021.11.14. 다단(multi column) 파트 수강완료
  9. choi
    완료
  10. jeisyoon
    2021.06.24 Multi Column - OK
  11. yogg
    멀티컬럼 괜찮네여어어어엉
  12. 임태경
    완료헀어요 감사해요
  13. 스마일가이
    2021.01.29 완료 감사합니다
  14. 따뜻한츄르
    210101
  15. 201218
  16. switpotato
    20201129: 2차 학습 완료
  17. 만듀
    20201117
  18. 박병진
    완료
  19. 콜라
    20200930완료
  20. 김성곤
    20200725 감사합니다!
  21. 한강
    multi column 오늘도 감사합니다.~~^^!
    200611
  22. green diseny
    핀터레스트 스타일 레이아웃 만들기 이거 하기~~!!!
  23. 완료!
  24. teemy
    완료
  25. 무지개반사
    완료
  26. Blanc
    2020.01.05
  27. 힙합엄지
    브라우저 창 조절할 때 왜 500이하로는 안 줄여지는지 아시는 분 계신가요?
  28. 공부중
    수강 완료! 실습도 완료!
  29. 싸커홍
    수강완료
  30. 다나가
    190806 - 수강 완료!!
  31. FIRE
    20190730 완료
  32. 박지성
    저의 활약이 담긴 스포츠 뉴스도 이런식으로 만들어졌을거라 생각하기 때문에
  33. 김경모
    진짜 다단은 글 많이 쓰는 사이트에서 아주 중요합니다
  34. lygon
    2019-03-05 완료
  35. 한승민
    190227
  36. 숨이
    완료햇습니당
  37. 김민영
    완료
  38. 제갈량
    column-rule-style: dashed;
    column-rule-width: 3px;
    column-rule-color: red;

    column-rule을 아래와 같이 한 줄로 적어도 됩니다.
    독립적으로 적어도 상관없구요.
    column-rule: dashed 3px red;
  39. egoing
    수정했어요~
    대화보기
    • Minju Kim
      유용하게 봤습니다! 그런데 영상 위에 다단 설명에서 분활하다가 아니라 분할하다가 맞는 것 같아요:)
    • 푸른하늘
      11일차 공부 감사합니다
    • 오빠는다르다
      감사합니다~!!!!!!!
    • nevertoolate
      웹에서 신문 이쁘게 만들 수 있네요
    • 김하나
      계속 새로운기법?이 나오는 걸 보니 끝이 없는 놀라움에 연속입니다 ㅎㅎ
    • 김아무개
      정말 많은 도움 받아갑니다! 최고세용
    • 14번째
      5.24.
    • php가 첫취업?
      이번건 꽤나 유용한 정보네요 이해하기도 괜찮았었고...html,php는 어느정도 개념이 잡아가지만
      css는 완전 초짜다 보니.....어떻게 활용해야할지 막막하네요 ㅠㅠ

      이해하기 괜찮은것도 있고....이해는 했지만 여러번 연습해야봐야하는것도 있고...
      너무 이해하기 어려운것도 있네요 ㅠㅠ
      프로그래밍언어만 공부하다가 이번 국비지원으로 미리 예습차 시작한 css지만....
      막막하네요..디자인언어란 ㅠㅠ
      왠만한 프로그래밍언어보다...배로 연습을 많이 해야할것 같습니다
    • 임지호
      멀티컬럼 : 신문과 같이 여러개의 컬럼을 나눠서 레이아웃을 짜는 경우에 쓰는 기술
      - 여러가지 속성
      : column-count : 컬럼을 몇 개로 나눌지, column-width : 하나의 컬럼의 크기를 몇으로할지 (이 둘은 독립,조합가능
      -gap : 컬럼 사이 간격, -rule-style : 컬럼 사이 선 스타일, -rule-width : 컬럼 사이 선 두께
      -rule-color : 컬럼 사이 선 색깔, column-span : 특정 태그가 컬럼을 초월하게 하고 싶을 떄 all을 주면 됨(특정 태그
      에 사용)
    • 아래 말씀하신 masonry등 카드형 ui관련 글을 D2에서 접한 적 있습니다.
      (이 글에서는 masonry가 데이터량이 많아질 수록 비효율적이기 때문에
      네이버 쇼핑이 masonry가 아니라 eg.InfiniteGrid로 ui 전반을 변경하였다고 소개합니다.)
      http://d2.naver.com......130
      보실 분들은 보세요~
    • sssssqew
      항상 특정 웹사이트의 쇼핑몰 같은 저러한 레이아웃은 어떻게 만들어지나 궁금했는데 저렇게 만드는군요. ^^
    버전 관리
    egoing@gmail.com
    현재 버전
    선택 버전
    graphittie 자세히 보기