`column-count`2023. 6. 14.
이력서를 리액트 컴포넌트로 작성하다가 2단 처리를 어떻게 해야 되나 싶어서 알아보니 column-count 라는 프로퍼티가 있었고,
column-count: 2;column-count: 2;하면 되는 것이었다...
column-count: <number>;column-count: <number>;기본적으로 위와 같이 쓰면 되고, 이런 저런 관련 프로퍼티가 있는데,
column-width
column-count: auto;
column-width: 8rem;column-count: auto;
column-width: 8rem;content 분량에 따라 8rem width에 맞춰 자동으로 채워진다.
column-fill
column-fill: auto;
column-fill: balance;column-fill: auto;
column-fill: balance;auto: 일반적으로 기대되는 분량에 따라 채워지는 동작balance:column-count에 지정된 대로 content를 나누어 각 column에 배치
column-gap
ㅇㅇ 그것임
column-rule
규칙인가? 싶지만 그게 아니고 각 컬럼 사이에 라인을 그어준다.
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;이런 느낌.
column-span
특정 요소가 cols 사이를 가로지르게 만들 수 있다. 아래는 mdn의 예시.