META
- 날짜: 2023-11-06 (DAY35)
- 주제: CSS
- 세부 내용
- grid units
- transform
- multi-columns
- filter
📕 Grid Units
- fr (fraction) : 사용 가능한 공간 너비 비율
- min-content, max-content : grid item이 가지는 content의 최소/최대 너비를 반환한다
기본적으로 브라우저는 한글을 단어 단위가 아닌 문자 단위로 줄바꿈 처리한다. 따라서 의도와 다르게 한 글자 정도의 크기만을 만족하는 grid-item 크기로 레이아웃이 잡힌다.
한글 text를 단어 단위로 처리하고 싶을 때는word-break: keep-all;속성을 지정해줄 수 있다.
- word-break
- normal(기본값)
- keep-all : 한글도 단어 단위로 줄바꿈
- break-all : 문자 단위로 줄바꿈
-
auto-fill과 auto-fit
암시적으로 grid의 행과 열 개수를 생성한다.repeat(개수, 너비)에서 개수 부분에 사용하는 속성이다. 1개의 행 또는 열에서 모든 grid item이 정렬되어 빈 공간이 만들어지는 경우에만 속성이 유효하다.
두 속성을 비교해보면- auto-fill: 지정할 수 있는 최소 너비를 우선으로 적용한다
- auto-fit: 지정할 수 있는 최대 너비를 우선으로 적용한다
-
minmax
repeat(개수, 너비)에서 너비 부분에 사용한다.
minmax(최소 너비, 최대 너비)형식으로 grid item의 최소 너비 / 최대 너비를 암시적으로 지정한다.
📕 Transform
- transform origin
- perspective(속성)과 perspective(함수)
-perspective()함수는 변환 효과가 일어나는 요소 자체의 transform 문에 사용한다perspective:속성은 변환 효과가 일어나는 요소의 부모 또는 상위 요소에 사용한다
- perspective-origin
- backface-visibility : 요소의 뒷면이 보여지는 지를 결정한다
📕 Multi-Columns (다단)
속성
- column-count : 단의 개수를 지정한다
- 기본값: auto (1과 동일) - column-width: 단의 최적 너비 지정한다
- 기본값: auto (최적의 너비 계산) - columns: width, count의 단축 속성이다
-columns: [width값] [count값]형식으로 사용한다 - column-rule: 단 사이의 구분선을 설정한다
- border와 특성이 유사하다[width값] [style값] [color값]형식으로 사용한다
- column-gap: 단과 단 사이 너비를 지정한다
📕 Filter
filter: [filter 함수] 형식에서 아래는 [filter 함수]에 들어갈 수 있는 filter 함수들이다.
- blur
- grayscale
- invert
- drop-shadow
- brightness
- contrast
- opacity
- saturate
- sepia
- hue-rotate
- backdrop-filter
✒️회고
평소에 grid를 사용하여 레이아웃을 잡다보면 항상 grid unit을 어떻게 지정해야 할지 고민했었던 것 같다. 반응형, 모바일 등의 여러 환경에서 변화하는 grid layout을 구현하기 위해 주로 fr이나 고정된 길이 값(px, rem 등)을 명시적으로 지정해서 사용했는데 항상 애를 먹었다. minmax, auto-fill/auto-fit와 같이 암시적으로 grid layout을 변경할 수 있는 특성을 활용하여 해당 작업을 더 편하게 할 수 있지 않을까라는 생각이 들었다. 오랜만에 예전 프로젝트 레이아웃을 살펴보고 더 효과적으로 레이아웃을 잡을 수 있는지 확인해봐야겠다 :)
🏃♂️Keep
🏃♂️Problem
반응형 grid 레이아웃은 여전히 만들기가 어렵다... 사실 이 부분은 그리드 개념도 있지만, 화면 너비에 따라 요소 배치가 완전히 바뀌는 case를 고려해야 해서 어렵게 느껴지는 것 같다. 특히 ::after, ::before과 같은 가상 요소를 쓸 생각을 하지 않았기 때문에 div지옥에서 각 div가 어떻게 동작해야 하는지 파악하고 있는 건 어려운 일이다.
🏃♂️Try
CSS 선택자 중 가상 요소를 적극적으로 사용할 예정이다. 팀원께서 네이버 클론코딩을 진행했었는데 네이버 홈페이지를 참고하면 가상 요소를 활용하는 것을 연습하는 데에 도움이 된다고 했다. 한번 확인해 봐야겠다.
