은하숲 천문관
처음 보는 문제 · 힌트 없는 180분 독립 모의실기
03:00:00
내부 연습 제한 180분
전체 제출 파일 10MB 이하
내부 연습 제한 180분
전체 제출 파일 10MB 이하
과제 유형왼쪽 세로 메뉴형
슬라이드 유형위아래 자동 이동
주요 기능메뉴·탭·팝업
1. 과제 개요
가상의 천문관 홈페이지를 제작하세요. 지급받은 빈 index.html, css/style.css, js/script.js만 직접 작성하며, 이미지는 지급 폴더의 자료를 사용합니다. 인터넷·CDN·외부 라이브러리를 사용하지 않는 연습으로 진행합니다.
이 문제는 K-BOOKS가 만든 자체 연습문제입니다. Q-Net 공식 공개문제나 실제 시험 채점표가 아닙니다. 목표 화면은 제공 자료와 구현 방향을 이해하기 위한 예시입니다.
2. PC 배치 규격 (연습용)
| 전체 콘텐츠 폭 | 1,200px |
|---|---|
| 왼쪽 메뉴 영역 | 200px · 높이 700px |
| 오른쪽 본문 영역 | 1,000px |
| 오른쪽 상단 헤더 | 높이 100px |
| 이미지 슬라이드 | 높이 300px · 이미지 3장 · 위아래 이동 |
| 공지·갤러리 / 배너 / 바로가기 | 높이 200px · 가로 3영역 |
| 하단 푸터 | 높이 100px |
모바일 반응형은 K-BOOKS 추가 연습 목표이며, 공식 시험 채점의 독립 항목이라고 주장하지 않습니다. PC 배치와 필수 기능을 우선 완성하세요.
3. 필수 구현 요구사항
- HTML5와 UTF-8을 사용하고 CSS·JavaScript를 별도 파일로 연결하세요.
- 제공한
images/logo.svg를 왼쪽 메뉴 상단에 배치하고, 상위 메뉴 4개와 하위 메뉴를 구성하세요. 마우스 및 키보드로 접근 가능하게 합니다. - 슬라이드 이미지
slide1.jpg~slide3.jpg를 배치하고 위아래로 자동 전환하도록 구현하세요. 전환 주기는 약 3초로 연습하며 이전·다음 제어가 가능해야 합니다. - 공지사항 3개와 갤러리 이미지 3개를 탭으로 전환하세요. 공지를 클릭하면 레이어 팝업이 나타나고 닫기 버튼과 Esc로 닫혀야 합니다.
- 예약 안내 배너와 관측 준비물 바로가기, 푸터를 배치하세요.
- 모든 파일은 상대경로로 연결하고 인터넷 없이 Chrome에서 실행 가능해야 합니다.
4. 목표 화면 (참고 이미지)

제공 이미지와 구성 요소를 사용해 문제지의 배치·기능을 재현하세요. 세부 디자인은 합리적인 범위에서 조정 가능합니다.
5. 시간 배분 연습
10분문제 해석
40분HTML
50분CSS
50분JavaScript
20분기능 확인
10분제출 점검
시간 배분은 K-BOOKS 권장 연습안입니다. 180분이 되면 작업을 중지하고 결과를 그대로 보관해 평가하세요.
6. 제출 전 자기 확인
index.html·CSS·JS 작성 완료로고·슬라이드·갤러리 표시PC 1200px 레이아웃 확인슬라이드 상하 이동메뉴·탭 동작레이어 팝업 열기·닫기인터넷 연결 없이 실행제출폴더 10MB 이하