JSP 페이지에 이미지 포함 실습
1. 새 프로젝트 pro13을 만들고 다음과 같이 실습에 필요한 이미지 파일(duke.png, duke2.png)과 duke_image.jsp, include1.jsp, include2.jsp 파일을 추가합니다.
인클루드 액션 태그의 실행 파일은 다음과 같습니디.
1 브라우저 요청 시 JSP 파일을 컴파일합니다.
2 컴파일 시 <jsp:include>가 지시하는 JSP를 요청합니다.
3 요청된 JSP를 컴파일합니다.
4 컴파일된 JSP가 응답을 보냅니다.
5 JSP는 브라우저에서 요청한 응답 결과를 출력합니다.
2 자식 JSP에 해당하는 duke_image.jsp를 다음과 같이 작성합니다. 부모 JSP에서 포함 요청 시 전달되는 이름과 이미지 파일을 getParameter() 메서드를 이용해 가져온 후 이름과 해당 이미지를 출력합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String imgName = request.getParameter("imgName");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>듀크이미지</title>
</head>
<body>
<br><br>
<h1>이름은 <%=name %>입니다.</h1>
<img src="./image/<%= imgName %>"/>
</body>
</html>
3. 부모 JSP인 include1.jsp를 다음과 같이 작성합니다. <jsp:include> 태그의 page 속성에 포함할 자식 JSP인 duke_image.jsp를 지정합니다. 그리고 <jsp:param> 태그(param 액션 태그)를 이용해 이름과 이미지 파일을 동적으로 자식 JSP인 duke_image.jsp로 포워딩합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>include1.jsp</title>
</head>
<body>
안녕하세요. 쇼핑몰 중심 JSP 시작입니다!!!
<br>
<jsp:include page="duke_image.jsp" flush="true" >
<jsp:param name= "name" value="듀크" />
<jsp:param name="imgName" value="duke.png" />
</jsp:include>
<br>
안녕하세요. 쇼핑몰 중심 JSP 끝 부분입니다.!!!
</body>
</html>
4. 이번에는 다른 부모 JSP인 include2.jsp를 다음과 같이 작성합니다. 자식 JSP로 다른 이름과 이미지 파일 이름을 전달합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>include2.jsp</title>
</head>
<body>
안녕하세요. 쇼핑몰 중심 JSP 시작입니다!!!
<br>
<jsp:include page="duke_image.jsp" flush="true" >
<jsp:param name="name" value="듀크2"/>
<jsp:param name="imgName" value="duke2.png"/>
</jsp:include>
<br>
안녕하세요. 쇼핑몰 중심 JSP 끝 부분입니다.!!!
</body>
</html>
5. 브라우저에서 JSP 파일을 요청하면 각각 다른 이미지와 이름이 출력됩니다. 먼저 http://localhost:8090/pro13/include1.jsp로 요청합니다.
6. http://localhost:8090/pro13/include.jsp로 요청하면 앞에서와는 다른 이미지와 이름이 출력되는 것을 볼 수 있습니다.
이처럼 인클루드 액션 태그는 포함되는 자식 JSP에 데이터를 동적으로 전달해서 원하는 결과를 출력할 수 있습니다.
7. 다음 경로의 원도 탐색기로 가면 JSP 파일이 자바 파일로 변환된 것을 볼 수 있습니다.
8. 인클루드 액션 태그로 요청한 include1.jsp의 자바 파일을 열어보면 <jsp:param> 태그로 전달한 매개변수의 자식 JSP로 전달됩니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| 자바 빈을 이용한 회원 정보 조회 실습 (0) | 2025.11.30 |
|---|---|
| 포워드 액션 태그 사용하기 (0) | 2025.11.27 |
| 인클루드 액션 태그 사용하기 (0) | 2025.11.18 |
| 스크립트 요소 이용해 회원 정보 조회하기 (0) | 2025.11.15 |
| JSP welcome 파일 지정하기 (0) | 2025.11.12 |
