카테고리 없음

[여행 커뮤니티 만들기 (2)] 헤더(header) + 네비(navigation) + 푸터(footer) with JSP

Evolving Developer 2023. 9. 28. 11:08

✅ 만들 페이지

✅ 목표

  1. 헤더 / 네비 / 푸터는 각자 다른 jsp 파일로 만들고 하나로 합친다.
    • header.jsp
    • navigation.jsp
    • footer.jsp
    • base.jsp -> 헤더 + 네비 + 푸터
  2. 동적 페이지를 위해 px보다는 %로 넓이 혹은 마진 등을 설정한다.

✅ header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <style>
        /* 기본 여백 제거 */
        body {
            margin: 0;
        }
        
        header {
            display: flex; /* 두 div가 한 줄에 공존 */
            justify-content: space-between; /* 서비스 이름과 환영 메세지 사이 공백 */
            align-items: center;
            padding: 10px;
            background-color: #333;
            color: white;
        }

        /* 왼쪽 서비스 이름 스타일 */
        .service-name {
            font-size: 24px;
            font-weight: bold;
        }

        /* 오른쪽 환영 메시지 스타일 */
        .welcome-message {
            font-size: 16px;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<header>
    <div class="service-name"> TT | Travel Together </div>
    <div class="welcome-message">조유진님, 반갑습니다!</div>
</header>
</body>

✅ navigation.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<style>
    /* 네비게이션 바 스타일 */
    nav {
        position: fixed;
        top: 50px; /* 헤더의 높이만큼 여백 추가 */
        left: 0;
        width: 18%; /* 화면 너비의 18%로 설정 */
        height: 100%; /* 화면 전체 높이에 맞추세요. */
        background-color: #333;
        color: white;
        overflow-y: auto; /* 네비게이션 바 내용이 화면을 벗어날 경우 스크롤 바 추가 */
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        margin-top: 15%;
        padding: 0;
    }

    nav ul li {
        margin: 10px 0;
    }

    nav ul li a {
        display: block;
        text-decoration: none;
        color: white;
        font-weight: bold;
        padding: 10px;
    }

    /* 네비게이션 바 hover 스타일 */
    nav ul li a:hover {
        background-color: #555;
    }

    .child-title {
        margin-left: 10%;
        padding: 5px;
    }
</style>

<nav>
    <ul>
        <li><a href="">어디로 여행을 떠날까요?</a></li>

        <li><a href="">커뮤니티</a></li>
        <li><a href="" class="child-title">같이 여행 가요!</a></li>
        <li><a href="" class="child-title">여행에 대해 궁금해요.</a></li>

        <li><a href="">나의 여행</a></li>
        <li><a href="" class="child-title">곧 여기로 떠나요!</a></li>
        <li><a href="" class="child-title">이 여행지에 관심있어요.</a></li>

        <li><a href="">마이 페이지</a></li>
        <li><a href="" class="child-title">나의 '같이 여행 가요!'</a></li>
        <li><a href="" class="child-title">나의 '여행에 대해 궁금해요.'</a></li>
    </ul>
</nav>

✅ footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<style>
    /* 푸터 스타일 */
    footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #333;
        color: white;
        padding: 10px;
    }

    p {
        margin: 5px 0; /* 위아래 마진을 5px로 설정 */
    }

    /* 왼쪽 컨텐츠 스타일 */
    .left-content {
        text-align: left;
        margin-right: auto; /* 오른쪽으로 공백을 주기 위해 추가 */
    }

    /* 오른쪽 컨텐츠 스타일 */
    .right-content {
        text-align: right;
        margin-left: auto; /* 왼쪽으로 공백을 주기 위해 추가 */
        padding-right: 5%; /* 오른쪽 여백 추가 */
    }

    .right-a {
        text-decoration: underline; /* 밑줄 추가 */
        color: white; /* 텍스트 색상 설정 */
    }

</style>
<footer>
    <div class="left-content">
        <p>TT | Travel Together</p>
        <p>writer | YOUJIN CHO</p>
        <p>email | topjoy22@naver.com</p>
    </div>
    <div class="right-content">
        <a href="#" class="right-a"><p>저희 사이트를 평가해주세요!</p></a>
    </div>
</footer>

 

✅ base.jsp

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

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>헤더 + 네비 + 푸터</title>

<style>
    .content {
        margin-left: 20%; /* 네비게이션 바의 넓이와 일치하도록 설정 */
        padding: 20px; /* 적절한 여백 */
    }
</style>

<body>
    <div class="content">
        <h2>페이지 내용</h2>
        <p>이 페이지의 내용을 작성합니다.</p>
    </div>
</body>
</html>
<%@ include file="footer.jsp" %> <!-- 푸터를 포함 -->

✅ 결과

저작자표시 (새창열림)