웹사이트 개발 Ep.5 – 리팩토링과 탭 UI 완성기

1. 공통 레이아웃·스타일 통일

• 헤더 통일: index.html, about.html, rooms.html 모두에서 클릭 가능한 로고(백일헌 종택)와 네비게이션 메뉴(홈·소개·객실 안내·예약하기) 배치를 통일했습니다. <a> 태그의 구조 오류(닫는 </a> 빠짐)를 바로잡아 모든 페이지 헤더가 정상 렌더링되도록 수정했습니다.
• CSS 정리: style.css 에 중복된 스타일을 통합하고, .header .container, .logo-img, nav ul li a 등 핵심 요소만 남겼습니다. 공통 폰트·컬러·그리드 설정으로 페이지 전반의 톤앤매너를 일치시켰습니다.

2. 메인 비주얼 슬라이더 개선

• 무한 루프 슬라이더: 3장의 비주얼 이미지를 순환 클론 구조로 배치하고, background-size: cover → contain 전환 옵션을 통해 이미지가 잘리는 문제를 해결했습니다.
• UI 컨트롤: 좌우 화살표(<, >) 클릭 시 slider-wrapper가 화면 너비만큼 스크롤되도록 scrollBy 로직을 추가해, 한 번에 한 장씩 자연스럽게 이동하도록 완성했습니다.

3. 페이지 내 앵커 스크롤

• 부드러운 이동: 네비게이션 메뉴 클릭 시 페이지 내 #about, #rooms, #reservation 섹션으로 scroll-behavior: smooth;가 작동하도록 html { scroll-behavior: smooth; scroll-padding-top: 6rem; } 를 적용해, 고정 헤더에 가려지지 않게 했습니다.

4. 고택 소개·객실 안내 탭 UI

• about.html: “1. 고택 이야기 / 2. 체험 프로그램 / 3. 사색의 길 산책 코스 / 4. 갤러리” 목록 클릭 시 오른쪽 콘텐츠가 전환되는 탭 인터페이스를 구현했습니다.
  • .about-sidebar li[data-tab] 클릭으로 .tab-content를 토글하며, active 클래스로 선택된 콘텐츠만 노출합니다.
• rooms.html: 동일한 방식으로 “1. 건너방 / 2. 윗사랑방 / 3. 아랫사랑방” 탭을 추가해, 카드형 그리드 대신 콘텐츠 전환형 레이아웃을 완성했습니다.

5. 인터랙션·애니메이션

• IntersectionObserver: reservation.js에 포함된 Fade-in 애니메이션 로직으로, 페이지 스크롤 시 각 <section>에 .visible 클래스를 붙여 자연스러운 진입 효과를 부여했습니다.
• CSS 트랜지션: 탭 사이드바·카드 호버·화살표 버튼 모두에 transition을 설정해, 사용자 동작 시 깔끔한 피드백을 제공합니다.