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

HTMLcat은 별도 라이브러리 없이 적용할 수 있는 HTML·CSS·JavaScript 활용법을 짧은 노트로 정리함 입력 기능 감지부터 중앙 정렬, 스크롤, 줄바꿈, 색상까지 자주 필요한 CSS 패턴을 찾아볼 수 있음 dialog, Popover API, inert, hidden=until-found처럼 브라우저가 제공하는 네이티브 HTML 기능을 다룸 Intl.NumberFormat, classList.toggle(), CSS Custom Highlight API, View Transitions API 등 JavaScript 연동 기능도 포함함 컨테이너 쿼리, 스크롤 기반 애니메이션, CSS 캐러셀, CSS Grid Lanes 등 비교적 새로운 웹 플랫폼 기능까지 한곳에 모음 HTML·CSS 활용법 입력과 상호작용 입력 기능 감지 여러 입력 유형의 호버 감지 :has() 관계형 선택자 :target 의사 클래스 :where() classList.toggle() 하위 트리를 비활성화하는 inert 레이아웃과 표시 CSS 중앙 정렬 빈 태그 설명 목록 정렬 @scope를 이용한 CSS 범위 지정 컨테이너 크기 쿼리 컨테이너 스타일 쿼리 CSS Grid Lanes 스크롤과 전환 스크롤바 숨기기 부드러운 스크롤 스크롤 여백 스크롤 스냅 이벤트 스크롤 기반 애니메이션 View Transitions API CSS 캐러셀 텍스트와 선택 clamp() 텍스트 선택 영역 강조 ::marker를 이용한 목록 마커 스타일링 text-wrap을 이용한 줄바꿈 개선 CSS Custom Highlight API 검색 가능한 접힌 콘텐츠를 위한 hidden=until-found 색상과 형태 prefers-color-scheme accent-color를 이용한 네이티브 폼 색상 color-mix()를 이용한 투명 색상 light-dark() contrast-color() corner-shape CSS 확장 기능 CSS 사용자 정의 함수 details name을 이용한 상호 배타적 아코디언 HTML·JavaScript와 기타 기능 네이티브 HTML 전화 및 이메일 링크 translate 전역 속성 dialog 요소 Popover API 버튼 명령으로 대화상자 제어 JavaScript Intl.NumberFormat을 이용한 현지화 가격 표시 스크롤 스냅 이벤트 CSS Custom Highlight API View Transitions A...