[CSS] 10. Multi Column, 다단만들기

1. Multi Column

---

• 잘 사용하진 않을 것 같지만 미래는 모르는 거니까. 정리해두기

• 마치 신문의 레이아웃처럼 여러개의 다단을 만들어야 할 때 사용하는 기능이다.

출처 : 위키피디아

• 종이를 아끼기 위해 꾹꾹 여백없이 눌러담은 이런 디자인을 만들기 위함… 이랄까.

2. How to Use

---

1. 먼저 다단을 감쌀 커다란 div태그를 만든다. ⇒ 나는 container라고 class 이름을 지었다.

2. .container에 속성 넣기

3. 결과는 바로바로 타다~ 이렇게 4단으로 완성된 결과물이 나온다.

.container {
            column-count : 4;
        }

3. 기타 속성 꾸며보기

---

1. column-width

• 이름에서부터 바로 직관적으로 알 수 있듯, 하나의 column의 폭을 정해준다.

• 최소한의 column 너비를 의미하며, 이 예시의 경우 화면이 1200px 보다 커지면 column 하나의 너비가 300px 보다 커진다.

• 반대로 화면의 크기가 1200px 보다 작아지면, column-count가 우선 되는게 아니라, width 가 우선이 되어서 column의 개수가 4개보다 줄어들고, width를 300px 이상으로 유지한다.

.container {
            column-count : 4;
            column-width: 300px;
        }

2. column-gap

• column들의 사이 여백을 의미한다.

3. column-rule

• column 사이의 선? 선꾸미기 일명 선꾸~

• border과 똑같다! 굵기-style-색상 순으로 작성하면 된다.

.container {
        column-count: 3;
        column-gap: 20px;
        column-rule: 4px dotted rgb(79, 185, 227);
      }

Uploaded by N2T