📘 자바스크립트 학습 정리 (0613)
✅ 드롭다운 메뉴
- 클릭 시 메뉴 토글 (
classList.toggle('show')) - 외부 클릭 감지로 메뉴 닫기 (
contains,document.addEventListener) - CSS로
.dropdown-menu의 위치와 스타일 지정 - hover만으로 펼치는 드롭다운:
.dropdown-toggle:hover + .dropdown-menu
✅ 다단계 드롭다운
.submenu에mouseenter,.dropdown-menu에mouseleave이벤트 사용mouseenter/mouseleave는 버블링 X
✅ 탭 UI
- 탭 버튼 클릭 시
.active클래스를 버튼과 콘텐츠에 적용 data-tab속성과 콘텐츠 ID를 매핑해 구현- 수직 탭, 책갈피형 탭 모두 동일 로직
button.addEventListener('click', () => {
button.classList.add('active');
document.getElementById(button.dataset.tab).classList.add('active');
});✅ 단계별 폼 UI (스텝)
.step-indicator,.step-content를 현재 단계에 따라 활성화- 이전/다음 버튼으로
currentStep상태 변경 - 클릭으로 단계 점프 지원
✅ 모달 창
.modal-overlay를display: flex로 표시/숨김- ESC키, 배경 클릭으로 닫기 지원
- 중첩 모달 시
z-index조정,body스크롤 방지 처리
✅ 위치 및 스크롤 제어
getBoundingClientRect()로 요소 위치 확인window.scrollY값으로 스크롤 감지- 예시: 버튼으로 박스 이동, 스크롤 시 배경색 변경
✅ 드래그 앤 드롭 정렬
dragstart: 드래그 시작 시 요소 숨김dragover: 요소 위치에 따라placeholder배치drop:placeholder위치에 요소 삽입
if (distance < rect.height / 2) {
$target.before($placeholder);
} else {
$target.after($placeholder);
}✅ 총정리
- 다양한 UI 컴포넌트를 자바스크립트로 직접 구현
- DOM 제어와 이벤트 기반 동작에 익숙해졌으며,
- 드롭다운, 탭, 스텝, 모달, 드래그 정렬 등 실전 기능 구현 능력 향상
