HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive
/
Columns

Columns

Tags
CSS
Study Date
Nov 7, 2023
Status
Done
생성 일시
Nov 7, 2023 06:28 AM
Day
35
다단(multi-columns) 설정
 
[컨테이너 속성]
  • column-count
    • 기본 값 : auto = 1
    • 단을 지정
  • column-width
    • 단의 넓이를 지정, 기본 값은 auto
    • 최적의 넓이일 뿐, 즉 column-width가 줄어들 수 있고 이에 따라 column-count도 자동으로 변경될 수 있다
  • columns = column-width column-count를 한번에 지정 가능
 
  • column-rule
    • 단과 단 사이의 border 속성
    • 첫번째 값 : 두께
    • 두번째 값 : solid(기본값), dashed, dotted 등
    • 세번째 값 : 색상(없으면 글자 색상 상속)
    • column-rule-width, style, color를 개별로 속성으로 지정할 수 있음
  • column-gap
    • 단과 단 사이의 거리
    • 구분선과는 아무 상관 없음에 주의
    • 역시 그냥 gap으로도 지정 가능.. but 하위 호환성 문제 주의