K-BOOKS · WEB DESIGN DEVELOPMENT PRACTICAL

E01 여울 문화공간
180분 실전 제작 교재

기초 66강 → R34 8단계 → R35 빈 파일 독립 제작

작업시간
180분

자체 제작 문제
E01

실제 시험 조건
오프라인·10MB

이 교재는 K-BOOKS 자체 제작 연습 자료이며 공식 공개문제나 실제 채점표가 아닙니다. 처음에는 강의와 함께 연습하고, 두 번째에는 이 교재를 보지 않고 빈 폴더에서 3시간 안에 작성해 보세요. 실제 시험장에서는 참고 자료 반입이 제한됩니다.

6구간 시간 계획

00~10분 파일·문제 분석
10~45분 HTML
45~100분 CSS
100~145분 JS
145~165분 실행 검사
165~180분 제출 폴더 확정

공식 안내: https://www.q-net.or.kr/cst006.do?artlSeq=5199079&brdId=Q006&code=1204&gSite=Q&id=cst00602

R42 E01 기준 정리: PC 1200px에서 헤더 100 + 슬라이드 300 + 콘텐츠 200 + 푸터 100 = 총 700px을 기준으로 확인합니다. 갤러리 이미지 3장은 콘텐츠의 탭 안에 두며, 별도 하단 갤러리 섹션은 추가하지 않습니다. 첫걸음 18단계의 완성 예제와 E01 독립 모의시험 참고본은 서로 다른 교육용 결과물입니다.

T01 · 00–10분 · 10분

문제지 분석 · 파일 점검

빈 폴더와 문제지를 먼저 확인하고 작업 범위를 파악한다.

지금 수정할 파일

문제지 · 프로젝트 폴더

작업 순서

E01 문제지에서 너비 1200px, 헤더 100px, 슬라이드 300px, 콘텐츠 약 200px, 푸터 100px를 표시합니다.
E01 제공파일을 풀고 index.html / css/style.css / js/script.js / images/ / source/content.txt가 있는지 확인합니다.
VS Code에서 압축을 푼 프로젝트 폴더를 열고 index.html을 시작합니다. ZIP 안에서 바로 편집하지 않습니다.
Chrome에서 로컬 index.html을 열어 빈 화면이 정상 출발임을 확인합니다.

이번 구간의 핵심 코드

KBOOKS_E01_MOCK/
├─ index.html
├─ css/style.css
├─ js/script.js
├─ images/slide1.jpg ...
└─ source/content.txt

왜 이렇게 하나요?

상대경로 `images/slide1.jpg`는 **index.html 위치를 기준**으로 찾습니다. `../images/`는 다른 폴더를 가리킵니다.

예상 오류와 복구

이미지가 보이지 않음 — images가 index.html과 같은 레벨인지 확인합니다. images 폴더가 이중으로 중첩되었거나 ZIP 안에서 HTML을 열었는지 먼저 확인하세요.

직접 확인 체크

☐ 문제지의 필수 영역 4개를 설명할 수 있다.
☐ 이미지 7개와 원문 텍스트를 확인했다.
☐ 프로젝트 폴더를 VS Code로 열었다.

막힌 지점 / 실제 수정한 코드 위치: __________________________________________________

T02 · 10–45분 · 35분

HTML 뼈대 · 메뉴 · 콘텐츠

HTML 한 파일에 헤더·슬라이드·콘텐츠·푸터의 의미 구조를 만든다.

지금 수정할 파일

index.html

작업 순서

`<!doctype html>`, `<html lang="ko">`, UTF-8, viewport, title을 작성하고 CSS·JS를 한 번만 불러옵니다.
header 안에 로고와 주 메뉴 4개 / 각각의 하위 메뉴를 ul/li로 만듭니다. 링크의 이동 대상 id를 실제로 둡니다.
main에 슬라이드 이미지 3장, 공지 3건, 갤러리 3건, 배너와 바로가기를 순서대로 넣습니다.
footer와 공지 팝업 레이어를 작성합니다. 이미지마다 alt를 달고 탭 버튼에 type="button"을 지정합니다.
Chrome에서 CSS 없이도 전체 이미지·메뉴 글씨가 보이는지 확인한 뒤 저장합니다.

