🥐3. index.jsp 작성하기

2026. 6. 1. 12:38ㆍ2🥐 제과점 프로그램

제과점 매출관리 프로그램의 전체 화면 틀 만들기

앞에서 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 출력

즉, 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 = "list_j.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>
</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 → 화면 디자인

으로 역할이 나뉩니다.

제목 만들기

제목을 표시할 때는 <h1> ~ <h6> 태그를 사용합니다.

숫자가 커질수록 글자 크기는 작아집니다.

<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>

6. HEADER 영역 만들기

<HEADER><H2>제과점 매출관리 프로그램</H2></HEADER>

HEADER는 화면 맨 위 제목 영역입니다.

문제에서 프로그램 이름이
“제과점 매출관리 프로그램”이므로 이 제목을 출력합니다.

7. NAV 영역 만들기

<NAV>

NAV는 메뉴 영역입니다.

이번 문제에서는 다음 메뉴가 필요합니다.

판매등록
제과현황
판매현황
매출현황
홈으로

그래서 NAV 안에 메뉴들을 작성합니다.

8. 메뉴를 목록으로 만들기

메뉴는 보통 <ul>과 <li> 태그를 사용하여 작성합니다.

<ul>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ul>

문법 해석

태그역할

<ul>	메뉴 전체 목록
<li>	메뉴 한 개

즉,

<ul>
 └ <li>메뉴1</li>
 └ <li>메뉴2</li>
 └ <li>메뉴3</li>

구조로 작성합니다.

정보처리산업기사 실기에서는 메뉴 구성 시 대부분 <ul>과 <li>를 사용하며, <ol>(순서 목록)은 거의 사용하지 않습니다.

9. 메뉴 클릭 시 이동할 파일 연결하기

<A href = "reg.jsp" target = "section_page">판매등록</A>

A 태그는 클릭해서 다른 페이지로 이동할 때 사용합니다.

여기서 href는 이동할 파일입니다.

예를 들어:

판매등록 클릭 → reg.jsp 실행
제과현황 클릭 → list.jsp 실행
판매현황 클릭 → list_j.jsp 실행
매출현황 클릭 → list_jg.jsp 실행
홈으로 클릭 → main.jsp 실행

10. 메뉴별 파일 역할

메뉴	연결 파일	역할
판매등록	reg.jsp	판매 정보를 입력하는 화면
제과현황	list.jsp	제과 테이블 조회 화면
판매현황	list_j.jsp	판매정보와 제과 테이블 JOIN 조회
매출현황	list_jg.jsp	제과점별 매출 GROUP BY 조회
홈으로	main.jsp	프로그램 설명 화면

여기서 list_j.jsp의 j는 JOIN,
list_jg.jsp의 jg는 JOIN + GROUP BY로 생각하면 이해하기 쉽습니다.

11. target="section_page"가 중요한 이유

target = "section_page"

이 부분이 중요합니다.

보통 메뉴를 클릭하면 화면 전체가 바뀝니다.

하지만 이 프로젝트에서는:

header → 그대로 유지
nav → 그대로 유지
footer → 그대로 유지
section → 내용만 변경

되어야 합니다.

그래서 메뉴를 클릭했을 때
전체 페이지가 아니라 section 안의 iframe만 바뀌도록 설정합니다.

12. section과 iframe 만들기

<section>
	<iframe name="section_page" src="main.jsp"></iframe>
</section>

section은 실제 내용이 출력되는 본문 영역입니다.

iframe은 웹페이지 안에 다른 JSP 파일을 보여주는 공간입니다.

의미는 아래와 같습니다.

section_page라는 이름의 iframe 출력 영역을 만들고
프로그램 실행 시
main.jsp를 먼저 보여준다.

즉, 처음 실행할 때는:

main.jsp

가 출력됩니다.

그리고 메뉴를 누르면 target="section_page"에 의해
iframe 안의 내용만 바뀝니다.

13. footer 만들기

<footer>
	<H3>Copyright (c) 2025. 주식회사 OOOO Inc All Rights Reserved.</H3>
</footer>

footer는 화면 맨 아래 영역입니다.

우리는 제시된 화면과 같게 작성하면 됩니다!

14. 실행 흐름 정리

현재 index.jsp는 다음과 같이 동작합니다.

index.jsp 실행
↓
header에 제목 출력
↓
nav에 메뉴 출력
↓
section 안 iframe에 main.jsp 출력
↓
메뉴 클릭 시 iframe 안의 내용만 변경