Notice
Recent Posts
Recent Comments
Link
«   2026/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

정보처리기사 실기

🗓️3. index.jsp 작성하기 본문

🗓️ 일정관리 프로그램

🗓️3. index.jsp 작성하기

윤서입니다롱 2026. 5. 26. 11:19

일정관리 프로그램의 전체 화면 틀 만들기

앞에서 db.sql로 데이터베이스를 생성했고,
Util.java를 이용해 Oracle DB 연결 준비까지 완료했습니다.

이제부터는 실제 웹페이지 화면을 만들기 시작합니다.

이번 단계에서 작성할 파일은:

index.jsp

입니다.

index.jsp는 현재 프로젝트에서 가장 중요한 파일 중 하나입니다.

왜냐하면:

전체 웹사이트의 구조

를 담당하기 때문입니다.

즉 앞으로 만들:

일정등록
회원현황
일정현황

화면들은 모두 index.jsp 안에서 동작하게 됩니다.

1. 이번 문제에서 필요한 화면 확인하기

문제를 보면 다음 메뉴들이 존재합니다.

일정등록
회원현황
일정현황
홈으로

즉 사용자가 메뉴를 클릭하면
각 기능 화면으로 이동할 수 있어야 합니다.

그래서 현재 프로젝트에서는:

메뉴 영역
→ 실제 화면 출력 영역

이 필요합니다.

그리고 이 전체 구조를 담당하는 파일이:

index.jsp

입니다.

2. 이번 index.jsp가 해야 하는 역할

현재 문제에서 index.jsp는 다음 역할을 담당합니다.

1. 프로그램 제목 출력
2. 메뉴(nav) 생성
3. 메뉴 클릭 시 페이지 연결
4. section 영역에 화면 출력
5. footer 출력

즉:

데이터 처리 X
전체 구조 생성 O

입니다.

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="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 기본 설정

가장 위의 코드는 JSP 기본 설정입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

현재 프로젝트에서는 한글을 사용하기 때문에:

UTF-8 설정

이 매우 중요합니다.

만약 이 설정이 없거나 잘못되면:

한글 깨짐 현상

이 발생할 수 있습니다.

5. title 설정하기

<title>일정 관리 프로그램</title>

이 코드는 브라우저 탭 이름을 설정합니다.

즉 크롬 탭 위쪽에:

일정 관리 프로그램

이라는 이름이 표시됩니다.

6. style.css 연결하기

<link rel="stylesheet" type="text/css" href="style.css">

현재 프로젝트에서는 디자인을:

style.css

파일에서 관리합니다.

즉:

JSP → 구조와 기능
CSS → 디자인

역할 분리를 하는 것입니다.

앞으로:

배경색
글자색
메뉴 위치
가운데 정렬

같은 디자인은 모두 style.css에서 처리하게 됩니다.

7. HEADER : 프로그램 제목 만들기

<header>
    <h2>일정 관리 프로그램</h2>
</header>

현재 문제에서는 프로그램 제목이 필요합니다.

그래서 HEADER 영역에:

일정 관리 프로그램

을 출력합니다.

8. h2 태그를 사용하는 이유

<h2>

는 제목 태그입니다.

현재 프로젝트에서는 프로그램 제목을 강조해야 하므로 사용합니다.

숫자가 작을수록 더 큰 제목입니다.

h1 > h2 > h3

순으로 크기가 작아집니다.

9. NAV : 메뉴 만들기

문제에서는 다음 메뉴들을 요구합니다.

일정등록
회원현황
일정현황
홈으로

따라서 메뉴 영역인:

<nav>

를 생성합니다.

10. UL과 LI를 사용하는 이유

메뉴는 목록 형태이므로:

<ul>
<li>

태그를 사용합니다.

구조는 다음과 같습니다.

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

즉:

ul → 메뉴 전체
li → 메뉴 한 칸

이라고 생각하면 됩니다.

11. A 태그 : 페이지 연결하기

메뉴를 클릭했을 때 다른 페이지가 열려야 합니다.

그래서:

<a href="">

태그를 사용합니다.