이번 구간의 핵심 코드

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>여울 문화공간</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script.js" defer></script>
</head>
<body>
  <header class="site-header">
    <nav aria-label="주 메뉴">
      <ul>
        <li><a href="#about">공간 소개</a></li>
        <li><a href="#program">프로그램</a></li>
        <li><a href="#gallery">전시·공연</a></li>
        <li><a href="#contact">이용 안내</a></li>
      </ul>
    </nav>
  </header>
  <main id="main">
    <section id="about"><h1>여울 문화공간</h1></section>
    <section id="program">
      <h2>공지사항 · 갤러리 · 배너 · 바로가기</h2>
      <div id="gallery">공지/갤러리 탭 영역</div>
    </section>
  </main>
  <footer id="contact">여울 문화공간</footer>
</body>
</html>

왜 이렇게 하나요?

`defer`는 HTML 분석이 끝난 다음 JavaScript를 실행하게 해, 스크립트가 아직 없는 버튼을 찾는 실수를 줄입니다. `nav`는 메뉴의 부모이고 `li`는 각 메뉴의 자식입니다.

예상 오류와 복구

메뉴 클릭은 되는데 원하는 위치로 이동하지 않음 — `href="#gallery"`라면 문서에 `id="gallery"`가 반드시 하나 있어야 합니다. 대소문자와 철자를 비교하세요.

직접 확인 체크

☐ HTML에서 header/main/footer를 찾을 수 있다.
☐ 주 메뉴 4개와 공지·갤러리 3개씩이 들어갔다.
☐ 이미지의 src와 id 링크가 실제 파일/위치에 연결된다.

막힌 지점 / 실제 수정한 코드 위치: __________________________________________________

T03 · 45–100분 · 55분

CSS 크기 · Grid · 이미지 배치

1200px 기준 레이아웃과 페이드 슬라이드의 기본 CSS를 완성한다.

지금 수정할 파일

css/style.css

작업 순서

`*{box-sizing:border-box}`와 `body{margin:0}`로 브라우저 기본 여백을 제거하고 `.site-shell`에 `max-width:1200px`을 적용합니다.
헤더의 높이 100px, 로고·메뉴 가로 배치, 하위 메뉴의 absolute와 hover/focus-within 상태를 만듭니다.
슬라이드 영역 300px, `position:absolute`, `opacity`와 `.is-active` 조합으로 페이드 화면을 만듭니다.
공지(갤러리 탭 포함)·배너·바로가기를 **높이 200px의 콘텐츠 Grid 한 곳**에 3열로 배치합니다. 갤러리를 별도 아래 섹션으로 만들지 않습니다. 자식 카드에는 `min-width:0`을 넣습니다.
Chrome 1200px에서 카드 텍스트가 찌그러지지 않는지 확인하고, 모바일은 선택 추가 연습으로 처리합니다.

이번 구간의 핵심 코드

.site-shell { max-width:1200px; margin:0 auto; }
.header-inner { display:flex; min-height:100px; align-items:center; }
.hero { height:300px; position:relative; overflow:hidden; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .65s; }
.slide.is-active { opacity:1; }
.panel-grid { display:grid; height:200px; grid-template-columns:1.35fr 1fr 1fr; gap:14px; }
.panel { min-width:0; }

왜 이렇게 하나요?

`position:relative`가 슬라이드의 부모 좌표 기준을 만들고, 자식 `.slide`를 `absolute`로 겹칩니다. `opacity` 변경이 페이드 효과이고 `display:none`만 바꾸면 페이드가 보이지 않습니다.

예상 오류와 복구

카드가 한 글자씩 세로로 찌그러짐 — 부모 `.panel-grid`에 적용된 grid-template-columns를 찾고 각 자식의 `min-width:0`, gap을 확인하세요. 부모 전체의 열 너비가 너무 작으면 모바일에서 1열 또는 2열로 낮춥니다.

직접 확인 체크

☐ PC에서 사이트 너비가 최대 1200px이다.
☐ 헤더·슬라이드·콘텐츠·푸터가 겹치지 않는다.
☐ 슬라이드 1장만 나타나고 카드 텍스트가 잘리지 않는다.

막힌 지점 / 실제 수정한 코드 위치: __________________________________________________

T04 · 100–145분 · 45분

메뉴 · 슬라이드 · 탭 · 팝업

클릭과 시간 경과에 따라 실제 화면이 변하도록 기능을 연결한다.

지금 수정할 파일

js/script.js

작업 순서

