코딩/JSP
JSP를 이용하여 상단바(Top Navigation Bar)를 만드는 방법
짱아아빠
2023. 5. 8. 12:47
반응형
안녕하세요! JSP를 이용하여 상단바(Top Navigation Bar)를 만드는 방법을 알아보겠습니다.
우선, 상단바를 만들기 위해 필요한 HTML 코드를 작성합니다. 다음은 간단한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Top Navigation Bar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>이제 이 코드를 JSP로 변환합니다. 상단바는 모든 페이지에서 공통으로 사용될 수 있으므로, include 지시어를 사용하여 상단바를 별도의 파일로 분리합니다. 다음은 예시입니다.
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<style>
/* CSS 코드 생략 */
</style>
</head>
<body>
<jsp:include page="topnav.jsp" />
<h1>Hello, JSP!</h1>
<p>JSP를 사용하여 웹 페이지를 만들어보세요.</p>
</body>
</html>위 코드에서, `jsp:include` 지시어를 사용하여 `topnav.jsp` 파일을 포함시킵니다. `topnav.jsp` 파일에는 상단바 HTML 코드가 들어갑니다.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>이제 모든 JSP 페이지에서 상단바를 사용할 수 있습니다. 변경이 필요한 경우 `topnav.jsp` 파일만 수정하면 됩니다.
이상으로 JSP를 이용하여 상단바를 만드는 방법을 알아보았습니다.
반응형