초보자용 응답형 네비게이션 바 만들기: Flexbox와 Media Queries 활용

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *초보 웹 개발자** (기초 HTML/CSS 개념 이해가 필요)

핵심 요약

• display: flex와 flex-direction을 사용해 레이아웃 유연성 확보
• @media (max-width: 768px)를 통해 모바일 응답형 디자인 구현
• position: absolute로 드롭다운 메뉴 오버레이 효과 적용

섹션별 세부 요약

1. 프로젝트 개요

• HTML/CSS만 사용해 반응형 네비게이션 바 구축
• 데스크탑: 수평 메뉴, 모바일: 햄버거 메뉴(☰)로 전환
• position: relative로 네비게이션 바 기준점 설정

2. 핵심 개념 설명

• Media Queries

- @media (max-width: 768px)로 모바일 스크린에 특정 스타일 적용

- .nav-links의 flex-direction: column로 수직 정렬

• Flexbox 활용

- .navbar에 display: flex로 수평 레이아웃 생성

- justify-content: space-between으로 공간 분배

• Positioning 기술

- position: absolute로 드롭다운 메뉴 오버레이

- top: 60px으로 네비게이션 바 아래 정렬

3. 반응형 디자인 구현

• display: none과 display: flex로 모바일에서 메뉴 보이기/숨기기
• .menu-icon을 display: block으로 모바일에서 햄버거 아이콘 표시
• .nav-links.active로 JavaScript와 연동 가능

결론

• flex-direction과 media queries를 통해 모바일 대응형 네비게이션 바 구현
• position: absolute로 드롭다운 오버레이 효과 적용 시 주의: position 생략 시 레이아웃 이탈
• 테스트 환경: 다양한 화면 크기(768px 기준)에서 디자인 일관성 확인 필수