이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS, Flex 기타 속성들
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Holy Grail Layout 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는
gogogameboy.tistory.com
지난 포스트에서는 가장 이상적인 웹페이지 레이아웃인 Holy Grail Layout과 유용한 기타 속성들을 공부했습니다.
오늘은 웹페이지를 신문처럼 꾸미는 Multi column에 대해서 공부해보겠습니다.
Multi column
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
text-align: justify; 로 column의 여백을 가지런하게 해줍니다.
column-count: 원하는 숫자; 로 column을 나눠줍니다.
column-count를 쓰지않고 column-width: 픽셀 값px; 만 쓰면 그 사이즈에 맞춰서 column의 수가 자동으로 생성됩니다.
위의 소스 코드처럼 count와 width를 같이 사용하면 최대 4가 넘는 column이 생기지는 않고,
가로가 설정한 픽셀 값(200px)을 유지할 수 없을 정도로 인터넷 창이 작아질 때마다 column의 개수가 줄어듭니다.
column-gap: 픽셀 값px; 은 column 사이의 여백입니다.
column-rule-style: solid; 로 column 사이에 줄을 칠 수 있습니다. solid 대신에 dotted(점선), dashed(절취선)를 쓸 수도 있습니다.
선의 굵기는 column-rule-width: 픽셀 값px; 선의 색은 column-rule-color: red; 와 같은 식으로 적용할 수 있습니다.
다음 포스트
CSS 반응형 웹을 만들기 위한 Media Query 기초
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 신문을 보는 것 같은 레이아웃 이 포스팅은 PC로 작성되었습니다.
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS, Media Query를 이용해 반응형 홈페이지 만들기 (0) | 2021.01.06 |
|---|---|
| CSS 반응형 웹을 만들기 위한 Media Query 기초 (0) | 2021.01.06 |
| CSS, Flex 기타 속성들 (0) | 2021.01.04 |
| CSS, Holy Grail Layout (0) | 2021.01.03 |
| CSS, flex-basis와 grow 그리고 shrink (0) | 2021.01.03 |
댓글