기억해 둘 만한 작은 네이티브 웹 기법

별도 라이브러리 없이 브라우저가 이미 제공하는 HTML/CSS/JS만으로 UI와 상호작용을 네이티브하게 구현하는 법을 정리한 레퍼런스 사이트 :has(), @scope, Container Query처럼 컴포넌트 구조를 단순하게 만드는 CSS부터 dialog, Popover, inert처럼 JavaScript로 직접 구현하던 UI를 네이티브 기능으로 대체하는 방법까지 다룸 clamp(), text-wrap, color-mix(), light-dark()처럼 반응형 크기·줄바꿈·색상 처리를 복잡한 미디어 쿼리나 별도 계산 없이 CSS에서 해결하는 패턴도 포함 Intl.NumberFormat, classList.toggle(), Custom Highlight API, View Transitions API처럼 브라우저 API를 활용해 코드 양을 줄이는 JavaScript 기법도 모아둠 일부 기능은 아직 Limited/Experimental 상태이므로 브라우저 지원 여부를 확인하고 Fallback과 접근성을 함께 고려하는 것이 기본 원칙임 입력 방식과 상태를 브라우저에 직접 묻기 any-pointer, any-hover를 사용하면 User-Agent로 모바일/데스크톱을 추측하지 않고 실제로 연결된 입력 장치가 정밀 포인터·터치·Hover를 지원하는지 판단할 수 있음 터치스크린 노트북처럼 Fine/Coarse Pointer를 동시에 가진 장치도 처리 가능 Hover만으로 기능을 제공하지 말고 키보드·터치에서도 같은 작업이 가능해야 함 :has()는 특정 자식이나 상대 조건을 가진 요소를 선택할 수 있어, form:has(:invalid)처럼 하위 요소 상태에 따라 부모를 스타일링할 수 있음 :target은 URL의 #fragment가 가리키는 요소를 선택해 딥링크된 영역 강조나 간단한 패널 전환을 JavaScript 상태 없이 구현할 수 있음 :where()는 여러 선택자를 묶으면서 Specificity를 0으로 만들어 쉽게 덮어쓸 수 있는 기본 스타일을 작성하는 데 유용함 classList.toggle(class, boolean)의 두 번째 인자를 사용하면 현재 상태를 뒤집는 대신 Boolean 값과 DOM Class 상태를 명시적으로 동기화할 수 있음 inert는 특정 DOM 하위 트리를 Focus·Pointer Interaction·텍스트 선택·접근성 트리에서 제외해 일시적으로 사용할 수 없는 UI 영역을 만들 수 ...