K-BOOKS · PRACTICAL BRIDGE · R36

같은 홈페이지, 다른 3가지 구현

E01에서 배운 내용의 대부분은 E02·E03에도 그대로 사용합니다. 바뀌는 것은 메뉴 배치와 슬라이드 이동 방식입니다.

1. 먼저 부모 영역을 구분합니다

E01 · 페이드

가로형 기본

상단 메뉴슬라이드 겹침

3장의 이미지가 같은 위치에 겹쳐 있고, 불투명도(opacity)를 바꿔서 전환합니다.

.slide { opacity: 0; }
.slide.is-active { opacity: 1; }
E02 · 좌우 이동

세로형 사이드바

메뉴
200px본문 1000px
슬라이드 →

바깥 부모는 Grid로 200px + 나머지, 슬라이드 부모는 flex-direction:row로 나열합니다.

.site-shell { display:grid;
 grid-template-columns:200px minmax(0,1fr); }
.slide-track { display:flex; flex-direction:row; }
E03 · 상하 이동

가로형 전폭 배치

상단 메뉴 100px슬라이드 ↓

이미지를 위에서 아래로 쌓고, 1장의 실제 높이만큼 이동합니다.

.slide-track { display:flex;
 flex-direction:column; }
.slide { flex:0 0 300px; }

2. JavaScript는 어디가 달라질까?

과제움직이는 CSS 속성화면 결과
E01 페이드opacity 0 → 1이미지가 같은 자리에 겹쳐 바뀜
E02 좌우transform: translateX(-100%)두 번째 이미지가 왼쪽으로 밀려 옴
E03 상하transform: translateY(-300px)두 번째 이미지가 아래에서 올라옴
초보자 실수 3가지
  1. E02: 200px 사이드바를 만든 뒤 모바일에서도 200px을 유지해 카드가 너무 좁아짐 → 760px 이하에서는 부모 Grid를 1열로 변경.
  2. E03: CSS는 세로(column)인데 JavaScript에 translateX를 사용 → translateY로 수정.
  3. 공통: .slide 하나만 움직임 → 슬라이드 3개의 부모 .slide-track을 움직여야 정상적으로 전환.

3. 검사 우선순위

코드 작성 전: 문제지 구조 확인 → HTML 영역 생성 → CSS로 PC 레이아웃 확보 → JS 동작 연결 → Chrome에서 실제 클릭 → 오프라인 제출 검사.

K-BOOKS 자체 제작 E01~E03 교육용 비교표. 시험 당일 공식 문제지의 지시가 우선합니다.