[HTML+CSS][CSS 레이아웃] 02 - 다단으로 편집하기

 

[HTML+CSS][CSS 레이아웃] 01 - CSS 포지셔닝과 주요 속성들

 

신문 기사에 나오는 단의 넓이와 단의 개수와

단의 간격 등 단에 대해서 자세히 알아보고

직접 조절해보는 시간을 가져보자.

 

 

---

 

 

column-width 속성 : 단의 너비 고정 및 다단 구성

 

단의 너비를 고정해 주는 것으로
이때 고정 후에 화면이 넓어졌을 경우 단의 개수가 많아지고
화면이 좁아지면 단의 개수가 줄어든다.

 

 

 

 

---

 

 

column-count 속성 : 단의 개수 고정 및 다단 구성

 

단의 개수를 고정해 주는 것으로
브라우저 창의 너비와 상관없이 단의 개수를 항상 일정하게 유지되지만
창의 너비가 커질 경우 단의 너비도 커진다.

 

 

 

 

---

 

 

column-gap 속성 : 단과 단 사이의 여백

 

단과 단 사이의 여백을 지정하는 속성이다.

 

 

---

 

 

column-rule 속성 : 구분선의 색상, 스타일, 너비 지정

 

단과 단 사이의 여백을 지정하고 확실하게 표현하기 위해 수직선을 넣어줄 수 있는데
이때 수직선의 선 스타일을 지정할 수 있다.

만약 스타일 지정시 색상, 형태, 너비를 따로 지정하고 싶다면
column-rule-color, column-rule-style, column-rule-width 속성을 사용해 주면 된다.

 

 

 

 

---

 

 

break-after 속성 : 다단 위치 지정

 

다단을 어디부터 시작할지를 지정하는 속성으로
페이지나 단을 나눌 때 위치를 지정하는 속성으로는
break-before, break-after, break-inside가 있다.

 

 

 

 

---

 

 

column-span 속성 : 여러 단을 하나로 합치기

 

여러 개로 나뉜 단 이후 중간에 단을 합쳐 내용을 표시해야 할 때 사용하는 속성이다.

 

 

 

 

---

 

 

단순히 단을 만들었을때는 투박한 느낌이었는데

단에 스타일을 입히니

깔끔하고 효율적이라는 것을 느꼈다.

 

유용할 것 같으니 잘 기억해 두어야겠다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※