UI Code Lab

모달은 UI에서 자주 쓰이는 컴포넌트지만, 접근성까지 챙긴 구현은 생각보다 드뭅니다. 이 글에서는 기본적인 바닐라 자바스크립트 모달 구현법부터, 스크린리더와 키보드 사용자도 고려한 접근성 개선 포인트까지 다뤄봅니다. 실무에 바로 적용할 수 있는 예제 코드도 함께 제공하니, 복잡한 프레임워크 없이 순수 JS로도 충분히 멋진 접근성 모달을 만들어보세요! ✨ 기본 모달 구현간단한 자바스크립트로 버튼 클릭 시 모달을 띄우고 닫는 기본 구조입니다. ✅ HTML 구조 모달 열기 모달 제목 모달 내용입니다. 닫기 ✅ JS 기본 로직 const openBtn = document.getElementById('openModal');const closeBtn = document.getElementB..

웹 페이지를 만들다 보면 메뉴나 필터, 설정 창 등 드롭다운(dropdown) 기능이 꼭 필요할 때가 있습니다. 이번 글에서는 jQuery 없이도 구현 가능한 순수 자바스크립트(dropdown)를 활용해 사용자가 클릭하면 열리고, 다시 클릭하면 닫히는 기본 드롭다운 UI를 만드는 방법을 소개합니다. ✅ 드롭다운이란?드롭다운(dropdown)은 사용자의 클릭에 따라 선택지를 보여주는 UI 요소입니다. 대표적인 예로 내비게이션 메뉴, 언어 선택 창, 알림 목록 등에서 자주 활용됩니다. 🛠️ HTML 구조 먼저 dropdown을 구성할 기본 HTML을 작성합니다: 메뉴 열기 ▾ 홈 소개 문의 🎨 CSS 스타일기본적으로 드롭다운 메뉴는 숨기고, 버튼 클릭 시 보이도록 처리합니다....