기술노트

버튼에 command·commandfor 속성만 붙이면 자바스크립트 코드 없이 팝오버와 다이얼로그를 여닫습니다. 내장 명령과 커스텀 명령, 접근성 이점, 지원 현황과 폴백 처리까지 동작하는 예제로 차근차근 살펴봅니다.

inert 속성으로 화면 밖 UI의 키보드 포커스와 스크린리더 접근을 표준 방식 한 줄로 차단하는 법. aria-hidden·display:none과의 결정적 차이, 드로어와 커스텀 모달 배경에서의 실전 활용을 정리했다.

HTML dialog 요소와 showModal() 하나로 포커스 가둠·배경 비활성화·ESC 닫기·접근성 역할까지 공짜로 얻는 법. 백드롭 클릭으로 닫기, 닫힘 애니메이션 등 놓치기 쉬운 디테일까지 예제로 다뤘다.

htmx 2.0은 React 대신 HTML 속성만으로 인터랙티브 UI를 만드는 접근이다. 서버 렌더링·부분 업데이트·폼 처리·무한 스크롤을 단 3KB의 라이브러리로 구현하는 실전 패턴을 정리한다.

HTML Popover API로 JavaScript 없이 팝오버, 드롭다운, 모달을 구현하는 방법.

웹 접근성의 핵심 원칙과 ARIA 속성, 시맨틱 HTML 작성 실전 가이드.

HTMX를 활용해 서버 사이드 렌더링만으로 SPA 수준의 동적 UI를 구현하는 방법.

htmx 시작하기 — JavaScript 없이 동적 웹 만들기 — 실무에서 바로 적용할 수 있는 가이드입니다.

React 18 Streaming SSR — 서버에서 점진적 HTML 전송 — 실무에서 바로 적용할 수 있는 가이드입니다.

웹 접근성 A11Y 실전 가이드 — ARIA·시맨틱 HTML·키보드 네비게이션 — 실무에서 바로 적용할 수 있는 가이드입니다.

htmx 시작하기 — HTML 중심의 동적 웹 개발 — 실무에서 바로 적용할 수 있는 가이드입니다.

웹 접근성 A11Y 실전 — ARIA와 시맨틱 HTML — 실무에서 바로 적용할 수 있는 가이드입니다.