#css

태그별 글 목록

JS 없이도 UI가 반응한다: scroll-state 쿼리와 타입 있는 attr()

스크롤 가능 방향(위/아래)과 HTML 속성 값(색/숫자/키워드)을 CSS가 직접 읽고 검증하면, "작은 UI 디테일"을 JS 없이도 안정적으로 구현할 수 있습니다.

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

드롭존(drop zone)만 만들지 말고, 페이지 전역에서 브라우저 기본 동작(파일 열기/탭 이동)을 먼저 차단하면 “뚱뚱한 손가락” 같은 실수도 안전하게 막을 수 있다.

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

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

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

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

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

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