2024 10 02

CSS Containing block¶

컨테이닝 블록 식별
- position 속성에 따라 완전히 달라짐!! 1. position: static, relative, sticky
  - 컨테이닝 블록은 가장 가까운 조상 블록 컨테이너 (inline-block, block, list-item)
  - 가장 가까우면서 서식 맥락을 형성하는 조상 요소의 콘텐츠 영역 경계 (table, flex, grid) 2. position: absolute
  - position 속성 값이 static이 아닌, 가장 가까운 조상의 내부 여백 영역 3. position: fixed
  - 컨테이닝 블록은 뷰포트/페이지 영역(페이지로 나뉘는 매체) 4. position: absolute || fixed 의 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상이 컨테이닝 블록 될 수 있음
  - transform/perspective 속성이 none이 아님

static
- 요소를 일반적인 문서의 흐름에 따라 배치
- top/right/bottom/left/z-index 속성은 아무런 영향을 주지 않음
- 기본값!

relative
- 요소를 일반적인 문서의 흐름에 따라 배치하고, 자기 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용
  - 오프셋은 다른 요소에는 영향을 주지 않음
- 차지하는 공간은 static 일때와 같음

absolute
- 일반적인 문서 흐름에서 제거 + 페이지 레이아웃 공간 배정 X
- 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
  - 조상 중 위치 지정 요소가 없다면, 컨테이닝 블록을 기준으로 삼음
- 최종 위치는 top/right/bottom/left 값이 지정
- z-index의 값이 auto라면 새로운 쌓임 맥락 생성

fixed
- 일반적인 문서 흐름에서 제거 + 페이지 레이아웃 공간 배정 X
  - 요소의 조상 중 하나가 transform, perspective, filter 중 하나라도 none이 아니라면, 그 조상을 컨테이닝 블록으로 삼음
- 최종 위치는 top/right/bottom/left
- fixed는 요소의 컨테이닝 블록이 뷰포트의 초기 컨테이닝 블록
- 스크롤에 관계없이 특정 화면 지점에 고정되는 floating 요소를 생성할 수 있음

sticky
- 요소를 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운 스크롤되는 조상과, 표 관련 요소 포함한 컨테이닝 블록 기준으로 top/bottom/right/left 에 따른 오프셋 적용
- 스크롤 동작 (overflow: hidden/scroll/auto/overlay) 가 존재하는 가장 가까운 조상에 달라붙음.
- 상대 위치(static) + 고정 위치(fixed) 합친 느낌
  - 상대적으로 배치된 요소로 취급하다가, 주어진 경계선 지나면 고정위치
- sticky가 의도대로 동작하려면, top, right, bottom, left 중 적어도 하나의 임계값 설정해야해!

sticky 예시
```
.btn-target-fold {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    opacity: .9;
}
```
- 원래는 요소 안에서 static 마냥 요소의 흐름대로 배치되어 있다가,
- sticky 영역이 설정된 bottom:0 에 도달하면 fixed 요소처럼 floating 하는 느낌을 준다.

개요
- backdrop-filter: 요소 뒤 흐림/색상 시프트 등 그래픽 효과를 적용하는 속성
- 요소 "뒤"에 적용하는 방식으로, 효과 확인을 위해서는 요소/요소의 배경을 적어도 반투명하게 설정해줄 것.

기능 - backdrop-filter: blur(10px) : 뒤의 요소 블러 처리 - backdrop-filter: invert(80%) : 뒤의 요소 색상 반전처리 - backdrop-filter: sepia(90%) : 뒤의 요소 세피아(어두운 갈색) 처리

blur는 어느정도가 적당할까?
- Tailwind CSS provides preset blur values that can serve as a good reference:
  - backdrop-blur-sm: 4px
  - backdrop-blur: 8px
  - backdrop-blur-md: 12px
  - backdrop-blur-lg: 16px
  - backdrop-blur-xl: 24px
  - backdrop-blur-2xl: 40px
  - backdrop-blur-3xl: 64px