JSP(JavaServer Pages)에서는 다양한 스크립트 요소를 사용할 수 있습니다. 스크립트 요소는 JSP 페이지에서 Java 코드를 사용할 수 있도록 해주는 요소입니다. 이러한 스크립트 요소를 사용하면 JSP 페이지에서 동적으로 HTML을 생성하거나, 데이터베이스와 연동하여 데이터를 처리할 수 있습니다. 아래는 JSP에서 사용할 수 있는 스크립트 요소와 간단한 설명입니다.
- 스크립트릿(scriptlet)
- <% %> 태그로 표현합니다.
- JSP 페이지에서 Java 코드를 실행할 수 있습니다.
- HTML과 Java 코드를 혼합하여 사용할 수 있습니다.
- 표현식(expression)
- <%= %> 태그로 표현합니다.
- JSP 페이지에서 Java 코드의 결과 값을 출력할 수 있습니다.
- 출력할 값이 null인 경우, 빈 문자열이 출력됩니다.
- 선언(declaration)
- <%! %> 태그로 표현합니다.
- JSP 페이지에서 전역 변수, 메서드, 클래스 등을 선언할 수 있습니다.
- 스크립트릿과는 달리, JSP 페이지에서 직접 호출할 수 없습니다.
- 주석(comment)
- <%-- --%> 태그로 표현합니다.
- JSP 페이지에서 주석을 작성할 수 있습니다.
- 브라우저에서는 출력되지 않습니다.
css —> commom.css
@charset "UTF-8";
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 웹 폰트 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
/*폰트 적용하기*/
body {
font-family: 'Noto Sans KR', sans-serif;
}
/*ul 태그 초기화*/
ul {
display: flex;
margin: 0;
padding: 30px;
list-style: none;
background-color: #f5f5f5;
justify-content: center;
align-items: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
ul li {
margin-top: 15px;
margin-right: 15px;
border: 1px solid #f5f5f5;
padding: 15px;
border: 1px solid gray;
border-radius: 10px;
}
ul li a {
color: #333;
text-decoration: none;
font-size: 16px;
}index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 스크립트 연습</title>
<link rel="stylesheet" href="/demo3/css/common.css">
</head>
<body>
<nav>
<ul>
<li><a href="/demo3/tag1.jsp">JSP 스크립트 1</a></li>
<li><a href="/demo3/tag2.jsp">JSP 스크립트 2</a></li>
<li><a href="/demo3/tag3.jsp">JSP 스크립트 3</a></li>
<li><a href="/demo3/tag4.jsp">JSP 스크립트 4</a></li>
<li><a href="/demo3/tag5.jsp">JSP 스크립트 5</a></li>
</ul>
</nav>
</body>
</html>코드 분리 및 재활용 해보기
지시어 (directive)
<%@ include file="파일경로" %>액션 active
<jsp:includ page="파일경로">header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 스크립트 연습</title>
<link rel="stylesheet" href="/demo3/css/common.css">
</head>
<body>
<nav>
<ul>
<li><a href="/demo3/tag1.jsp">JSP 스크립트 1</a></li>
<li><a href="/demo3/tag2.jsp">JSP 스크립트 2</a></li>
<li><a href="/demo3/tag3.jsp">JSP 스크립트 3</a></li>
<li><a href="/demo3/tag4.jsp">JSP 스크립트 4</a></li>
<li><a href="/demo3/tag5.jsp">JSP 스크립트 5</a></li>
</ul>
</nav>footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<br>
<footer>
<pre>
JSP란 (Java Server Pages)
웹 컨테이너(WAS) 안에 동적 컴파일 과정은
xxx_jsp -> xxx_jsp.java -> xxx_jsp.class -> xxx_jsp.obj
ⓒ Tenco Corp.
</pre>
</footer>css
@charset "UTF-8";
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 웹 폰트 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
/*폰트 적용하기*/
body {
font-family: 'Noto Sans KR', sans-serif;
}
/*ul 태그 초기화*/
ul {
display: flex;
margin: 0;
padding: 30px;
list-style: none;
background-color: #f5f5f5;
justify-content: center;
align-items: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
ul li {
margin-top: 15px;
margin-right: 15px;
border: 1px solid #f5f5f5;
padding: 15px;
border: 1px solid gray;
border-radius: 10px;
}
ul li a {
color: #333;
text-decoration: none;
font-size: 16px;
}
footer {
height: 200px;
background-color: #f5f5f5;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
footer pre {
font-size: 16px;
font-weight: bold;
font-family: 'NanumBarunGothic', 'serif';
}index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/layout/header.jsp"/>
<style>
main {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<main>
여기는 index.jsp 파일 입니다.
</main>
<jsp:include page="/layout/footer.jsp"/>'JSP' 카테고리의 다른 글
| JSP 스크립트 2 (0) | 2023.04.06 |
|---|---|
| Servelet with Form 데이터 처리 (0) | 2023.03.27 |
| Servlet Life-Cycle (0) | 2023.03.27 |
| Servlet mapping (0) | 2023.03.27 |
| JSP 와 Servlet 개념 (0) | 2023.03.27 |