[JSP] 26. JSP 주석과 지시자

2024년 07월 04일

Song hyun
작성자
2024.07.04.:48

728x90

[JSP] 26. JSP 주석과 지시자

1. JSP 주석

-JSP 주석은 JSP 페이지 내에서 주석을 작성할 때에 사용된다. 주석은 JSP 페이지를 해석할 때 무시되며, 최종 HTML 페이지에 포함되지 않는다. JSP에는 HTML, JSP, Java 주석이 있다.

(1) HTML 주석: 최종 HTML 페이지에 포함되며, 브라우저에서 볼 수 있다.

<!-- --!>

(2) JSP 주석: JSP 페이지를 해석할 때 무시되며, 최종 HTML 페이지에 포함되지 않는다.

<%-- --%>

(3) Java 주석 : 스크립트 릿, 선언, 표현식 등 Java 코드 내부에서 사용된다.

<% %>

2. JSP 지시자

-페이지 지시자는 JSP 페이지의 전체 설정을 지정한다. 예를 들어, 페이지의 인코딩, import 문, 에러 페이지와 같다.

(1) include 지시자

-include 지시자는 다른 JSP 파일을 현재 JSP 파일에 포함시킨다. 이는 정적 포함 방식으로, 컴파일시 포함된다.

<%@ include file="header.jsp" %>

3. 시나리오 코드

(1) 시간에 따라 색상이 변하는 사이트 만들어보기

<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 기본 태그 예제</title>
</head>
<body>
	<h1>JSP 기본 태그 예제</h1>
	<%-- 스크립트 릿: 현재 시간을 java 코드로 가져와서 출력해보자. --%>
	<p>현재 시간 : <% 
		java.util.Date now=new java.util.Date();
		// 한국 시간 형식으로 포맷 설정하기
		java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String formattedDate = sdf.format(now);
		out.println(formattedDate);
	%>
	</p>
	
	<%--표현식: 임의의 숫자를 생성하여 출력 --%>
	<p>임의의 숫자 : <%= new Random().nextInt(100)%></p>
	
	<%--표현식: 사용자 정의 메서드 출력 --%>
	<p><%= getWelcomeMessage("홍길동- 허균") %></p>
	
	<%--선언문: 사용자 정의 메서드 선언 --%>
	<%!
		public String getWelcomeMessage(String name){
			return "환영합니다. "+name+"!!!";
	}
	%>
	
	<%
		Integer visitCount=(Integer)application.getAttribute("visitCount");
		if(visitCount==null){
			visitCount=1;
		} else{
			visitCount+=1;
		}
		
		application.setAttribute("visitCount", visitCount);
	%>
	
	<p> 현재 페이지 방문 횟수 : <%=visitCount %></p>
	
	<%
		int second=new java.util.Date().getSeconds();
		String bgColor;
	
		if(second<20){
			bgColor="#FFDDC1";
		} else if(second<40){
			bgColor="#FFFFC1";
		} else {
			bgColor="#C1FFC1";
		}
	%>
	
	<style>
		body{
			background-color: <%=bgColor%>;
		}
	</style>
	
</body>
</html>

(2) 기본 코드 활용해 홈페이지 간단하게 만들어보기

(1) header.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="styles.css">
</head>
<body>
	<header class="header">
		<h1>즐거우리 우리네 웹개발</h1>
		<h3>와! 정말 신난다!</h3>
		<nav>
			<ul class="list">
				<li><button class="aaa"><a href="home.jsp">홈</a></button></li>
				<li><button class="aaa"><a href="about.jsp">소개</a></button></li>
				<li><button class="aaa"><a href="contact.jsp">연락처</a></button></li>
			</ul>
		</nav>
	</header>

(2) home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>
<%@ page import="java.util.Date" %>

<div class="home">
	<h1>JSP 지시자 예제</h1>
	<p> 현재 시간 <%=new Date() %> </p>
	<img src = "a.jpg" alt = "얍ㅋ">
</div>



<%@ include file="footer.jsp" %>

(3) footer.jsp

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

		<footer class="footer">
			<p>공통 푸터 &copy; 2024</p>
		</footer>

	</body>
</html>

-about

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>소개</title>
<style>
	body{
		font-family: 궁서체;
		text-align: center;
		margin: 20px;
		background-color:white;
		border-radius:2px;
	}
</style>
</head>
<body>
	<div class="main">
		<h1>History of Web development...</h1>
		<button class="button"><a href="home.jsp">Back</a></button>
	</div>
	<div>
		<p>The rise of the internet within mainstream culture is largely correlated with its history as a visual medium. Like many other computer systems and applications, it took a graphic interface to get the general population to start to understand the internet’s potential. The personal computer would not have proliferated throughout our households and work environments without the display monitor, and still did not become widely used until electronic spreadsheets, word processors and video games started attracting users. Similarly, users did not start buying into the World Wide Web until the visual-oriented web browser started coming into its own in the early 1990s. And since that time, even though there have been dramatic improvements in web technology and aesthetics, some of the earliest web design techniques have persevered throughout the years.</p>
	</div>
	<div>
		<h1>The Old Web</h1>
		<p>The idea of the internet had existed in some form for at least a half a century before it finally became a common household utility in the 1990s. Conceived in the 1980s, the World Wide Web gained significant traction with the introduction of the Mosaic browser in 1993. Shortly thereafter, businesses began recognizing the web’s commercial potential, as network infrastructure grew to accommodate what would prove to be a massive influx of online activity. Then the tech bubble grew and burst, the survivors of which (Google, Amazon and the like) went from being key tech influencers to veritable corporate giants within about a decade.</p>
		<p>In 1989, Tim Berners-Lee (then a fellow at the CERN Laboratory in Europe) outlined his concept of a computer platform that could facilitate collaboration among researchers who are based in different parts of the world. This led to the invention of the Hypertext Markup Language (HTML) in 1990. Strongly based on the Standard Generalized Markup Language (SGML), HTML became the fundamental building block of the World Wide Web, and remains at the core of its coding and infrastructure. The standard enabled coders with the ability to organize web page layouts that could be understood and interacted with over interconnected networks. (For more on the development of the web, see The 6 Programming Languages That Built the Internet.)</p>	
	</div>
</body>
</html>

-contact

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연락처</title>
<style>
	body{
		font-family: 궁서체;
		text-align: center;
		margin: 20px;
		background-color:white;
		border-radius:2px;
	}
</style>
</head>
<body>
	<h1 class="title">연락처: 010-1111-2222</h1>
	<button class="submit"><a href="home.jsp">Back</a></button>
</body>
</html>

728x90

'JSP > 기본 이론' 카테고리의 다른 글

[JSP] 28. JSP 지시자 (Directive) (0)	2024.07.04
[JSP] 27. 센치미터-인치 변환 페이지 만들어보기 (0)	2024.07.04
[JSP] 25. JSP와 HTML을 사용해 계산기 만들기 (0)	2024.07.04
[JSP] 24. JSP와 HTML을 사용해 인사말 생성기 만들기 (0)	2024.07.04
[JSP] 23. JSP 기초 문법 (0)	2024.07.03

다음 글이 없습니다.

이전 글이 없습니다.

[JSP] 26. JSP 주석과 지시자

'JSP > 기본 이론' 카테고리의 다른 글

티스토리툴바