예를 들어:

<a href="reg.jsp">

는:

reg.jsp 페이지로 이동

이라는 의미입니다.

12. 이번 문제에서 필요한 JSP 파일 연결

현재 문제에서는 메뉴마다 필요한 JSP 파일이 다릅니다.

메뉴연결 파일역할

일정등록 reg.jsp 일정 입력
회원현황 list.jsp 회원 조회
일정현황 list_j.jsp JOIN 조회
홈으로 main.jsp 메인 화면

즉 문제의 메뉴를 보고
필요한 JSP 파일을 판단해야 합니다.

13. list_j.jsp 이름 의미

실기에서는 파일 이름에 SQL 특징을 붙이는 경우가 많습니다.

예를 들어:

list_j.jsp

는:

JOIN 사용 조회

를 의미합니다.

현재 일정현황 화면에서는:

tbl_schedule + tbl_member

두 테이블 연결이 필요하기 때문입니다.

즉 JOIN SQL문이 사용됩니다.

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

target="section_page"

이 부분이 현재 프로젝트에서 가장 중요합니다.

보통 페이지를 이동하면 화면 전체가 바뀝니다.

하지만 현재 프로젝트는:

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

구조로 동작합니다.

즉 메뉴를 클릭하면:

section 영역 안의 내용만 변경

됩니다.

15. SECTION : 실제 화면 출력 영역

<section>

은 실제 기능 화면이 출력되는 공간입니다.

즉:

일정등록 화면
회원현황 화면
일정현황 화면

등이 이 안에 출력됩니다.

16. iframe 사용하는 이유

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

iframe은:

웹페이지 안에 또 다른 웹페이지를 출력하는 공간

입니다.

현재 프로젝트에서는 메뉴를 클릭할 때마다
iframe 안의 내용만 바뀌게 됩니다.

17. src="main.jsp"

src="main.jsp"

는 처음 실행 시 보여줄 페이지입니다.

즉 index.jsp를 처음 실행하면:

main.jsp

가 자동으로 출력됩니다.

18. 실제 동작 흐름

현재 프로젝트는 다음 흐름으로 동작합니다.

index.jsp 실행
↓
iframe 안에 main.jsp 출력
↓
일정등록 클릭
↓
iframe 안에 reg.jsp 출력
↓
회원현황 클릭
↓
iframe 안에 list.jsp 출력

즉:

전체 화면은 유지
내용만 변경

되는 구조입니다.

19. FOOTER : 하단 영역

<footer>

는 페이지 맨 아래 영역입니다.

보통:

저작권
회사명
제작 정보

등을 작성합니다.

현재 프로젝트에서는 다음 내용을 출력합니다.

<h3>Copyright (c) 2025. 주식회사 OOOO Inc ALL Rights Reserved.</h3>

20. 현재 프로젝트 구조 정리

현재까지 만든 구조는 다음과 같습니다.

db.sql
→ 데이터베이스 생성

Util.java
→ Oracle DB 연결

index.jsp
→ 전체 화면 구조 생성

그리고 앞으로 만들:

main.jsp
reg.jsp
list.jsp
list_j.jsp
action.jsp

파일들은 모두 index.jsp 안에서 동작하게 됩니다.

21. 핵심 정리

이번 단계에서 가장 중요한 것은:

index.jsp는 기능 처리 파일이 아니라
전체 웹사이트 구조를 만드는 파일

이라는 점입니다.

그리고:

header → 제목
nav → 메뉴
section → 실제 화면 출력
footer → 하단 정보

구조를 이해하는 것이 중요합니다.

'🗓️ 일정관리 프로그램' 카테고리의 다른 글

🗓️5. main.jsp 작성하기  (0) 2026.05.26
🗓️4. style.css 작성하기  (0) 2026.05.26
🗓️2. DB 생성 흐름  (0) 2026.05.26
🗓️1. 일정관리 프로그램 화면 요구사항 분석하기  (0) 2026.05.26
🗓️0. 환경구성하기  (0) 2026.04.20
'🗓️ 일정관리 프로그램' Related Articles more