❤️Liked 느낀 점
강의 시작한 지가 엊그제 같은데 벌써 한 달이 다 되어가니까 시간이 빨리 지나가는 것 같습니다.
이번 시간에 배운 sticky는 sidebar를 만들 때 유용하게 쓰일 것 같았습니다.
하지만 sticky값이 fixed라는 값과 헷갈려서 개념을 제대로 숙지해야할 것 같습니다..
✏️Learned 공부한 내용
Stacking Context
개념
z-index에 따라 요소들이 쌓이는 순서를 정의하는 독립적인 맥락을 제공합니다.
생성 조건
- 루트 요소 (<html> 요소)는 항상 새로운 스태킹 컨텍스트를 형성합니다.
- z-index가 지정된 위치 요소 (Positioned Elements):
- position: absolute, position: relative, position: fixed, position: sticky 중 하나가 적용되고, z-index 값이 auto가 아닌 경우.
- 플렉스 컨테이너 (Flex Containers):
- display: flex 또는 display: inline-flex인 요소에 z-index가 설정된 경우.
- 그리드 컨테이너 (Grid Containers):
- display: grid 또는 display: inline-grid인 요소에 z-index가 설정된 경우.
- opacity 값이 1보다 작은 요소 (opacity < 1).
- transform, filter, perspective 또는 clip-path 속성이 적용된 요소.
- isolation: isolate 속성이 적용된 요소.
- will-change 속성이 특정 값으로 설정된 요소.
- CSS3의 mix-blend-mode 속성이 normal이 아닌 요소.
순서
- 배경과 테두리: 스태킹 컨텍스트를 가진 요소의 배경과 테두리.
- 음수 z-index 값을 가진 자식 요소들.
- z-index 값이 auto이거나 지정되지 않은 자식 요소들.
- 양수 z-index 값을 가진 자식 요소들.
position: sticky
개념
CSS의 position 속성값 중 하나로, 요소의 위치를 스크롤에 따라 고정하거나 이동하도록(동적으로) 변경해주는 속성입니다.
동작원리
- 일반적인 흐름: 스크롤 위치가 지정된 임계점에 도달하기 전까지는 position: relative처럼 동작합니다.
- 고정 위치: 스크롤이 임계점을 넘어서면 position: fixed와 유사하게 화면에 고정됩니다.
- 제한된 영역: 부모 컨테이너 내에서만 '고정' 상태를 유지합니다.
동작조건
- 부모 컨테이너:
- position: sticky가 적용된 요소의 부모 컨테이너가 스크롤 컨테이너여야 합니다.
- 부모 컨테이너 내에서 요소가 고정되며, 부모 컨테이너를 벗어나면 고정이 해제됩니다.
- 스크롤바:
- 고정 위치는 스크롤바가 있는 경우에만 적용됩니다.
- 스크롤바가 없는 경우에는 sticky 효과가 발생하지 않습니다.
- z-index: sticky 요소의 z-index는 필요에 따라 조정할 수 있지만, 기본적으로 auto로 설정됩니다.
사용사례
- 고정 헤더 또는 사이드바: 페이지를 스크롤할 때 상단이나 측면에 고정되는 메뉴, 헤더, 사이드바 등을 구현할 때 유용합니다.
- 표의 열 머리글 고정: 긴 테이블에서 열 제목이 상단에 고정되도록 할 수 있습니다.
주의사항
- 오버플로우: 부모 요소에 overflow: hidden이 설정되면 제대로 작동하지 않을 수 있습니다.
- z-index: 다른 요소와 겹칠 때 z-index로 쌓임 순서를 조정해야 할 수 있습니다.
관련링크
[CSS] position : sticky 속성 - 요소를 스크롤에 따라오게 만들기 (tistory.com)
[CSS] position : sticky 속성 - 요소를 스크롤에 따라오게 만들기
sticky는 영어로 '끈적끈적하다'라는 형용사입니다. position : sticky로 설정하면 끈적끈적하다는 말처럼 스크롤을 계속해서 따라오는 html요소를 생성할 수 있는데요. sticy position으로 설정되어 있는
coding-factory.tistory.com
😔Lacked 부족한 점
그동안 열심히 수업을 들은 것 같지만..
아직도 개념이 제대로 숙지되지 않아서 실습 때 어려움을 겪어 한 번 쯤은 시간내서 여태 배운 내용을
총정리 하는 것도 필요하겠구나를 느꼈습니다..
🙏🏻Longed For 앞으로 바라는 점
- 배운내용 제대로 숙지하기
- 체력관리 잘하기
'Education > ⛺BootCamp' 카테고리의 다른 글
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 18 [5주차] (0) | 2024.08.21 |
|---|---|
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 17 [5주차] (0) | 2024.08.19 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 14 ~ 15[4주차] (0) | 2024.08.15 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 13[4주차] (0) | 2024.08.12 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 12[3주차] (1) | 2024.08.10 |
