본문 바로가기

개발자노트/웹

HTML - JSP - 커스텀태그 사용

index.jsp (커스텀 태그 호출코드)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="kim" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>커스텀 태그 사용</title>
</head>
<body>

<h1><kim:print></kim:print></h1>


</body>
</html>

taglib tagdir="경로" 를 지정해주고, prefix="사용할태그명" 을 정해주고,

사용할 때는 <사용할태그명:태그명> 을 사용해주면 된다.

내가 사용할 커스텀 태그는 print.tag로 단순히 출력만 하는 태그이다.

 

print.tag (커스텀태그.tag 코드)

<%@ tag language="java" pageEncoding="UTF-8"%>

커스텀태그입니다. HOLA

 

+ 커스텀 태그는 WEB-INF/tags 폴더 안에 따로 관리해준다!

 

수행결과

태그를 <h1>로 감싸주어서 <h1> 또한 적용된 채로 나온 것을 볼 수 있다.

 

 

 

 

뿐만 아니라, 태그에서는 .java 코드의 내용을 jsp:useBean하여 객체 정보를 꺼내올 수 있다.

 

 

test.java 코드

package test;

public class Test {
	private String[] datas= {"appple","banana","kiwi"};
	private int num1=10; // 값을 이미 넣었기 때문에 세터 안할것임!
	private int num2=20;
	public String[] getDatas() {
		return datas;
	}
	public int getNum1() {
		return num1;
	}
	public int getNum2() {
		return num2;
	}

}

 

test.tag 코드

<%@ tag language="java" pageEncoding="UTF-8"%>
<jsp:useBean id="test" class="test.Test" />

<%@ attribute name="border" %> <!-- 외부에서 속성 설정하면 들어오는 값 -->
<%@ attribute name="bgcolor" %> 
	<!-- 이 커스텀 태그를 사용하는 사람이 태그바디에 작성한 내용 -->
<h1><jsp:doBody /></h1>
<table border="${border}" bgcolor="${bgcolor}">
	<%
		for(String v:test.getDatas()){
	%>
		<tr>
			<td><%=v%></td>
		</tr>
	<%
		}
	%>
</table>

<jsp:doBody /> 는 jsp 파일에서 이 태그를 사용할 때 body에 값을 적는다면 그것에 대한 정의를 하는것이고

 

<@ attribute name=" " %> 을 사용하여, 태그 안에 table 에 속성을 외부에서 재정의 할 수 있다.

border와 bgcolor 를 외부에서 설정하면 그에 따른 태그가 사용이 되는 것이다.

 

 

test.jsp 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="kim" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<kim:test border="5" bgcolor="lightpink">목록</kim:test>

</body>
</html>

위에서 말했듯 test라는 태그를 사용할건데, border와 bgcolor에 속성값을 넣어주어 사용한다.

 

 

 

수행결과

태그 바디에 적은 내용이 <h1> 되고, 그 후 테이블이 border와 bgcolor 가 적용 된 채 수행된 것을 볼 수 있다.