정보처리기사 실기
🪑3. index.jsp 작성하기 본문
독서실 자리관리 프로그램 전체 화면 틀 만들기
앞에서 db.sql을 작성하면서 독서실 자리관리 프로그램에 필요한 테이블을 만들었습니다.
이제부터는 실제 웹페이지 화면을 구성합니다.
이번 단계에서 작성할 파일은:
index.jsp
입니다.
index.jsp는 프로그램의 시작 페이지입니다.
즉, 자리등록이나 자리현황을 직접 처리하는 파일이 아니라
전체 화면의 틀을 잡아주는 파일입니다.
1. 이번 문제에서 index.jsp가 필요한 이유
문제에서 요구하는 메뉴는 다음과 같습니다.
자리등록
자리현황
일별검색
학습자별이용료
홈으로
이 메뉴들이 한 화면 안에서 이동할 수 있어야 하므로
전체 화면 구조가 필요합니다.
그래서 index.jsp에서는 다음 영역을 만듭니다.
header → 프로그램 제목
nav → 메뉴
section → 실제 화면 출력
footer → 하단 정보
2. index.jsp가 해야 할 일
이번 문제에서 index.jsp는 다음 역할을 합니다.
1. 상단에 “독서실 자리관리 프로그램” 제목 출력
2. 메뉴 만들기
- 자리등록
- 자리현황
- 일별검색
- 학습자별이용료
- 홈으로
3. section 영역에 main.jsp 출력
4. footer 출력
5. iframe 높이를 화면에 따라 조정
즉, index.jsp는 기능 처리 파일이 아니라
프로그램 전체 화면 구조를 만드는 파일입니다.
3. index.jsp 전체 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>독서실 자리관리 프로그램</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<HEADER><H2>독서실 자리관리 프로그램</H2></HEADER>
<NAV>
<UL>
<LI><A href = "reg.jsp" target = "section_page">자리등록</A></LI>
<LI><A href = "list.jsp" target = "section_page">자리현황</A></LI>
<LI><A href = "search.jsp" target = "section_page">일별검색</A></LI>
<LI><A href = "list_jg.jsp" target = "section_page">학습자별이용료</A></LI>
<LI><A href = "main.jsp" target = "section_page">홈으로</A></LI>
</UL>
</NAV>
<section>
<iframe name="section_page" src="main.jsp"></iframe>
</section>
<footer>
<H3>Copyright (c) 2025. 주식회사 OOOO Inc All Rights Reserved.</H3>
</footer>
</body>
<script>
const frame = document.querySelector('iframe[name="section_page"]');
frame.addEventListener('load',() => {
const url = frame.contentWindow.location.pathname;
if(url.endsWith('list.jsp')){
frame.style.height='400px';
}else if(url.endsWith('reg.jsp')){
frame.style.height='600px';
}else{
frame.style.height='400px';
}
});
</script>
</html>
4. JSP 기본 설정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
이 코드는 JSP 파일의 기본 설정입니다.
현재 프로그램은 한글을 사용하므로
한글이 깨지지 않게 UTF-8 설정을 해줍니다.
5. CSS 파일 연결하기
<link rel="stylesheet" type="text/css" href="style.css">
이 코드는 style.css 파일을 연결하는 코드입니다.
화면의 색상, 크기, 정렬은 style.css에서 처리합니다.
즉:
index.jsp → 화면 구조
style.css → 화면 디자인
으로 역할이 나뉩니다.
6. HEADER 영역 만들기
<HEADER><H2>독서실 자리관리 프로그램</H2></HEADER>
HEADER는 화면 맨 위 제목 영역입니다.
문제에서 프로그램 이름이
“독서실 자리관리 프로그램”이므로 이 제목을 출력합니다.
7. NAV 영역 만들기
<NAV>
NAV는 메뉴 영역입니다.
이번 문제에서는 다음 메뉴가 필요합니다.
자리등록
자리현황
일별검색
학습자별이용료
홈으로
그래서 NAV 안에 메뉴들을 작성합니다.
8. 메뉴 클릭 시 이동할 파일 연결하기
<A href = "reg.jsp" target = "section_page">자리등록</A>
A 태그는 클릭해서 다른 페이지로 이동할 때 사용합니다.
여기서 href는 이동할 파일입니다.
예를 들어:
자리등록 클릭 → reg.jsp 실행
자리현황 클릭 → list.jsp 실행
일별검색 클릭 → search.jsp 실행
학습자별이용료 클릭 → list_jg.jsp 실행
홈으로 클릭 → main.jsp 실행
9. 메뉴별 파일 역할
메뉴연결 파일역할
| 자리등록 | reg.jsp | 독서실 자리 사용 정보 입력 화면 |
| 자리현황 | list.jsp | 독서실 자리 전체 현황 조회 화면 |
| 일별검색 | search.jsp | 날짜와 시간 기준 자리 검색 화면 |
| 학습자별이용료 | list_jg.jsp | 학습자별 이용시간과 이용료 조회 화면 |
| 홈으로 | main.jsp | 프로그램 설명 화면 |
여기서 list_jg.jsp의 jg는 JOIN + GROUP BY라고 생각하면 이해하기 쉽습니다.
10. target="section_page"가 중요한 이유
target = "section_page"
이 부분이 중요합니다.
보통 메뉴를 클릭하면 화면 전체가 바뀝니다.
하지만 이 프로젝트에서는:
header → 그대로 유지
nav → 그대로 유지
footer → 그대로 유지
section → 내용만 변경
되어야 합니다.
그래서 메뉴를 클릭했을 때 전체 페이지가 아니라
section 안의 iframe만 바뀌도록 설정합니다.
11. section과 iframe 만들기
<section>
<iframe name="section_page" src="main.jsp"></iframe>
</section>
section은 실제 내용이 출력되는 본문 영역입니다.
iframe은 웹페이지 안에 다른 JSP 파일을 보여주는 공간입니다.
처음 실행할 때는:
main.jsp
가 출력됩니다.
그리고 메뉴를 누르면 target="section_page"에 의해
iframe 안의 내용만 바뀝니다.
12. footer 만들기
<footer>
<H3>Copyright (c) 2025. 주식회사 OOOO Inc All Rights Reserved.</H3>
</footer>
footer는 화면 맨 아래 영역입니다.
주로 저작권 문구나 회사 정보를 작성합니다.
13. iframe 높이 조절 스크립트가 필요한 이유
이번 독서실 프로그램은 화면마다 필요한 높이가 다릅니다.
예를 들어:
main.jsp → 설명 화면
list.jsp → 자리현황 표
reg.jsp → 자리등록 화면
특히 reg.jsp는 9×9 자리표가 들어가기 때문에
기본 높이가 작으면 화면이 잘릴 수 있습니다.
그래서 iframe이 어떤 페이지를 불러왔는지 확인하고
높이를 자동으로 조절합니다.
14. iframe 선택하기
const frame = document.querySelector('iframe[name="section_page"]');
이 코드는 현재 페이지에서 이름이 section_page인 iframe을 찾습니다.
즉 메뉴를 클릭했을 때 내용이 바뀌는 본문 영역을 선택하는 코드입니다.
15. iframe이 로드될 때마다 실행하기
frame.addEventListener('load',() => {
iframe 안의 페이지가 바뀔 때마다 실행됩니다.
즉 사용자가 메뉴를 클릭해서 reg.jsp, list.jsp 등이 열릴 때마다
현재 들어온 페이지를 확인합니다.
16. 현재 iframe에 열린 파일 확인하기
const url = frame.contentWindow.location.pathname;
현재 iframe 안에 열린 JSP 파일 경로를 가져옵니다.
예를 들어:
/main.jsp
/reg.jsp
/list.jsp
처럼 확인할 수 있습니다.
17. 페이지별 iframe 높이 설정하기
if(url.endsWith('list.jsp')){
frame.style.height='400px';
}else if(url.endsWith('reg.jsp')){
frame.style.height='600px';
}else{
frame.style.height='400px';
}
현재 열린 파일에 따라 iframe 높이를 다르게 줍니다.
list.jsp → 400px
reg.jsp → 600px
그 외 화면 → 400px
reg.jsp는 자리표가 들어가므로 더 큰 높이인 600px을 줍니다.
18. 실행 흐름 정리
현재 index.jsp는 다음과 같이 동작합니다.
index.jsp 실행
↓
header에 제목 출력
↓
nav에 메뉴 출력
↓
section 안 iframe에 main.jsp 출력
↓
메뉴 클릭 시 iframe 안의 내용만 변경
↓
iframe에 열린 파일에 따라 높이 조정
19. 정리
이번 단계에서는 독서실 자리관리 프로그램의 전체 화면 틀을 만들었습니다.
정리하면:
index.jsp → 전체 구조 담당
style.css → 디자인 담당
main.jsp → 첫 화면 설명
reg.jsp → 자리등록
list.jsp → 자리현황
search.jsp → 일별검색
list_jg.jsp → 학습자별 이용료
즉, index.jsp는 프로그램의 중심 화면이고,
다른 JSP 파일들을 연결해주는 역할을 합니다.
'🪑 독서실 자리관리 프로그램' 카테고리의 다른 글
| 🪑6. reg.jsp 작성하기 (0) | 2026.06.02 |
|---|---|
| 🪑5. main.jsp 작성하기 (0) | 2026.06.02 |
| 🪑4. style.css 작성하기 (0) | 2026.06.02 |
| 🪑2. DB 생성 흐름 (0) | 2026.06.02 |
| 🪑1. 독서실 프로그램 요구사항 분석 (0) | 2026.06.02 |