36일차

이예진·2025년 7월 15일

40강 탭메뉴 구현

문제. 헤더 작업

목표 기능
스크롤이 일정 이상 내려가면 헤더에 배경색이 생기도록 구현

문제점 설명

항목	설명
현재 동작	헤더는 항상 투명 배경
문제 상황	스크롤을 내려도 헤더에 시각적인 변화 없음
UX 기대	스크롤 시 헤더에 배경색이 생겨야 함
개선 필요 포인트	`scroll` 이벤트 감지를 통한 동적 스타일 처리

정답 코드 요약
$(window).scroll(function () { if ($(window).scrollTop() > 0) { $('header').addClass('active');
} else { $('header').removeClass('active'); } });

코드 해석

코드	설명
`$(window).scroll()`	스크롤 이벤트 발생 시 실행
`$(window).scrollTop()`	현재 스크롤 위치를 px로 반환
`> 0`	스크롤이 1px 이상이면 실행됨
`$('header').addClass('active')`	헤더에 클래스 부여 (배경색 추가용)
`.removeClass('active')`	스크롤이 맨 위면 배경 제거

핵심 정리표

동작	조건	처리
배경색 추가	`scrollTop() > 0`	`.addClass('active')`
배경색 제거	`scrollTop() <= 0`	`.removeClass('active')`
대상	`header` 요소	jQuery로 class 제어

CSS 참고 (예시)
header { background-color: transparent; transition: background-color 0.3s; }
header.active { background-color: rgba(0, 0, 0, 0.8); /* 예시 색상 */
}

한 줄 요약
스크롤 시 scrollTop() 값을 이용해 header에 클래스를 붙였다 뗐다 하여 동적 배경색을 구현함.

41강 탭메뉴 구현

문제. 바디 작업

문제
정답
선생님 풀이영상

목표 기능
탭 버튼을 클릭하면 해당 탭에 맞는 콘텐츠만 보이도록 구현

문제점 설명

항목	설명
현재 동작	탭 버튼을 클릭해도 내용이 바뀌지 않음
문제 상황	버튼 클릭 이벤트 처리 및 내용 전환 기능 미구현
사용자 기대	탭을 누르면 해당 콘텐츠만 보여야 함
UX 문제	인터랙션 없이 모든 콘텐츠가 항상 보이거나 고정됨

정답 코드 요약
$('.btns > .btn').click(function () { let index = $(this).index();
$('.btns > .btn').removeClass('active'); $(this).addClass('active');
$('.contents > .content').removeClass('active');
$('.contents > .content').eq(index).addClass('active'); });

코드 해석

코드	설명
`$('.btn').click(...)`	각 탭 버튼에 클릭 이벤트 등록
`$(this).index()`	클릭한 버튼의 순서를 가져옴 (0부터 시작)
`.removeClass('active')`	기존 탭/내용의 활성화 상태 제거
`.addClass('active')`	클릭한 탭과 해당 내용에 활성화 상태 부여
`.eq(index)`	해당 순서의 콘텐츠만 선택하여 보여줌

핵심 정리표

동작	처리 대상	동작 방식
탭 클릭 이벤트	`.btns > .btn`	`click()` 사용
탭 스타일 변경	`.addClass('active')`	현재 버튼에만 적용
콘텐츠 표시 전환	`.contents > .content`	`eq(index)` 사용해 해당 콘텐츠만 표시
불필요한 콘텐츠 숨김	`.removeClass('active')`	다른 콘텐츠 숨김 처리

CSS 참고 (예시)

.contents > .content { display: none; }
.contents > .content.active { display: block; }
.btn.active { background-color: #333; color: white; }

한 줄 요약
탭 버튼 클릭 시 index()로 순서를 구하고, 버튼/내용에 .active 클래스를 붙여서 탭 전환 구현함.

42강 반응형 모바일메뉴1 구현

문제. 작업 1, 탑바와 모바일 탑바가 스위치

문제
정답1
정답2
선생님 풀이영상

목표 기능
브라우저 너비에 따라 일반 탑바 또는 모바일 탑바가 보이도록 함

문제점 설명

항목	설명
현재 동작	탑바와 모바일 탑바가 항상 함께 보임
문제 상황	반응형 전환이 없어서 동시에 존재함
사용자 기대	PC 화면에서는 탑바, 모바일 화면에서는 모바일 탑바만 보여야 함
UX 문제	중복 UI로 혼란, 모바일 뷰에서 공간 낭비

정답 코드 요약
css
/* 기본 상태: PC용 탑바만 보이게 */
.mobile-top-bar { display: none; }
/* 화면 너비 600px 이하일 때: 모바일 탑바만 보이게 */
@media (max-width: 600px) { .top-bar { display: none; }
.mobile-top-bar { display: block; } }

코드 해석

코드	설명
`.mobile-top-bar { display: none; }`	기본 상태에서는 모바일 탑바 숨김
`@media (max-width: 600px)`	화면이 600px 이하일 때만 조건 적용
`.top-bar { display: none; }`	PC용 탑바 숨김 처리
`.mobile-top-bar { display: block; }`	모바일 탑바 노출

핵심 정리표

화면 크기	보여지는 요소	숨겨지는 요소
600px 이상 (PC)	`.top-bar`	`.mobile-top-bar`
600px 이하 (모바일)	`.mobile-top-bar`	`.top-bar`

HTML 기본 구조 예시
<div class="top-bar">

</div>
<div class="mobile-top-bar">

</div>

한 줄 요약 미디어 쿼리(@media)를 사용해 PC/Mobile 레이아웃을 분리하고, 메뉴를 조건부로 노출함.

43강 반응형 모바일메뉴1 구현

문제. 작업 2, 탑바와, 모바일 탑바 구현

문제
정답1
정답2
정답2(CSS)
선생님 풀이영상

목표 기능

PC용 탑바(top-bar)와 모바일용 탑바(mobile-top-bar) 구조 구현

각 메뉴에 실제 링크 및 메뉴명 포함

뷰포트 크기에 따라 하나만 노출되도록 설정

문제점 설명

항목	설명
현재 동작	기본적인 구조만 있음, 내용 없음
문제 상황	메뉴 항목이 없고 레이아웃만 구성됨
사용자 기대	PC/모바일 각각 다른 스타일로 메뉴가 보이길 기대
UX 문제	시각적 구분이 부족하고 메뉴 활용 불가

정답 코드 요약
HTML

<div class="top-bar">
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>

<div class="mobile-top-bar">
<div class="btn-toggle-mobile-menu">≡</div>
<div class="mobile-menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
CSS 미디어쿼리
/* 기본 상태: PC 탑바만 보임 */
.mobile-top-bar { display: none; }
/* 모바일 화면 */
@media (max-width: 600px) { .top-bar { display: none; } .mobile-top-bar { display: block; } }

코드 해석

구성 요소	설명
`.top-bar`	PC 메뉴 영역 (좌우 정렬 등 적용 예정)
`.mobile-top-bar`	모바일 메뉴 버튼과 메뉴 리스트 포함
`.btn-toggle-mobile-menu`	햄버거 메뉴 버튼 (≡)
`.mobile-menu`	클릭 시 토글될 메뉴 영역
미디어쿼리	PC/모바일 각각 전용 UI 출력