css

Category posts

웹 접근성의 이해와 실천 방법

웹 접근성의 이해와 실천 방법 안녕하세요, 개발자 여러분! 오늘은 웹 접근성에 대해 알아보겠습니다. 웹 접근성은 모든 사용자가 웹 사이트의...

position: sticky로 “붙는 제목”을 만들고, scroll-snap-*으로 “멈추는 위치”를 고정하면 스크롤 UI가 훨씬 예측 가능해진다.

fixed는 “뷰포트 기준”이 깨지는 순간이 있고, sticky는 “스크롤 컨테이너 기준”이 잡히는 순간이 있다. 둘 다 기준(컨테이닝 블록/스크롤 컨테이너)부터 확인하면 대부분의 삽질이 사라진다.

position은 기준점(컨테이닝 블록) 과 겹침 규칙(쌓임 맥락) 을 먼저 고정하면, 배치 버그의 대부분이 정리된다.

레이아웃만 “납작하게” 만들고 싶다면 display: contents로 래퍼의 박스를 제거해 Grid/Flex의 직접 자식처럼 배치할 수 있다.

float은 “레이아웃”보다 “텍스트 감싸기(특히 비정형 도형)”에서 여전히 쓸모가 있다.

체크박스(:checked)로 “상태”를 만들고 animation-play-state로 재생을 제어하면, JavaScript 없이도 초침(Second hand) 회전 + 일시정지 + 초기화 동작을 구현할 수 있다.

CSS Counter(CSS 카운터)만으로 “전체/체크됨” 같은 카운트를 UI에 표시할 수 있다.