HTML만으로 구현하는 동적 UI

JavaScript가 맡아온 여러 동적 UI 기능을 <dialog>, popover, <details>와 HTML 속성만으로 구현할 수 있음 command·commandfor와 popovertarget은 대상 요소를 id로 연결해 대화상자와 팝오버를 스크립트 없이 제어함 같은 name을 가진 <details>는 하나만 열리며, 기본 <input>과 <datalist>는 선택기와 자동완성을 제공함 loading="lazy"는 이미지 로딩을 늦추고, hidden="until-found"는 프래그먼트 탐색 시 숨겨진 콘텐츠를 브라우저가 드러내도록 함 브라우저와 입력 유형에 따라 지원 범위가 다르며, 안정 버전에서 제공하는 command도 현재 6개로 제한됨 <dialog>로 대화상자 열기 2022년 3월부터 주요 브라우저에서 사용할 수 있으며, 최소 지원 버전은 Chrome 37+, Edge 79+, Firefox 98+, Opera 24+, Safari 15.4+임 모바일은 Chrome Android 37+, Firefox for Android 98+, Opera Android 24+, Safari on iOS 15.4+, Samsung Internet 3+, WebView Android 37+를 지원함 버튼에 command="show-modal"과 commandfor를 지정하면 해당 id의 대화상자를 JavaScript 없이 열 수 있음 <form method="dialog"> 안의 제출 버튼으로 대화상자를 닫을 수 있음 popover로 팝오버 제어하기 2025년 1월부터 사용할 수 있으며, Chrome·Edge 114+, Firefox 125+, Opera 100+, Safari 17+가 지원함 모바일 지원 범위는 Chrome Android 114+, Firefox for Android 125+, Opera Android 76+, Safari on iOS 17+, Samsung Internet 23+, WebView Android 114+임 popover와 popovertarget 속성만으로 팝오버 전환을 구현함 바깥 영역 클릭 시 닫히는 라이트 디스미스(light dismiss), Esc 닫기, 최상위 레이어 배치를 브라우저가 처리하므로 z-index를 직접 관리할 필요가 없음 <details>를 아코디언으로 그룹화하기 20...