자바스크립트를 HTML만으로 대체하기

1 month ago 6

웹에서 JS 의존 기능을 HTML/CSS로 대체할 수 있는 최신 방법들을 소개
details·summary , datalist , popover 등 표준 요소를 활용해 아코디언, 자동완성, 모달, 오프스크린 내비게이션을 구현
이러한 접근은 다운로드·평가·메모리 사용량을 줄여 성능과 사용자 경험을 개선
각 기능별로 CodePen 예시, MDN 문서, 브라우저 호환성 정보가 함께 제공
JS를 꼭 필요한 영역에만 사용하고, HTML/CSS의 발전된 기능을 적극 활용해야 함

HTML과 CSS로 JS 기능 대체

오랜 기간 JavaScript는 HTML과 CSS로 구현할 수 없는 기능을 담당해 왔음
- 그러나 HTML과 CSS의 기능이 확장되면서, 일부 JS 기능을 네이티브 웹 기술로 대체 가능
JS는 다운로드·압축 해제·평가·메모리 유지가 필요하므로, 가능한 기능은 HTML/CSS로 이관하는 것이 효율적
JS는 복잡한 로직에 집중하고, 단순 UI 제어는 HTML/CSS에 위임하는 방향 제시

아코디언 / 확장 콘텐츠 패널

** 와 ** 요소로 JS 없이 아코디언 구현 가능
- 콘텐츠를 클릭으로 열고 닫을 수 있으며, open 속성으로 기본 상태 지정
- 동일한 name 속성을 사용하면 하나의 패널만 열림
CSS로 스타일링하거나 JS로 열림/닫힘을 제어할 수도 있음
관련 자료: MDN details 문서, CodePen 예시, 브라우저 호환성 표

자동완성 제안 입력창

** 과 ** 조합으로 자동 필터링 드롭다운 구현
- 입력 시 제안 목록이 자동으로 필터링됨
- 텍스트 외에도 number, time 등 다양한 입력 타입 지원
Firefox는 현재 텍스트 기반 입력만 지원하며, 모바일 접근성 제약 존재
관련 자료: MDN datalist 문서, SitePoint 튜토리얼, 브라우저 호환성 표

모달 / 팝오버

popover 및 popovertarget 속성으로 JS 없는 모달·팝오버 구현
- auto, hint, manual 세 가지 모드 제공
- auto는 외부 클릭이나 ESC로 닫힘, manual은 수동으로만 닫힘
Firefox 및 iOS는 hint 모드 미지원
관련 자료: MDN popover 문서, Chrome 블로그, CodePen 예시, 접근성 관련 영상

오프스크린 내비게이션 / 콘텐츠

popover 기능을 활용해 오프스크린 내비게이션 메뉴 구현 가능
- nav 요소를 사용해 의미 부여, CSS translate로 화면 안팎 이동
- 외부 클릭 시 닫히며, popover="manual"로 수동 닫기 설정 가능
- ::backdrop 가상 요소로 배경 반투명 처리 가능
관련 자료: MDN Popover API, Chrome 블로그, CodePen 예시

결론

JS의 강력함을 인정하되, 필요한 곳에만 사용해야 함
최근 HTML/CSS의 발전으로 JS 없는 대안이 다수 등장
더 많은 예시는 작성자의 블로그 글 “Replace JS with No-JS or Lo-JS Options”에서 확인 가능
JS 최소화와 성능 최적화를 통한 사용자 경험 개선 강조

Read Entire Article