웹사이트 너비 1200px / 상단 헤더를 사용하는 일반 가로형. 슬라이드 전환은 위아래 이동 전환 방식으로 연습합니다. PC 화면 제작을 우선하고 모바일은 추가 연습으로 활용합니다.
상단 로고 + 주 메뉴 · 100px
비주얼 이미지 슬라이드 · 300px
공지사항 · 갤러리배너바로가기
푸터 · 100px
참고 목표 화면 (정답 디자인 강제 아님)
사이트 레이아웃을 이해하기 위한 예시 이미지입니다. 문제지에서 지정하지 않은 디자인은 자유롭게 구성할 수 있습니다.
2. 디자인 색상 가이드
#252c61주조색
#e97cae보조색
#f9effb배경색
#2a2f48텍스트색
3. 페이지 내용 및 주요 메뉴
축제 소개 · 프로그램 · 참가 안내 · 커뮤니티
제공 텍스트 파일 source/content.txt 내용을 활용하고, 공지사항 3건·갤러리 3건·이미지 슬라이드 3장을 배치하세요.
4. 제작 요구사항
index.html의 HTML5 문서 뼈대를 작성하고 UTF-8을 지정한다.
화면 폭 1200px 기준의 헤더·비주얼·콘텐츠·푸터 배치를 만든다.
제공된 로고·슬라이드 이미지를 상대경로로 연결하고 alt 설명을 작성한다.
주 메뉴와 하위 메뉴를 구성하고 키보드 Tab 탐색을 확인한다.
슬라이드는 위아래 이동 전환 방식으로 3초 이내 자동 반복되도록 구성한다.
공지사항과 갤러리를 탭으로 전환하고 공지 클릭 시 레이어 팝업을 표시한다.
CSS와 JavaScript는 각각 별도 파일에 작성해 연결한다.
Chrome 콘솔 오류·파일 경로·이미지 누락·제출 용량을 최종 확인한다.
5. 제공 파일
images/slide1.jpg
images/slide2.jpg
images/slide3.jpg
images/gallery1.jpg
images/gallery2.jpg
images/gallery3.jpg
images/logo.svg
source/content.txt
6. 제공 텍스트 원문
# K-BOOKS 모의실기 제공 텍스트
# 별빛 파도 페스티벌
[주 메뉴]
축제 소개
프로그램
참가 안내
커뮤니티
[공지사항]
2026 페스티벌 일정 발표
아티스트 라인업 1차 공개
자원활동가 모집 공지
[갤러리]
메인 스테이지
빛의 거리
아트 마켓
[슬라이드]
별빛 파도 페스티벌 · 음악과 빛이 만나는 도시 축제 안내 홈페이지
[푸터]
K-BOOKS PRACTICE / All rights reserved.
