웹사이트 너비 1200px / 좌측 메뉴 200px + 본문 영역 1000px. 슬라이드 전환은 좌우 이동 전환 방식으로 연습합니다. PC 화면 제작을 우선하고 모바일은 추가 연습으로 활용합니다.
좌측 고정 메뉴 200px
메인 상단 영역 · 100px
비주얼 이미지 슬라이드 · 300px
공지사항 · 갤러리배너바로가기
푸터 · 100px
참고 목표 화면 (정답 디자인 강제 아님)
사이트 레이아웃을 이해하기 위한 예시 이미지입니다. 문제지에서 지정하지 않은 디자인은 자유롭게 구성할 수 있습니다.
2. 디자인 색상 가이드
#1f5248주조색
#cadc95보조색
#f3f8ed배경색
#284237텍스트색
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 모의실기 제공 텍스트
# 초록온 식물원
[주 메뉴]
식물원 소개
정원 탐방
체험 예약
소식·안내
[공지사항]
겨울 정원 관람시간 안내
식물 표본 수업 접수
가든 페어 주말 행사
[갤러리]
온실 산책
허브 클래스
정원 전시
[슬라이드]
초록온 식물원 · 정원과 자연을 배우는 체험형 식물원 홈페이지
[푸터]
K-BOOKS PRACTICE / All rights reserved.
