Education/⛺BootCamp

[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 16 [4주차]

ds-coding 2024. 8. 19. 16:57

❤️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 앞으로 바라는 점

  • 배운내용 제대로 숙지하기
  • 체력관리 잘하기