PC 하위 메뉴는 CSS `:hover`와 `:focus-within`으로 먼저 작동하도록 합니다. 모바일 메뉴는 버튼 클릭에 따라 `.is-open`을 토글합니다.
슬라이드 3장에 첫 `.is-active`를 둔 뒤 약 2.8초마다 다음 요소에 활성 클래스를 옮겨 페이드가 작동하게 합니다.
공지·갤러리 탭을 클릭하면 `hidden`과 `aria-selected`가 서로 반대로 바뀌는지 확인합니다.
공지 제목을 누르면 팝업을 열고, 닫기/확인/Esc로 닫히게 합니다. 닫으면 이전 버튼으로 포커스가 돌아오는지도 확인합니다.
Chrome F12 콘솔 오류 0건을 확인한 후, 슬라이드·탭·팝업을 실제 손으로 각각 최소 2회 조작합니다.

이번 구간의 핵심 코드

const slides = [...document.querySelectorAll('.slide')];
let current = 0;
function showSlide() {
  slides.forEach((el, i) => {
    el.classList.toggle('is-active', i === current);
  });
}
if (slides.length > 1) {
  setInterval(() => {
    current = (current + 1) % slides.length;
    showSlide();
  }, 2800);
}
// 실제 답안에서는 일시정지, 탭·팝업 동작도 추가하세요.

왜 이렇게 하나요?

`querySelectorAll`은 같은 class의 여러 요소를 찾고, `setInterval`은 지정 시간마다 함수를 반복합니다. `classList.toggle`로 화면에 보일 슬라이드를 바꿉니다.

예상 오류와 복구

버튼을 눌러도 아무것도 바뀌지 않음 — HTML이 `js/script.js`를 정확하게 불러오는지, 선택자 `.slide`·`#tabNotice`와 실제 id/class가 같은지 비교하세요. 콘솔에 첫 오류가 있다면 그 줄부터 고칩니다.

직접 확인 체크

☐ 슬라이드 3장이 반복되고 이미지가 즉시 끊기지 않는다.
☐ 공지/갤러리 탭이 전환된다.
☐ 공지 팝업을 열고 닫을 수 있다.
☐ 메뉴를 키보드 Tab으로도 이용할 수 있다.

막힌 지점 / 실제 수정한 코드 위치: __________________________________________________

T05 · 145–165분 · 20분

브라우저 실동작 · 파일 검사

겉보기 완성보다 파일 누락·스크립트 오류·클릭 실패부터 제거한다.

지금 수정할 파일

Chrome · 제출 검사기

작업 순서

VS Code에서 저장한 뒤 파일 탐색기에서 index.html을 Chrome으로 직접 엽니다. 서버나 K-BOOKS 미리보기에 의존하지 않습니다.
F12 → Console 오류, 이미지 깨짐, 상대경로 오류를 먼저 점검합니다. 제공된 이미지 파일명과 대소문자를 비교합니다.
메뉴 hover·Tab, 페이드 3장, 탭·팝업 열기와 닫기, 내부 메뉴 이동을 직접 확인합니다.
R35 제출 검사기에서 작업 폴더 또는 학습용 ZIP을 선택해 파일·참조 경로·용량을 검사합니다.
320px 모바일은 추가 연습입니다. PC 필수 레이아웃을 먼저 완성하고 시간이 남으면 반응형도 확인합니다.

이번 구간의 핵심 코드

index.html
css/style.css
js/script.js
images/slide1.jpg, slide2.jpg, slide3.jpg
images/gallery1.jpg, gallery2.jpg, gallery3.jpg
images/logo.svg

Chrome 개발자 도구 → Console → 오류 0건 확인

왜 이렇게 하나요?

`404` 또는 `ERR_FILE_NOT_FOUND`는 파일을 못 찾는다는 뜻입니다. CSS·JS 문법이 맞아도 **경로가 틀리면** 브라우저가 파일을 불러오지 못합니다.

예상 오류와 복구

온라인 미리보기에서만 되고 직접 열면 이미지가 깨짐 — 온라인 편집기가 제공한 가상 경로와 실제 디스크 경로가 다를 수 있습니다. 로컬 `index.html` 기준의 `images/`, `css/`, `js/` 경로를 사용하세요.

직접 확인 체크

☐ 인터넷이 없어도 Chrome에서 페이지가 보인다.
☐ F12 콘솔 오류가 없다.
☐ 메뉴·슬라이드·탭·팝업을 직접 조작해 봤다.
☐ 제출 검사기에서 필수 파일·경로 오류가 없다.

