저의 블로그 내비게이션은 input 태그를 이용해 토글 기능을 구현했습니다.
<input id="toggle-nav" type="checkbox" hidden />
<div id="nav">
<label for="toggle-nav">토글</label>
메뉴...
</div>label의 for 속성을 사용하여 보이지 않는 input을 토글할 수 있었지만, 이 방법은 유지보수성이 떨어지고, 현대적인 접근 방법이 아니었습니다. 이번에 이 코드를 최신 문법에 맞춰 개선했습니다. 코드의 목적은 no-js 환경에서도 동작을 보장하는 것입니다.
이번 코드 교체도 현대적인 문법으로 변경함과 동시에 no-js 환경에서도 동작을 보장하는 기능이기 때문에 진행했습니다.
코드 교체
코드를 변경하는 작업은 상당히 간단했습니다.
label태그 대신 실제로 버튼 역할을 하는button태그 사용- 팝오버 대상에 새로운 속성 부여
- 사용자 정의 스타일 적용
- <input id="toggle-nav" type="checkbox" hidden>
+ <button popovertarget="nav" popoveraction="toggle">토글</button>
- <div id="nav">
+ <div id="nav" popover>
- <label for="toggle-nav">토글</label>
+ <button popovertarget="nav" popoveraction="toggle">토글</button>
메뉴...
</div>
+ <style>
+ #nav {
+ /* reset */
+ display: block;
+ padding: unset;
+ }
+ </style>label의 for 속성을 사용하여 보이지 않는 input을 토글할 수 있었지만, 이 방법은 유지보수성이 떨어지고, 현대적인 접근 방식이 아니었습니다. 또한, 코드의 목적은 no-js 환경에서도 동작을 보장하는 것이었습니다. 이번에 이 코드를 최신 문법에 맞춰 개선하면서도 no-js 환경에서도 동작을 보장할 수 있도록 변경했습니다.
팝오버 API의 추가 기능
팝오버 API는 외부 라이브러리 없이 HTML만으로 구현할 수 있어, 코드 의존성을 줄이고, 코드 길이를 최소화할 수 있는 기능을 제공합니다. 이는 코드 유지보수성 측면에서 큰 이점을 제공하며, 깔끔하고 관리하기 쉬운 코드를 작성할 수 있게 해줍니다.
-
배경 흐림 처리: 팝오버가 활성화되면 배경을 흐리게 만들어, 사용자 인터페이스에서 팝오버 내용에만 집중하도록 할 수 있습니다. 이 기능은 순수 HTML로 쉽게 구현할 수 있어, 추가적인 스크립트 없이도 시각적 효과를 간단히 추가할 수 있습니다.
-
자동 닫힘 기능: 사용자가 팝오버 외부를 클릭하거나 ESC 키를 누르면 팝오버가 자동으로 닫히도록 설정할 수 있습니다. 이 역시 HTML 속성만으로 구현 가능하여, 불필요한 자바스크립트 코드 작성 없이 기능을 완성할 수 있습니다.
-
애니메이션 효과: 팝오버의 등장과 퇴장을 자연스럽게 만들어주는 애니메이션 효과도 HTML로 간단히 적용할 수 있어, 코드의 복잡도를 줄이며 유지보수를 용이하게 만듭니다.
그러나 이 API는 최신 브라우저에서만 지원되기 때문에, 호환성이 중요한 프로젝트에서는 사용에 주의가 필요합니다. 모든 사용자가 최신 브라우저를 사용하지 않을 수 있으므로, 개발 환경에 따라 적용 여부를 신중히 판단해야 합니다.
팝오버 API를 사용하면 코드가 더욱 간결해지고, 외부 라이브러리 의존성을 줄일 수 있어, 코드의 가독성 및 유지보수성 면에서 개발자에게 큰 도움이 됩니다. 하지만 브라우저 호환성을 고려해야 하므로, 프로젝트의 요구 사항에 맞춰 적절히 활용하는 것이 중요합니다.