본문 바로가기
My Proect/파이널 프로젝트 - CineDate

11일차 - 헤더, 이미지 슬라이드 화면 구현

형디 2024. 9. 3. 12:38

 

 

header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CineDate</title>
<link href="/css/common.css" rel="stylesheet">
<link href="/css/header.css" rel="stylesheet">
<link href="/css/font.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="/css/footer.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>

	<header>
        <div class="memberInfo--wrap">
            <ul class="member" id="in--wrap">
                <c:choose>
					<c:when test="${principal != null}">
						<li><a href="/user/logout"><span>로그아웃</span></a></li>			
						<li><a href="/user/myPage"><span>마이페이지</span></a></li>
						<li><a href="/home/CS"><span>고객센터</span></a></li>
					</c:when>
					
					<c:otherwise>
						<li><a href="/user/signIn"><span>로그인</span></a></li>
						<li><a href="/user/signUp"><span>회원가입</span></a></li>
						<li><a href="/home/CS"><span>고객센터</span></a></li>
					</c:otherwise>
				</c:choose>
                
                <form action="/search/search" method="GET" class="main--total--search">
                    <label class="main--search"></label>
                        <input type="text" id="main--search" name="search">
                    
                    <button type="submit" class="search--btn btn"></button>
                </form>
            </ul>
        </div>
        <div class="header--logo"><a href="/home"><img src="/img/logo.png" alt="CineDate Logo"></a></div>
        <nav class="nav--wrap" id="in--wrap">
            <ul class="nav--menu">
                <li><a href="/movie/movies">영화</a></li>
                <li><a href="/cinema/cinema">극장</a></li>
                <li><a href="/reservation/reservation">예매</a></li>
                <li class="date"><a href="/date/date">매칭</a></li>
                <li><a href="/event/event">이벤트</a></li>
                <li><a href="/notice">공지사항</a></li>

                <ul class="mobile--wrap btn">
                    <!-- 햄버거 메뉴 추가 예정 -->
                </ul>
            </ul>
        </nav>
    </header>

 

 

 

main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- header.jsp -->
<%@ include file="/WEB-INF/view/layout/header.jsp"%>

<div id="wrap">

	<main>
		<!-- Swiper -->
		<div class="swiper mySwiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="/img/imgSlide1.jpg">
				</div>
				<div class="swiper-slide">
					<img src="/img/imgSlide2.jpg">
				</div>
				<div class="swiper-slide">
					<img src="/img/imgSlide3.jpg">
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>

		<!-- Swiper JS -->
		<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

		<!-- ImageSlide Swiper -->
		<script>
			var swiper = new Swiper(".mySwiper", {
				spaceBetween : 30,
				centeredSlides : true,
				autoplay : {
					delay : 2000,
					disableOnInteraction : false,
				},
				pagination : {
					el : ".swiper-pagination",
					clickable : true,
				},
				navigation : {
					nextEl : ".swiper-button-next",
					prevEl : ".swiper-button-prev",
				},
			});
		</script>
	</main>

</div>

<!-- footer.jsp  -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>

</body>
</html>

 

 

header.css
@charset "UTF-8";

header {
	width: 100%;
	position: relative;
	border-bottom: 1px solid #bababa;
}

.memberInfo--wrap {
	width: 100%;
}

.member {
	display: flex;
	justify-content: flex-end;
	height: 50px;
	align-items: center;
	gap: 15px;
	font-size: 14px;
}

.header--logo {
	width: 100%;
	height: 70px;
	border-top: 1px solid #bababa;
	border-bottom: 1px solid #bababa;
	padding: 10px 0;
	text-align: center;
}

.main--total--search {
	display: flex;
	align-items: center;
}

.search--btn {
	width: 25px;
	height: 25px;
	background-image: url("/img/search.png");
	background-size: contain;
	background-color: initial;
	border: 0;
	margin-left: 5px;
}

label.main--search {
	margin: 0;
}

#main--search {
	padding: 3px 12px;
	border-radius: 15px;
	border: 1px solid #666;
	width: 150px;
}

.date{
	color: #ff2588;
    font-weight: 600;
    position: relative;
}

.date::before {
    content: "💕";
    color: #ff2588;
    position: absolute;
    right: -20px;
    top: -7px;
    transform: rotateZ(20deg);
}

.date:hover{
	cursor: pointer;
}

.nav--menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
}

.mobile--wrap {
	width: 25px;
	height: 25px;
	background-image: url(/img/mMenu.png);
	background-size: contain;
}

 

728x90

'My Proect > 파이널 프로젝트 - CineDate' 카테고리의 다른 글

14일차 - 이메일 인증 구현 에러  (0) 2024.09.05
12일차 - 메인 페이지에서의 검색 기능 구현 및 배너  (4) 2024.09.03
10일차 - 소셜 로그인 API 구현 ( 구글, 네이버, 카카오 )  (2) 2024.09.03
8일차 - 아이디, 비밀번호 찾기 화면 및 기능 구현  (3) 2024.09.02
5일차 - 회원가입 기능 구현  (2) 2024.09.02

'My Proect/파이널 프로젝트 - CineDate' Related Articles

티스토리툴바