막힌 지점 / 실제 수정한 코드 위치: __________________________________________________

T06 · 165–180분 · 15분

제출 폴더 확정 · 3시간 종료

마지막 15분에는 디자인 추가를 멈추고 파일을 정리해 제출 준비를 마친다.

지금 수정할 파일

프로젝트 최종 폴더

작업 순서

`index.html`, `css/`, `js/`, `images/`가 한 프로젝트 아래 있는지 확인하고 이름을 바꾸지 않습니다.
제출 대상 데이터 총합 10MB 이내인지 확인합니다. 불필요한 PSD 원본·중복 ZIP·스크린샷을 제출 폴더에 넣지 않습니다.
작업 폴더를 옮겨도 로컬 index.html이 정상 작동하는지 마지막 한 번 열어 봅니다.
문제지 8개 요구사항을 직접 체크하고 시험장에서는 감독위원이 지정한 저장 위치·제출 방식에 따릅니다.
R35에서 연습 기록을 내보낸 후, 다음에는 힌트 없이 기존 E01 모의시험을 다시 시작합니다.

이번 구간의 핵심 코드

KBOOKS_E01_MOCK/
├─ index.html
├─ css/
│  └─ style.css
├─ js/
│  └─ script.js
└─ images/
   ├─ logo.svg
   ├─ slide1.jpg ... slide3.jpg
   └─ gallery1.jpg ... gallery3.jpg

※ 실제 시험에서는 현장 문제지의 제출 지시를 따릅니다.

왜 이렇게 하나요?

최종 제출에서는 코드만큼 **실행 가능한 상대경로와 빠진 파일이 없는 상태**가 중요합니다. 폴더 이름과 위치를 통째로 보존하세요.

예상 오류와 복구

완성 후 다른 폴더로 복사하니 스타일이 사라짐 — index.html만 복사하지 말고 css, js, images 폴더도 같이 복사해야 합니다. 상위 폴더 구조를 유지하세요.

직접 확인 체크

☐ 제출 폴더 내 필수 파일이 한 번씩만 존재한다.
☐ 총 데이터 10MB 이내다.
☐ 오프라인에서 최종 페이지를 열었다.
☐ 힌트 없이 E01 모의시험을 다시 진행할 준비가 됐다.

막힌 지점 / 실제 수정한 코드 위치: __________________________________________________

마지막 15분: 제출 점검

☐ index.html은 프로젝트 최상위에 있다.
☐ css/style.css, js/script.js가 실제로 연결된다.
☐ 제공된 이미지 7개 경로가 맞는다.
☐ 인터넷을 끊고 Chrome으로 직접 열어보았다.
☐ 메뉴·페이드 슬라이드·탭·팝업을 직접 조작했다.
☐ 총 제출 데이터가 10MB 이내다.
☐ 시험장 문제지에서 지정한 제출 위치를 확인했다.

실기 채점과 합격 여부는 Q-Net 기준이며 이 자체 점검표가 대체하지 않습니다.

E01 여울 문화공간180분 실전 제작 교재

6구간 시간 계획

문제지 분석 · 파일 점검

지금 수정할 파일

작업 순서

이번 구간의 핵심 코드

왜 이렇게 하나요?

예상 오류와 복구

직접 확인 체크

HTML 뼈대 · 메뉴 · 콘텐츠

지금 수정할 파일

작업 순서

이번 구간의 핵심 코드

왜 이렇게 하나요?

예상 오류와 복구

직접 확인 체크

CSS 크기 · Grid · 이미지 배치

지금 수정할 파일

작업 순서

이번 구간의 핵심 코드

왜 이렇게 하나요?

예상 오류와 복구

직접 확인 체크

메뉴 · 슬라이드 · 탭 · 팝업

지금 수정할 파일

작업 순서

이번 구간의 핵심 코드

왜 이렇게 하나요?

예상 오류와 복구

직접 확인 체크

브라우저 실동작 · 파일 검사

지금 수정할 파일

작업 순서

이번 구간의 핵심 코드

왜 이렇게 하나요?

예상 오류와 복구

직접 확인 체크

제출 폴더 확정 · 3시간 종료

지금 수정할 파일

작업 순서

이번 구간의 핵심 코드

왜 이렇게 하나요?

예상 오류와 복구

직접 확인 체크

마지막 15분: 제출 점검

E01 여울 문화공간
180분 실전 제작 교재