오늘의 포스트에서는 멀티 컬럼Multi-column에 대해서 알아보겠다.
멀티 컬럼은 마치 신문이나 잡지처럼 긴 텍스트 내용을 여러 개의 열로 나누어 보여줄 때 사용하는 속성이다.
이전 포스트
CSS Flexbox로 만드는 Holy Grail 레이아웃과 flex 기타 속성 정리
웹 디자인의 가장 이상적인 레이아웃인 Holy Grail 레이아웃을 Flexbox로 구현하는 방법을 알아봅니다. Header, Nav, Main, Aside, Footer의 5대 영역을 설정하고, 수직 수평 배치 전략과 사이드바 고정 기법을 상세히 분석했습니다.
생활코딩 CSS 수업 영상: Multi column
이전 포스트까지 다뤘던 Flex나 (생활코딩 CSS 수업에서는 다루지 않았지만) Grid가 큰 뼈대를 잡는 데 유리하다면, 멀티 컬럼은 글자(텍스트)의 흐름을 제어하는 데 특화되어 있다.
<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>
<body>
<div class="column">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium reprehenderit velit commodi nulla sed provident, voluptatum optio deleniti laudantium totam ipsam fuga illum a aliquam nisi rem quam magnam quia impedit quisquam. Maxime aspernatur consectetur minus consequatur ab quaerat velit ad officia delectus accusantium. Quaerat, aliquid cupiditate pariatur corrupti expedita explicabo rem inventore, incidunt adipisci, illum temporibus nobis. Vitae nobis voluptate eveniet consequuntur quae soluta maiores consectetur quasi nesciunt aut atque magni facere dicta sint mollitia perferendis blanditiis magnam illo ea, quas ex dolorem obcaecati! Minima vel eligendi ad molestiae, aut sunt facilis voluptate obcaecati ex perspiciatis asperiores ipsa, fuga ea repellat explicabo vitae distinctio dolores animi, quos quia labore tempore quidem! Harum consequuntur provident vitae nobis. Delectus neque voluptatibus dignissimos adipisci, commodi rerum, praesentium est dolore obcaecati nihil provident, doloremque ullam omnis sit deserunt amet culpa error sed quis dolores maxime totam! Tenetur veritatis pariatur, earum commodi explicabo nobis quia voluptate, blanditiis dignissimos eos sint corporis quaerat. Dolorum quod ullam hic quae! Nisi facilis deserunt omnis libero inventore? Iste porro pariatur, deserunt, dicta impedit voluptas ipsam voluptates tenetur in assumenda facere vero aut qui debitis corporis? Voluptatibus voluptas nobis voluptatem, fugiat veritatis sunt rem ratione atque! Libero nam eius illo dolor minus reiciendis maiores laudantium est quod doloribus, esse, corrupti neque itaque sunt magni saepe. Ea earum magni ut perspiciatis tempora vitae similique, facilis dolore, odio illo adipisci debitis! Laborum, omnis. Accusantium itaque incidunt ut quae ea corporis, voluptatem beatae saepe minus est rem architecto ex possimus deserunt consectetur porro qui repellendus magni debitis ipsam, expedita officiis vel. Consequatur aliquid deleniti voluptas expedita inventore sed voluptatum, omnis voluptatibus tempora consequuntur atque aperiam id explicabo dolorem maxime eius rerum reprehenderit voluptatem numquam quo asperiores! Laudantium atque ut, nesciunt facere omnis repellat, sapiente, explicabo veniam quo consectetur eveniet itaque error? Quaerat fuga, ratione eveniet, fugit minus praesentium dicta similique aliquid, eos dignissimos eligendi laborum voluptatibus quia molestiae aliquam sint quae dolores! Labore, veniam beatae quidem suscipit incidunt illo quis eos amet, nisi sit similique ipsam ipsa sapiente excepturi nulla dolores officiis architecto quisquam ipsum tempora repellat. Cupiditate harum consequuntur natus ipsa voluptas assumenda corrupti ab sequi earum reiciendis culpa laudantium adipisci obcaecati distinctio et velit voluptatem, aspernatur odio. Dolorem sit nam explicabo quo magnam, voluptatum enim! Quae nisi saepe maiores repudiandae ullam necessitatibus excepturi reiciendis mollitia dicta iusto praesentium in nostrum, aut laudantium ea hic labore et porro quaerat! Libero aliquid excepturi beatae quae, perspiciatis delectus veritatis molestias ullam, illo odit asperiores ab id recusandae, esse voluptate ex assumenda voluptatem reprehenderit molestiae? Voluptas molestias a aliquam repellendus numquam quod est quaerat, fuga exercitationem? Ipsum ipsa praesentium provident tenetur quia saepe distinctio officia, commodi aliquid itaque optio beatae maxime officiis quam voluptate. Dolorem facilis necessitatibus tenetur? Quos impedit, quisquam ea ad culpa soluta saepe voluptate provident eaque molestias est ab quidem officiis doloribus ipsum praesentium ullam, exercitationem sit corrupti? Facilis corrupti dignissimos cupiditate sint ipsum veritatis. Similique repudiandae dignissimos, adipisci et tempore earum dolore officia nihil temporibus asperiores velit culpa ipsum nostrum tenetur mollitia beatae quae inventore voluptas, atque voluptate. Reiciendis laboriosam rerum blanditiis velit porro expedita non molestias animi modi necessitatibus, magni sequi esse inventore dolores officiis culpa libero natus accusantium quia optio earum provident ut perferendis? Dignissimos provident, ullam fuga culpa ex quidem expedita voluptatum eos enim, ipsam labore distinctio eaque illum libero porro a! Enim nobis error excepturi voluptatem corporis beatae rem, optio natus repudiandae facere quod voluptas officia facilis esse, quaerat voluptatibus, soluta pariatur tempore totam ab. Numquam, ipsam. Commodi dolores itaque eligendi magni dolorem impedit voluptates obcaecati quos culpa maxime corrupti illum repudiandae sed sint debitis, vel totam ex. Numquam nam tempora tempore dolorum odio. Eaque, porro at? Dolore dolor quis, vitae quo quibusdam pariatur nisi similique molestias rerum laboriosam, consequatur doloremque excepturi perferendis ullam aliquid quisquam beatae modi, id optio fugiat ratione reiciendis deleniti! Cumque ut inventore placeat minima quam voluptatibus nostrum quis, quo omnis harum aliquam dolorem ipsa nobis incidunt eveniet. Suscipit ad assumenda unde eligendi expedita fuga, velit rem repudiandae reiciendis adipisci impedit tempore voluptatibus amet, veritatis delectus eius cupiditate fugiat ratione inventore nam, est repellendus rerum sit? Recusandae quisquam nesciunt at voluptatibus expedita quae explicabo maiores debitis soluta et atque natus, in suscipit, quidem, minus facilis voluptates commodi quibusdam accusamus voluptatem id aspernatur necessitatibus iusto. Est aliquid ad totam nam dolorem accusantium exercitationem quasi alias fuga accusamus odit mollitia aliquam quos in et atque natus temporibus quam obcaecati, itaque dolore. Vel, veritatis sunt. Eaque reiciendis numquam, eos voluptates neque, molestiae nihil suscipit nostrum, illum error distinctio? Eum minima dolor magni nulla aspernatur dignissimos libero excepturi ullam quis distinctio, possimus ut optio? Nisi eum voluptatibus fugit nemo ex. Quod beatae impedit ducimus! Nulla corrupti esse eum delectus, officia quae. Omnis animi quis, architecto laboriosam hic, consequuntur beatae eos eius quaerat consectetur, in ad ab reiciendis. Aut mollitia, pariatur expedita labore, eveniet nam laborum sit consectetur ipsa saepe deserunt perspiciatis quo magnam obcaecati esse dolores explicabo itaque voluptate? Fugit aliquam laudantium praesentium nulla enim voluptate quaerat asperiores earum, eaque placeat! Aspernatur labore ad iure adipisci quibusdam et quidem, facilis veritatis obcaecati porro corrupti ipsam laudantium incidunt pariatur expedita laboriosam delectus culpa voluptates molestias. Dicta alias molestiae velit doloremque officiis totam ex distinctio aliquam quae nemo voluptatibus sunt corporis, fugiat nam ipsa ea. Ut laborum quae quaerat iste magni! Aliquid porro omnis qui minus alias vero aliquam eius tempore iste corporis delectus voluptatem cum totam ex nobis vel quasi molestiae praesentium numquam, dolorem, consequatur sunt accusamus quo? Veritatis deserunt minus voluptatum ullam in quam sequi quas delectus, reiciendis consequuntur sint illum explicabo doloribus porro libero ea laudantium obcaecati voluptates nesciunt quia nisi doloremque perspiciatis! Cupiditate distinctio molestiae, animi culpa velit nam quaerat laboriosam recusandae exercitationem, rerum deleniti ullam dolorem quae reiciendis voluptate, praesentium a nemo quisquam tempora accusamus aperiam eveniet. Minima quis, similique assumenda placeat sint inventore, ex facere adipisci saepe rem eveniet? Distinctio quo harum molestias a officia, eum impedit aspernatur quis reprehenderit accusantium nobis aperiam porro ratione recusandae atque odit, suscipit ab fuga laborum?
</div>
</body>
</html>위의 생활코딩 수업 영상에서 사용한 코드다.
이 코드에서 사용된 CSS 속성들을 하나씩 살펴보자.
text-align: justify;: 텍스트의 왼쪽과 오른쪽 끝을 가지런히 맞추는 '양끝 정렬'이다. 신문처럼 깔끔한 열 느낌을 내기 위해 멀티 컬럼과 자주 함께 쓰인다.column-count: 4;: 텍스트를 총 몇 개의 열로 나눌지 정한다. 여기서는 4개의 단으로 나뉜다.column-width: 200px;: 열의 최소 너비를 지정한다.column-gap: 30px;: 열과 열 사이의 간격을 설정한다.column-rule-style: solid;: 열 사이에 생기는 구분선(가이드라인)의 모양을 정한다.column-rule-width: 1px;: 구분선의 두께를 정한다.column-rule-color: red;: 구분선의 색상이다.
column-count와 column-width가 같이 있으면 브라우저가 계산을 한다.
만약 화면이 좁아져서 200px짜리 열 4개를 다 보여줄 수 없게 되면, 브라우저는 열의 개수를 알아서 줄여버린다.
일종의 자동 반응형 기능이라고 볼 수 있다.
반응형 웹에 대해서는 다음 포스트에서 다룰 예정이다.
핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피
masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다.
opentutorials.org
생활코딩 CSS 수업 영상 마지막에 소개한 '핀터레스트 스타일 레이아웃 만들기' 수업의 링크다.
Flex가 박스를 배치하는 도구라면, Multi-column은 긴 글을 읽기 편하게 가공하는 도구다.
반응형 웹을 만들 때 column-width를 활용하면 화면 크기에 따라 열의 개수가 자동으로 조절되는 스마트한 매거진 레이아웃을 만들 수 있다.
다음 포스트
CSS 반응형 웹, 미디어 쿼리(Media Query)와 뷰포트(Viewport) 메타 태그
하나의 코드로 PC부터 모바일까지 대응하는 반응형 웹 제작법을 알아봅니다. 미디어 쿼리의 min-width, max-width 활용법과 필수 요소인 뷰포트 메타 태그의 역할을 상세히 알아보고, 모바일에서 콘텐츠 순서를 바꾸는 실무 기법까지 확인해 보세요.
이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요.
(비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