728x90
반응형
Header 코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title>구직사이트</title>
<link rel="icon" href="/images/favicon.png" type="image/x-icon">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<script src="https://kit.fontawesome.com/32aa2b8683.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container-fluid">
<div style="height: 50px">
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<a class="nav-link" href="#"><i class="bi bi-list"></i></a>
<li class="nav-item">
<a class="nav-link text-dark pt-1" href="/main"><img
src="/images/projectLogo.png" alt=""
style="width: 100px; height: 30px;"></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/recruitment/list">채용</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/resumeMain">이력서</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/community">커뮤니티</a>
</li>
</ul>
<ul class="navbar-nav m-auto">
<a class="nav-link" href="#"><i class="bi bi-search"></i></a>
<c:choose>
<c:when test="${not empty principal or not empty principalEnt}">
<!-- 세션에 principal 또는 principalEnt 중 하나 이상이 존재하는 경우 -->
<li class="nav-item">
<a class="nav-link text-dark" href=""><i class="bi bi-bell"></i></a>
</li>
<li class="nav-item">
<a href="/logout"><img src="/images/profile.png" style="width: 35px;"
class="rounded-circle" alt="Cinque Terre"></a>
</li>
</c:when>
<c:otherwise>
<!-- 세션에 principal 또는 principalEnt가 존재하지 않는 경우 -->
<li class="nav-item">
<a class="nav-link text-dark" href="/loginForm">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/joinForm">회원가입</a>
</li>
</c:otherwise>
</c:choose>
</ul>
</div>
</div>
</nav>
</div>
</div>
<hr class="my-1">
</header>
html head 안에 cdn 라이브러리를 담는다.
이때 주의할 점은 cdn 라이브러리가 다른 파일보다 먼저 로드된다면,
다른 파일들이 cdn 라이브러리에 의존하는 경우, 제대로 작동하지 않을 수 있다는 것이다.
그렇기 때문에 jQuery같이 Ajax 통신을 위해 필요한 라이브러리 같은 경우,
head의 아래쪽에 배치해서, 나중에 로드되도록 하는 것이 좋다.
구인구직 사이트를 만들 때, 개인회원과 기업회원의 인증이 세션에 각각 저장되도록 설정해놓았다.
그래서 아래와 같은 코드를 작성해서 세션값이 없거나, null일 경우, 메뉴가 다르게 보이도록 만들 수 있다.
<c:when test="${not empty principal or not empty principalEnt}">
</c:when>
*CDN이란?
CDN은 Contents Delivery Network의 준말로서, 분산된 여러 개의 서버에서 데이터를 저장하여 사용자에게 전송하는 시스템이다. CDN은 사용자와 물리적 위치와 가까운 프록시 서버에서 데이터를 사용자에게 전송한다. 이렇게 되면 효율성 있게콘텐츠의 전송 속도를 높일 수 있다.
Footer 코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<footer>
<div class="container-fluid" style="height: 150px;">
<nav class="navbar navbar-expand-sm">
<div class="collapse navbar-collapse my_nav" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href="#">기업소개</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">이용약관</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">고객센터</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">개인정보 처리방침</a>
</li>
</ul>
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-google"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-github"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-twitter"></i></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-youtube"></i></a>
</li>
</ul>
</div>
</nav>
<hr class="my-1">
<div class="row">
<div class="d-flex justify-content-center p-2">
부산광역시 부산진구 중앙대로 688 한준빌딩 3층
</div>
<div class="d-flex justify-content-center p-2">
051-912-1000
</div>
<div class="d-flex justify-content-center p-2">
© 5thlab, Inc.
</div>
</div>
</div>
</footer>
</body>
</html>
728x90
반응형