이렇게 메인 화면을 만들었습니다
맨 위와 맨 아래에 각각 header.tag와 footer.tag로 빼서
코드를 구현해보았습니다
header.tag 전체코드
<%@ tag language="java" pageEncoding="UTF-8"%>
<div class="container-fluid px-5 d-none d-lg-block topbar">
<div class="row gx-0 align-items-center">
<div class="col-lg-4 text-center text-lg-start mb-lg-0">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a href="#" class="text-muted me-2"> About Us</a><small> / </small>
</div>
</div>
<div class="col-lg-4 text-center d-flex align-items-center justify-content-center">
<small class="text-dark">BugSandwich</small>
</div>
<div class="col-lg-4 text-center text-lg-end">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<div class="dropdown">
<a href="#" class="dropdown-toggle text-muted mx-2" data-bs-toggle="dropdown"><small> Korean</small></a>
<div class="dropdown-menu rounded">
<a href="#" class="dropdown-item"> Korean</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-toggle text-muted ms-2" data-bs-toggle="dropdown">
<small><i class="fa fa-home me-2"></i> My Dashboard</small></a>
<div class="dropdown-menu rounded">
<!-- 장바구니 | 로그인 | 로그아웃 | 마이페이지 | 위시리스트 | 회원가입 -->
<a href="${pageContext.request.contextPath}/cartPage.do" class="dropdown-item"> My Cart</a>
<a href="${pageContext.request.contextPath}/loginPage.do" class="dropdown-item"> Login</a>
<a href="${pageContext.request.contextPath}/loginPage.do" class="dropdown-item"> Log Out</a>
<a href="${pageContext.request.contextPath}/myPage.do" class="dropdown-item"> My Page </a>
<a href="${pageContext.request.contextPath}/wishlistPage.do" class="dropdown-item"> Wish list</a>
<a href="${pageContext.request.contextPath}/joinPage.do" class="dropdown-item"> Sign Up</a>
</div>
</div>
</div>
</div>
</div>
</div>
<header class="container-fluid px-5 py-4 d-none d-lg-block">
<div class="row gx-0 align-items-center text-center">
<div class="col-md-4 col-lg-4 text-center text-lg-start">
<div class="d-inline-flex align-items-center">
<a href="index.jsp" class="navbar-brand p-0">
<h1 class="display-5 m-0 brand-logo">
<i class="fas fa-shopping-bag brand-icon me-2"></i>Ornably
</h1>
</a>
</div>
</div>
<!-- 가운데 메뉴 -->
<nav class="col-lg-5 d-none d-lg-flex gap-4">
<a class="text-muted fw-medium text-decoration-none wow fadeInRight"
data-wow-delay="0.7s" href="${pageContext.request.contextPath}/mainPage.do">
HOME
</a>
<a class="text-muted fw-medium text-decoration-none wow fadeInRight"
data-wow-delay="0.7s" href="${pageContext.request.contextPath}/ornamentListPage.do">
SHOP
</a>
</nav>
<!-- 맨 왼쪽 메뉴 -->
<div class="col-md-4 col-lg-3 d-flex justify-content-end align-items-center">
<div class="d-inline-flex align-items-center">
<a href="index.jsp" class="text-muted d-flex align-items-center justify-content-center">
<i class="fa fa-home me-2 fa-2x"></i>
</a>
<a href="myPage.jsp" class="text-muted d-flex align-items-center justify-content-center">
<i class="fas fa-user-circle fa-2x"></i>
</a>
<a href="cart.jsp" class="text-muted d-flex align-items-center justify-content-center">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</div>
</header>
이렇게 WEB-INF 폴더 안에 tags 폴더를 생성하고
그 안에 header.tag와 footer.tag 파일을 만들었습니다
tag는 jsp 파일에서 호출해서 사용할 수 있는데
<%@ taglib tagdir="/WEB-INF/tags" prefix="ornably"%>
🔼 이렇게 taglib로 가져올 태그의 dit을 설정하고 어떤 이름으로 사용할지 prefix를 선언합니다
tag를 출력하려는 부분에서
<!-- header 태그 호출 -->
<ornably:header />
이렇게 호출하면 태그에 적은 내용이 그대로 출력됩니다
footer.tag 전체코드
<%@ tag language="java" pageEncoding="UTF-8"%>
<!-- Footer Start -->
<div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.2s">
<div class="container py-5">
<div class="row g-4 rounded mb-5" style="background: rgba(255, 255, 255, .03);">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="rounded p-4">
<div class="rounded-circle d-flex align-items-center justify-content-center mb-4"
style="width: 70px; height: 70px; background-color: #cccccc;">
<i class="fas fa-map-marker-alt fa-2x" style="color: #ffffff;"></i>
</div>
<div>
<h4>Address</h4>
<p class="mb-2">서울 강남구 테헤란로 146 현익빌딩 3, 4층</p>
</div>
</div>
</div>
</div>
<!-- Footer Start -->
<div class="container-fluid footer-dark py-5">
<div class="container py-5">
<div class="row g-4">
<!-- SHOP GUIDE -->
<div class="col-md-4">
<h5 class="footer-title">SHOP GUIDE</h5>
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">쇼핑몰이용약관</a>
<a href="#">개인정보취급방침</a>
</div>
<!-- BANK INFO -->
<div class="col-md-4">
<h5 class="footer-title">BANK INFO</h5>
<p>버그 은행</p>
<p>예금주 : (주)버그샌드위치</p>
</div>
<!-- SHOPPINGMALL INFO -->
<div class="col-md-4">
<h5 class="footer-title">SHOPPINGMALL INFO</h5>
<p>BugSandwich</p>
<p>김유진 변희인 정송이 허완</p>
<p>코이라IT아카데미 강남점 : 02-538-0021</p>
<div class="social-icons mt-2">
<!-- 인스타그램 -->
<a href="https://www.instagram.com/koreaitacademy_/">
<i class="fab fa-instagram"></i>
</a>
<!-- 홈페이지 -->
<a href="https://gangnam.koreaisacademy.com/?n_media=27758&n_query=%EC%97%AD%EC%82%BC%EC%97%AD%EC%BD%94%EB%A6%AC%EC%95%84%EC%95%84%EC%B9%B4%EB%8D%B0%EB%AF%B8&n_rank=3&n_ad_group=grp-a001-01-000000029713192&n_ad=nad-a001-01-000000366154510&n_campaign_type=1&n_ad_group_type=1&n_match=2&NaPm=ct%3Dmj9foc5i%7Cci%3DERdf631276%2Ddaf5%2D11f0%2D97ca%2D9e1e83eae971%7Ctr%3Dsa%7Chk%3Daaa4560e7d2e29cdc929d161f14a277b18a62881%7Cnacn%3Di5ZqBwArrpUl">
<i class="fas fa-home"></i>
</a>
<!-- 네이버 -->
<a href="https://blog.naver.com/koreaisit">
<i class="fas fa-globe"></i>
</a>
<!-- 유튜브 -->
<a href="https://www.youtube.com/@koreaitacademy_">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12 text-center text-light small">
평일운영시간: 09:00am - 06:00pm / 브레이크타임: 12:00pm - 01:00pm
</div>
</div>
</div>
</div>
<!-- Footer End -->
</div>
</div>
<!-- Footer End -->
<!-- Copyright Start -->
<div class="container-fluid copyright py-4">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-md-6 text-center text-md-start mb-md-0">
<span>
<a href="#">
<i class="fas fa-copyright me-2"></i>Your Site Name
</a>, All right reserved.
</span>
</div>
<div class="col-md-6 text-center text-md-end text-white">
<!--/*** This template is free as long as you keep the below author’s credit link/attribution link/backlink. ***/-->
<!--/*** If you'd like to use the template without the below author’s credit link/attribution link/backlink, ***/-->
<!--/*** you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". ***/-->
Designed By <a class="border-bottom text-white" href="https://htmlcodex.com">HTML Codex</a>.
Distributed By <a class="border-bottom text-white" href="https://themewagon.com">ThemeWagon</a>
</div>
</div>
</div>
</div>
<!-- Copyright End -->
<!-- Back to Top -->
<a href="#" class="btn btn-lg-square back-to-top"><i class="fa fa-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</html>
이렇게 footer 태그도 만들었고
header.tag와 똑같이 호출하여 사용하면 됩니다
'🎅 오너먼트 프로젝트' 카테고리의 다른 글
| 결제 API (with 페이 디벨롭퍼) (0) | 2025.12.28 |
|---|---|
| 주소를 로그하지 못하였습니다 (0) | 2025.12.27 |
| 상품 상세 보기에서 "바로 구매" 시 빈문자열로 넘어오는 a태그 (0) | 2025.12.24 |
| JDBC 오너먼트 프로젝트용 계정 생성하고 사용해보기 (0) | 2025.12.22 |
| 장바구니 페이지를 AJAX로 수량 변경, 삭제, 총액 업데이트 진행하기 (0) | 2025.12.18 |