웹사이트 너비 1200px / 상단 헤더를 사용하는 일반 가로형. 슬라이드 전환은 페이드 전환 방식으로 연습합니다. PC 화면 제작을 우선하고 모바일은 추가 연습으로 활용합니다.
상단 로고 + 주 메뉴 · 100px
비주얼 이미지 슬라이드 · 300px
공지사항 · 갤러리배너바로가기
푸터 · 100px
참고 목표 화면 (정답 디자인 강제 아님)
사이트 레이아웃을 이해하기 위한 예시 이미지입니다. 문제지에서 지정하지 않은 디자인은 자유롭게 구성할 수 있습니다.
2. 디자인 색상 가이드
#1b3151주조색
#eda76d보조색
#f6f0e8배경색
#2a3548텍스트색
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 모의실기 제공 텍스트
# 여울 문화공간
[주 메뉴]
공간 소개
프로그램
전시·공연
이용 안내
[공지사항]
11월 문화예술 프로그램 안내
주말 어린이 창작 교실 모집
커뮤니티 오픈 클래스 신청
[갤러리]
작가와의 만남
아이와 함께하는 미술
도시를 그리는 전시
[슬라이드]
여울 문화공간 · 전시·공연·교육을 연결하는 문화공간 홈페이지
[푸터]
K-BOOKS PRACTICE / All rights reserved.
