K-BOOKS / PRACTICAL BRIDGE · R34 실기 입문 8단계 독학 교재 기초 18단계+실습 48강에서 시험형 홈페이지로 넘어가는 연결 수업. 공식 시험문제를 복제하지 않은 K-BOOKS 자체 제작입니다. 단계별 START 파일에서 출발하고 입력한 결과를 FINISH와 비교하세요.
공식 안내(2026): 작업형 3시간, 제출 10MB, 인터넷 차단. 연습 단계에서는 정답 참고 가능, 모의시험 단계에서는 빈 파일부터 독립 제작합니다.
Q-Net 2026 공개문제 안내
P01 / 08 · P01 · 문서 시작 문제지 읽기와 파일 3개 만들기
학습 목표 빈 index.html에서 HTML5 문서를 만들고 CSS·JS 파일을 연결한다.복습할 기초 B01 문서 구조 · I01 첫 HTML수정 파일 index.html검색할 위치 (새 파일 전체)
문서의 head는 설정, body는 화면에 나타날 내용을 담습니다. UTF-8은 한글을 올바르게 표시하기 위한 문자 인코딩입니다.
따라하기 폴더 안에 index.html, css/style.css, js/script.js를 만듭니다. index.html에 HTML5 기본 구조를 작성합니다. Chrome에서 index.html을 열어 한글 제목이 정상인지 확인합니다. 직접 입력할 코드 <!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>여울 문화공간 | K-BOOKS 실기 입문</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
</head>
<body>
<a class="skip-link" href="#main">본문 바로가기</a>
<div class="site-shell">
<header class="site-header">
<!-- STEP_P02_NAV -->
</header>
<main id="main">
<section id="about" aria-label="문화공간 소개">
<p class="stage-message">첫 실기 연습 페이지가 열렸습니다. 다음 단계에서 메뉴와 이미지를 추가합니다.</p>
<!-- STEP_P03_HERO -->
</section>
<section id="program" aria-label="프로그램 안내">
<!-- STEP_P04_CONTENT -->
</section>
<section id="gallery" aria-label="전시·공연">
<!-- STEP_P04_GALLERY -->
</section>
</main>
<footer class="site-footer" id="contact">
<!-- STEP_P04_FOOTER -->
</footer>
</div>
<!-- STEP_P04_POPUP -->
</body>
</html>
정상 출력 화면 비교 (PC / 모바일)
직접 점검 □ index.html 파일이 실제로 열리는가? □ Chrome 개발자도구에 파일을 찾지 못했다는 오류가 없는가? □ CSS와 JS의 상대경로를 소리 내어 설명할 수 있는가? 막혔을 때 한글이 깨지면 <meta charset="UTF-8">과 저장 인코딩을 확인하세요. css/style.css가 없으면 링크를 만들었어도 적용되지 않습니다.
P02 / 08 · P02 · 헤더 로고와 상단 메뉴 배치
학습 목표 로고와 주 메뉴 4개, 하위 메뉴 항목을 HTML로 구성한다.복습할 기초 B04 링크 · B07 부모·자식 · S01 메뉴 기초수정 파일 index.html검색할 위치 <!-- STEP_P02_NAV -->
header는 상단 영역, nav는 탐색 메뉴입니다. ul 아래 li가 있고 li 안에 a가 있습니다. href의 #about은 id="about" 위치를 가리킵니다.
따라하기 index.html에서 STEP_P02_NAV 주석을 찾습니다. 안내된 헤더 블록으로 주석 부분만 교체합니다. 메뉴 4개의 글자·로고 경로·하위 목록이 보이는지 확인합니다. 직접 입력할 코드 <div class="header-inner">
<a class="brand" href="#about" aria-label="여울 문화공간 첫 화면">
<img src="images/logo.svg" alt="여울 문화공간">
</a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="mainNav">전체 메뉴</button>
<nav class="main-nav" id="mainNav" aria-label="주 메뉴">
<ul>
<li><a href="#about">공간 소개</a><ul class="submenu"><li><a href="#about">인사말</a></li><li><a href="#contact">오시는 길</a></li></ul></li>
<li><a href="#program">프로그램</a><ul class="submenu"><li><a href="#program">교육 프로그램</a></li><li><a href="#program">신청 안내</a></li></ul></li>
<li><a href="#gallery">전시·공연</a><ul class="submenu"><li><a href="#gallery">전시 소식</a></li><li><a href="#gallery">공연 일정</a></li></ul></li>
<li><a href="#contact">이용 안내</a><ul class="submenu"><li><a href="#contact">찾아오시는 길</a></li><li><a href="#contact">문의</a></li></ul></li>
</ul>
</nav>
</div>
정상 출력 화면 비교 (PC / 모바일)
직접 점검 □ 로고 이미지가 출력되는가? □ 4개 주 메뉴를 Tab 키로 이동할 수 있는가? □ 링크 대상 id가 문서 안에 있는가? 막혔을 때 로고가 안 보이면 images/logo.svg와 파일명 대소문자를 확인합니다. 메뉴를 한 줄에 보이게 하는 CSS는 P05에서 작성합니다.
P03 / 08 · P03 · 비주얼 3장 슬라이드 이미지 넣기
학습 목표 이미지 3장과 설명 문구를 HTML 구조로 배치한다.복습할 기초 B05 이미지 경로 · I06 이미지 · S08 슬라이드 원리수정 파일 index.html검색할 위치 <!-- STEP_P03_HERO -->
article.slide 3개는 한 세트입니다. 아직 CSS를 넣지 않았으므로 이미지가 세로로 길게 보일 수 있습니다. 이미지를 겹쳐 한 장씩 보여 주는 단계는 P05입니다.
따라하기 STEP_P03_HERO 주석을 슬라이드 블록으로 교체합니다. images/slide1.jpg ~ slide3.jpg를 실제로 확인합니다. alt 텍스트가 이미지의 의미를 설명하는지 점검합니다. 직접 입력할 코드 <div class="hero" aria-label="이달의 문화 소식">
<div class="slides" id="heroSlides">
<article class="slide is-active" aria-hidden="false">
<img src="images/slide1.jpg" alt="여울 문화공간 첫 번째 전시 이미지">
<div class="slide-caption"><span>SPACE & ART</span><h1>예술이 머무는<br>우리 동네 문화공간</h1><p>전시와 교육, 공연을 한 자리에서 만나보세요.</p></div>
</article>
<article class="slide" aria-hidden="true">
<img src="images/slide2.jpg" alt="창작 프로그램 안내 이미지">
<div class="slide-caption"><span>LEARNING & CREATE</span><h2>함께 만들고 나누는 시간</h2><p>다양한 창작 워크숍이 열립니다.</p></div>
</article>
<article class="slide" aria-hidden="true">
<img src="images/slide3.jpg" alt="지역 공연 행사 이미지">
<div class="slide-caption"><span>COMMUNITY</span><h2>일상을 채우는 작은 공연</h2><p>지금 여울에서 만나는 새로운 이야기.</p></div>
</article>
</div>
<div class="hero-controls"><span id="slideStatus" aria-live="off">01 / 03</span><button id="slidePause" type="button" aria-pressed="false">일시정지</button></div>
</div>
정상 출력 화면 비교 (PC / 모바일)
직접 점검 □ 슬라이드 이미지 세 장이 모두 나타나는가? □ 파일명과 경로를 직접 설명할 수 있는가? □ 각 이미지에 alt가 들어 있는가? 막혔을 때 이미지가 깨지면 이미지 폴더가 index.html과 같은 위치에 있는지 확인하세요. 지금은 세로로 쌓여도 정상이고 P05에서 겹칩니다.
P04 / 08 · P04 · 콘텐츠 공지·갤러리·배너·푸터 만들기
학습 목표 공지 3건, 갤러리 3장, 배너·바로가기·푸터를 완성한다.복습할 기초 B08 Grid · I07 카드 · S13 탭과 팝업수정 파일 index.html검색할 위치 STEP_P04_ 네 군데
section은 기능별 영역이고, button은 동작을 실행하는 요소입니다. 공지/갤러리 버튼과 팝업은 아직 작동하지 않으며 P07에서 스크립트를 연결합니다.
따라하기 STEP_P04_CONTENT와 GALLERY 주석을 각각 해당 블록으로 교체합니다. STEP_P04_FOOTER와 POPUP 주석도 교체합니다. 제공된 content.txt와 화면 문구를 비교합니다. 직접 입력할 코드 [STEP_P04_CONTENT]
<div class="panel-grid">
<section class="panel news-panel" aria-labelledby="newsHeading">
<h2 id="newsHeading">여울 소식</h2>
<div class="tab-buttons" role="tablist" aria-label="소식 종류">
<button id="tabNotice" class="is-current" role="tab" aria-selected="true" aria-controls="noticePanel" type="button">공지사항</button>
<button id="tabGallery" role="tab" aria-selected="false" aria-controls="galleryPanel" type="button">갤러리</button>
</div>
<div id="noticePanel" role="tabpanel" aria-labelledby="tabNotice">
<ul class="notice-list">
<li><a class="notice-link" href="#noticePopup">11월 문화예술 프로그램 안내</a></li>
<li><a class="notice-link" href="#noticePopup">주말 어린이 창작 교실 모집</a></li>
<li><a class="notice-link" href="#noticePopup">커뮤니티 오픈 클래스 신청</a></li>
</ul>
</div>
<div id="galleryPanel" role="tabpanel" aria-labelledby="tabGallery" hidden>
<div class="thumb-row"><img src="images/gallery1.jpg" alt="작가와의 만남"><img src="images/gallery2.jpg" alt="창작 교실"><img src="images/gallery3.jpg" alt="도시를 그리는 전시"></div>
</div>
</section>
<a class="panel promo-panel" href="#gallery"><span>EXHIBITION</span><strong>여울의 새로운 전시</strong><span>전시 이야기 보기 →</span></a>
<a class="panel quick-panel" href="#contact"><span>VISIT YEOUL</span><strong>오시는 길과 관람 안내</strong><span>이용 안내 보기 →</span></a>
</div>
[STEP_P04_GALLERY]
<div class="gallery-heading"><div><span>GALLERY</span><h2>문화공간의 하루</h2></div><p>작은 경험이 모여 커다란 이야기가 됩니다.</p></div>
<div class="gallery-cards">
<article><img src="images/gallery1.jpg" alt="작가와의 만남 프로그램"><h3>작가와의 만남</h3></article>
<article><img src="images/gallery2.jpg" alt="함께하는 창작 교실"><h3>창작 교실</h3></article>
<article><img src="images/gallery3.jpg" alt="도시를 그리는 전시"><h3>도시의 기록</h3></article>
</div>
[STEP_P04_FOOTER]
<div class="footer-inner"><div><strong>YEOUL CULTURE</strong><p>여울 문화공간 · 전시·공연·교육</p></div><div><span>문의: 현장 연습용 가상 안내</span><small>© K-BOOKS ORIGINAL PRACTICE</small></div></div>
[STEP_P04_POPUP]
<div class="popup-backdrop" id="noticePopup" hidden>
<section class="popup-box" role="dialog" aria-modal="true" aria-labelledby="popupTitle" tabindex="-1">
<div class="popup-head"><h2 id="popupTitle">여울 소식</h2><button type="button" class="popup-close" id="popupClose">닫기 ×</button></div>
<p id="popupText">공지사항 내용을 확인하는 연습용 팝업입니다.</p>
<button class="popup-ok" id="popupOkay" type="button">확인</button>
</section>
</div>
정상 출력 화면 비교 (PC / 모바일)
직접 점검 □ 공지 3개와 갤러리 이미지 3개가 있는가? □ 배너·바로가기 링크가 존재하는가? □ 푸터가 페이지 하단에 보이는가? 막혔을 때 gallery2.jpg가 누락되면 image 경로를 확인합니다. 팝업이 지금 안 열리는 것은 오류가 아니며 P07에 연결합니다.
P05 / 08 · P05 · 데스크톱 CSS PC 1200px 레이아웃 설계
학습 목표 헤더·300px 비주얼·3영역 콘텐츠·푸터를 CSS로 배치한다.복습할 기초 B06 CSS · B09 Flex · B11 Grid · LA4 데스크톱수정 파일 css/style.css검색할 위치 /* STEP_P05_DESKTOP */
max-width:1200px은 콘텐츠의 최대 폭입니다. minmax(0,1fr)와 min-width:0은 카드가 너무 좁아지거나 넘치는 현상을 막는 데 중요합니다. 작은 화면의 기본 1열 안전장치도 함께 작성합니다.
따라하기 style.css의 STEP_P05_DESKTOP 주석을 PC용 CSS 전체 블록으로 교체합니다. 1200px에서 헤더, 비주얼, 콘텐츠 3열을 확인합니다. 390px에서도 카드를 가로로 넘치게 만들지 않았는지 확인합니다. 직접 입력할 코드 /* P05: 데스크톱 레이아웃부터 조립합니다. */
:root { --ink:#21314a; --navy:#1b3151; --coral:#eda76d; --paper:#f6f0e8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f1f5f8; color:var(--ink); font:15px/1.65 system-ui,"Malgun Gothic",sans-serif; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:3px solid #ec8c49; outline-offset:3px; }
img { max-width:100%; display:block; }
button { font:inherit; cursor:pointer; }
.skip-link { position:absolute; top:-100px; left:12px; z-index:200; background:#fff; padding:10px; }
.skip-link:focus { top:12px; }
.site-shell { max-width:1200px; margin:0 auto; background:#fff; box-shadow:0 12px 48px rgba(11,29,55,.08); }
.site-header { background:#fff; position:relative; z-index:20; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:100px; padding:0 32px; }
.brand { flex:none; display:block; width:162px; }
.brand img { width:100%; height:58px; object-fit:contain; }
.main-nav > ul { display:flex; list-style:none; margin:0; padding:0; gap:3px; }
.main-nav li { position:relative; list-style:none; }
.main-nav > ul > li > a { display:block; min-width:126px; padding:15px 8px; text-align:center; font-weight:750; }
.main-nav > ul > li > a:hover,.main-nav > ul > li:focus-within > a { color:#135b83; }
.submenu { position:absolute; left:0; right:0; top:100%; background:var(--navy); color:#fff; margin:0; padding:8px 0; list-style:none; display:none; box-shadow:0 6px 18px #091c3040; }
.main-nav li:hover > .submenu,.main-nav li:focus-within > .submenu { display:block; }
.submenu a { display:block; padding:8px 14px; font-size:13px; }
.submenu a:hover,.submenu a:focus-visible { background:#39516e; }
.nav-toggle { display:none; border:1px solid #d3dfec; padding:8px 12px; border-radius:7px; color:var(--navy); background:white; }
.hero { height:300px; position:relative; overflow:hidden; background:#1c3658; }
.slides,.slide { position:absolute; inset:0; }
.slide { opacity:0; pointer-events:none; transition:opacity .65s ease-in-out; }
.slide.is-active { opacity:1; pointer-events:auto; z-index:1; }
.slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,30,49,.82),rgba(18,30,49,.1)); }
.slide-caption { position:relative; z-index:2; width:min(740px,88%); padding:45px 54px; color:#fff; }
.slide-caption > span { font-size:12px; letter-spacing:.22em; color:#ffce9c; font-weight:700; }
.slide-caption h1,.slide-caption h2 { font-size:clamp(24px,3vw,39px); letter-spacing:-.055em; line-height:1.3; margin:12px 0; }
.slide-caption p { margin:0; }
.hero-controls { position:absolute; bottom:13px; right:20px; z-index:5; color:#fff; display:flex; gap:14px; align-items:center; font-size:12px; }
.hero-controls button { border:1px solid #ffffff66; background:#152b4499; border-radius:50px; padding:6px 12px; color:#fff; }
.panel-grid { min-height:208px; display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:18px; padding:24px 26px; }
.panel { border:1px solid #dae2ec; min-width:0; border-radius:9px; overflow:hidden; }
.news-panel { padding:14px 18px; }
.news-panel h2 { font-size:16px; margin:0 0 8px; }
.tab-buttons { display:flex; gap:8px; border-bottom:1px solid #dce5ef; }
.tab-buttons button { border:0; color:#61758d; padding:6px 8px; background:transparent; font-weight:700; }
.tab-buttons button.is-current { color:#164c7c; border-bottom:2px solid #2d6698; }
.notice-list { padding:10px 0 0 17px; margin:0; font-size:13px; }
.notice-list li { line-height:1.7; }
.notice-link:hover { text-decoration:underline; }
.thumb-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:14px; }
.thumb-row img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:5px; }
.promo-panel,.quick-panel { display:flex; flex-direction:column; justify-content:end; gap:5px; color:white; padding:20px; background:linear-gradient(145deg,#304966,#19344e); }
.promo-panel { background:linear-gradient(145deg,#9b6d4a,#543a42); }
.promo-panel span,.quick-panel span { font-size:12px; letter-spacing:.035em; }
.promo-panel strong,.quick-panel strong { font-size:20px; line-height:1.4; }
#gallery { background:var(--paper); padding:30px 26px 36px; }
.gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:15px; }
.gallery-heading span { font-size:12px; letter-spacing:.18em; color:#a06648; font-weight:800; }
.gallery-heading h2 { margin:3px 0 0; font-size:21px; }
.gallery-heading p { margin:0; font-size:13px; color:#6f6d70; }
.gallery-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.gallery-cards article { min-width:0; border:1px solid #e8e2de; background:white; border-radius:7px; overflow:hidden; }
.gallery-cards img { width:100%; aspect-ratio:16/7; object-fit:cover; }
.gallery-cards h3 { margin:10px 12px; font-size:14px; }
.site-footer { background:#15263e; color:#fff; }
.footer-inner { min-height:100px; padding:20px 27px; display:flex; gap:18px; justify-content:space-between; align-items:center; }
.footer-inner strong { font-size:15px; letter-spacing:.08em; }
.footer-inner p,.footer-inner span,.footer-inner small { display:block; color:#bccce1; font-size:12px; margin:2px 0; }
.popup-backdrop { position:fixed; inset:0; background:#0b2136b8; display:grid; place-items:center; z-index:100; padding:18px; }
.popup-box { width:min(480px,100%); background:white; padding:25px; border-radius:12px; box-shadow:0 20px 55px #07192c4c; }
.popup-head { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.popup-head h2 { margin:0; font-size:19px; }
.popup-close { background:#eef4fa; border:0; border-radius:6px; padding:8px 12px; }
.popup-ok { margin-top:20px; padding:9px 19px; border:0; background:var(--navy); color:white; border-radius:6px; }
/* P05에서도 작은 화면에서 카드가 겹치지 않게 하는 최소 안전장치를 넣습니다. */
@media (max-width:700px) { .header-inner { flex-wrap:wrap; padding:15px; } .main-nav { width:100%; } .main-nav>ul { flex-wrap:wrap; } .main-nav>ul>li { flex:1 1 45%; } .main-nav>ul>li>a { min-width:0; } .panel-grid,.gallery-cards { grid-template-columns:1fr; } .gallery-heading { flex-wrap:wrap; } .slide-caption { padding:38px 20px; width:96%; } .footer-inner { flex-wrap:wrap; } }
정상 출력 화면 비교 (PC / 모바일)
직접 점검 □ PC에서 콘텐츠 카드가 3영역으로 보이는가? □ 이미지 3장이 한 위치에 겹치고 첫 장만 보이는가? □ 작은 화면에서 카드가 좁게 찌그러지지 않는가? 막혔을 때 Grid가 한 열로 나오면 .panel-grid의 grid-template-columns를 확인하세요. 슬라이드가 모두 보이면 .slide와 .slide.is-active 규칙을 확인합니다.
P06 / 08 · P06 · 반응형 모바일·태블릿 화면 정리
학습 목표 768·390·320px에서 메뉴·카드·텍스트가 읽히도록 개선한다.복습할 기초 B12 미디어 쿼리 · B13 모바일 1열 · LF4 사이드바 해제수정 파일 css/style.css검색할 위치 /* STEP_P06_MOBILE */
@media는 화면 너비에 따라 CSS를 바꾸는 조건입니다. PC에서는 3영역, 768px 태블릿에서는 2영역, 390·320px에서는 1영역으로 바꿉니다. 입력 중인 카드 안의 텍스트가 한 글자씩 줄바꿈되지 않아야 합니다.
따라하기 STEP_P06_MOBILE 주석을 미디어 쿼리 블록으로 교체합니다. 768px에서는 카드 2열, 390/320px에서는 1열을 확인합니다. 메뉴 버튼은 P07에서 동작할 예정입니다. 직접 입력할 코드 /* P06: 화면이 좁아져도 카드·메뉴가 한 글자씩 찌그러지지 않게 합니다. */
@media (max-width:900px) {
.header-inner { padding:14px 20px; }
.brand { width:145px; }
.main-nav>ul>li>a { min-width:100px; font-size:13px; }
.panel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.news-panel { grid-column:1 / -1; }
}
@media (max-width:680px) {
.header-inner { display:flex; align-items:center; gap:12px; }
.brand { width:138px; }
.nav-toggle { display:block; margin-left:auto; }
.main-nav { flex-basis:100%; width:100%; }
.main-nav>ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.main-nav>ul>li { min-width:0; }
.main-nav>ul>li>a { border:1px solid #e1e8f1; border-radius:6px; padding:9px 6px; }
.submenu { display:none; position:static; box-shadow:none; border-radius:6px; }
.main-nav li:hover>.submenu,.main-nav li:focus-within>.submenu { display:block; }
/* 스크립트가 정상 연결된 경우에만 접기 메뉴를 적용합니다. */
.js-ready .main-nav:not(.is-open) { display:none; }
.js-ready .main-nav.is-open { display:block; }
.hero { height:300px; }
.slide-caption h1,.slide-caption h2 { font-size:clamp(23px,6.4vw,32px); }
.panel-grid { grid-template-columns:1fr; gap:10px; padding:14px; }
.news-panel { grid-column:auto; }
#gallery { padding:20px 14px; }
.gallery-cards { grid-template-columns:1fr; }
.gallery-cards img { aspect-ratio:16/6; }
.footer-inner { padding:19px; }
}
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto; }
.slide { transition:none; }
}
정상 출력 화면 비교 (PC / 모바일)
직접 점검 □ 320px에서 페이지 가로 스크롤이 없는가? □ 390px에서 카드 텍스트가 읽히는가? □ 768px에서 공지 카드가 두 열을 차지하는가? 막혔을 때 모바일에서 글자가 세로로 찌그러지면 .panel-grid와 .gallery-cards의 grid-template-columns를 1fr로 바꾸고, 부모 요소 min-width를 확인하세요.
P07 / 08 · P07 · JavaScript 메뉴·자동 슬라이드·탭·팝업 작동
학습 목표 외부 CDN 없이 메뉴·3초 이내 페이드·탭·팝업을 작동시킨다.복습할 기초 B15 메뉴 동작 · S05 모바일 메뉴 · S09 슬라이드 · S13 탭·팝업수정 파일 js/script.js검색할 위치 /* STEP_P07_FUNCTIONS */
이 스크립트는 요소를 찾고 이벤트를 연결하는 공통 동작입니다. 초보자는 우선 어떤 id/class가 어떤 버튼에 연결되는지 이해합니다. 시험 환경에서는 인터넷이 끊겨도 동작해야 하므로 외부 라이브러리를 사용하지 않습니다.
따라하기 STEP_P07_FUNCTIONS 주석을 제공한 script.js 블록으로 교체합니다. 모바일 전체 메뉴 버튼과 공지/갤러리 탭을 눌러 봅니다. 3초 이내 슬라이드 전환, 공지 팝업, Esc 닫기를 확인합니다. 직접 입력할 코드 /* P07: 메뉴·슬라이드·탭·팝업을 연결합니다. 외부 인터넷 없이 작동합니다. */
document.addEventListener('DOMContentLoaded', () => {
const navButton = document.querySelector('.nav-toggle');
const nav = document.getElementById('mainNav');
if (navButton && nav) {
navButton.addEventListener('click', () => {
const open = nav.classList.toggle('is-open');
navButton.setAttribute('aria-expanded', String(open));
});
nav.addEventListener('click', event => {
if (event.target.closest('a') && window.innerWidth <= 680) {
nav.classList.remove('is-open');
navButton.setAttribute('aria-expanded', 'false');
}
});
}
document.documentElement.classList.add('js-ready');
const slides = [...document.querySelectorAll('.slide')];
const slideStatus = document.getElementById('slideStatus');
const pauseButton = document.getElementById('slidePause');
const hero = document.querySelector('.hero');
let current = 0;
let paused = false;
const updateSlides = () => {
slides.forEach((slide, index) => {
const active = index === current;
slide.classList.toggle('is-active', active);
slide.setAttribute('aria-hidden', String(!active));
});
if (slideStatus) slideStatus.textContent = `${String(current + 1).padStart(2,'0')} / ${String(slides.length).padStart(2,'0')}`;
};
if (pauseButton) pauseButton.addEventListener('click', () => {
paused = !paused;
pauseButton.textContent = paused ? '다시 재생' : '일시정지';
pauseButton.setAttribute('aria-pressed', String(paused));
});
if (slides.length > 1) {
window.setInterval(() => {
if (paused || document.hidden || (hero && (hero.matches(':hover') || hero.contains(document.activeElement)))) return;
current = (current + 1) % slides.length;
updateSlides();
}, 2800);
}
updateSlides();
const tabNotice = document.getElementById('tabNotice');
const tabGallery = document.getElementById('tabGallery');
const noticePanel = document.getElementById('noticePanel');
const galleryPanel = document.getElementById('galleryPanel');
function selectTab(which) {
const onNotice = which === 'notice';
noticePanel.hidden = !onNotice;
galleryPanel.hidden = onNotice;
tabNotice.classList.toggle('is-current', onNotice);
tabGallery.classList.toggle('is-current', !onNotice);
tabNotice.setAttribute('aria-selected', String(onNotice));
tabGallery.setAttribute('aria-selected', String(!onNotice));
}
if (tabNotice && tabGallery && noticePanel && galleryPanel) {
tabNotice.addEventListener('click', () => selectTab('notice'));
tabGallery.addEventListener('click', () => selectTab('gallery'));
[tabNotice, tabGallery].forEach((tab, idx, arr) => {
tab.addEventListener('keydown', event => {
if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
event.preventDefault();
const next = arr[1 - idx];
selectTab(next === tabNotice ? 'notice' : 'gallery');
next.focus();
});
});
}
const popup = document.getElementById('noticePopup');
const popupBox = popup && popup.querySelector('.popup-box');
const popupText = document.getElementById('popupText');
const closePopup = () => { if (popup) popup.hidden = true; if (lastFocused) lastFocused.focus(); };
let lastFocused = null;
document.querySelectorAll('.notice-link').forEach(link => link.addEventListener('click', event => {
event.preventDefault();
lastFocused = link;
if (popupText) popupText.textContent = `${link.textContent.trim()}
자세한 내용은 문화공간 공지에서 확인하세요.`;
if (popup) popup.hidden = false;
if (popupBox) popupBox.focus();
}));
document.getElementById('popupClose')?.addEventListener('click', closePopup);
document.getElementById('popupOkay')?.addEventListener('click', closePopup);
popup?.addEventListener('click', event => { if (event.target === popup) closePopup(); });
document.addEventListener('keydown', event => {
if (event.key === 'Escape' && popup && !popup.hidden) closePopup();
});
});
정상 출력 화면 비교 (PC / 모바일)
직접 점검 □ 2.8초 간격의 슬라이드가 자동 전환되는가? □ 모바일 메뉴가 열리고 닫히는가? □ 갤러리 탭과 공지 팝업을 마우스·키보드로 작동할 수 있는가? 막혔을 때 버튼이 안 되면 JS 파일 경로와 콘솔 오류를 먼저 확인하세요. 선택자 #tabGallery와 id="tabGallery"가 정확히 일치해야 합니다.
P08 / 08 · P08 · 최종 점검 로컬 검증 후 3시간 모의시험으로
학습 목표 문제지 요구사항을 체크하고 기존 E01 모의시험에 도전한다.복습할 기초 B18 독립 완성 · FINAL 종합 · S15 동작 점검수정 파일 (코드 변경 없음)검색할 위치 전체 파일 점검
입문 8단계는 익히는 수업입니다. 온라인에서 따라 했다는 사실은 합격이 아닙니다. 실제 시험과 비슷한 조건으로 오프라인 PC에서 빈 시작 파일로 다시 제작하고 3시간 동안 완료해 봅니다.
따라하기 P07 완성 파일을 새 폴더로 복사해 Chrome에서 열어 봅니다. 상단 메뉴·슬라이드·공지·탭·팝업을 다시 조작합니다. 오프라인 E01 제공파일 ZIP에서 빈 파일로 다시 시작하고 3시간 모의시험을 진행합니다. 직접 입력할 코드 코드 변경 없음 — P07 FINISH 파일을 기준으로 직접 조작하고 제출 조건을 점검하세요.
정상 출력 화면 비교 (PC / 모바일)
직접 점검 □ 인터넷 연결 없이 로컬에서 이미지와 기능이 작동하는가? □ index.html·css/style.css·js/script.js가 연결되어 있는가? □ 제출 폴더 크기가 10MB 이하이고 숨겨진 외부 연결이 없는가? 막혔을 때 로컬에서 안 되면 절대경로(/images/) 또는 CDN 링크가 남아 있는지 확인하세요. 훈련실 ZIP은 개인 백업용이고 시험장 제출 방식은 감독 지시를 따릅니다.
시험시간 및 준비 규정은 연도·회차별 공지에 따라 바뀔 수 있습니다. 공식 Q-Net 자료를 확인하세요. 완주 체크는 공식 채점이나 합격 판정이 아닙니다. 
