2023. 10. 23 (월) / Day 96

카테고리 없음

2023. 10. 23 (월) / Day 96

backandfrontdeveloper 2023. 10. 23. 16:33

728x90

오늘은 파일들을 다 jsp로 옮기고 연결하고, 페이징 처리를 하고 헤더를 붙이고 풋터도 붙였다.

JSP

문의하기 메인 페이지


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문의하기 메인페이지</title>
<!-- 헤더 파일 포함시키기 -->
<%@ include file="Header.jsp" %>

<style>
body {
	margin: 0;
	height: 1100px;
	font-family: 'Cafe24Supermagic-Bold-v1.0';
}
/* 헤더 */
@font-face {
	font-family: 'Cafe24Supermagic-Bold-v1.0';
	src:
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2')
		format('woff2');
	font-weight: 700;
	font-style: normal;
}

body {
	font-family: 'Cafe24Supermagic-Bold-v1.0';
}

.btn {
	font-family: 'Cafe24Supermagic-Bold-v1.0';
}

#title {
	display: inline-block;
	width: 45%;
	font-size: 80px;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: -50px;
}

#title img {
	height: 150px;
}

#icons {
	position: absolute;
	width: 20%;
	display: flex;
	top: 70px;
	right: 10%;
	justify-content: space-around;
}

.icon {
	width: 40px;
	height: 40px;
}

.icon img {
	width: 100%;
	height: 100%;
}

.icon .btn {
	background-color: #5E5E5E;
	color: white;
	width: 100px;
	height: 40px;
	font-size: medium;
	border-radius: 5px;
	border: 1px solid white;
}

/* 서브메뉴선택 */
* {
	padding: 0;
	margin: 0;
}

/* 메뉴바 부분 작성 */
.menu {
	width: 340px;
	/* overflow: hidden; */
	/* margin: 150px auto; */
}

.menu>li {
	/* width: 20%; */
	/* 20*5=100% */
	/* float: left; */
	text-align: center;
	line-height: 40px;
	background-color: #fff;
}

.menu a {
	color: black;
}

.main_menu a {
    color: black;
    text-decoration: none;
}

.main_menu a:hover {
    text-decoration: none;
}

.submenu>li {
	line-height: 50px;
	/* border: 1px solid rgb(218, 241, 225); */
}

.submenu>li :hover {
	line-height: 50px;
	border-bottom: 2px solid rgb(89, 236, 133);
}

.submenu {
	height: 0;
	/*ul의 높이를 안보이게 처리*/
	overflow: hidden;
	/* border-radius: 10px; */
}

/* hover했을때 */
.menu>li:hover {
	border: 1px solid rgb(218, 241, 225);
	transition-duration: 0.5s;
	border-radius: 10px;
	background-color: white;
	position: relative;
	z-index: 1;
}

.menu>li:hover .submenu {
	height: 250px;
	/*서브메뉴 li한개의 높이 50*5*/
	transition-duration: 1s;
}

.m1_1 img {
	width: 44px;
	display: block;
	margin: auto;
}

/*  */
.submenu.show, .submenu-below-hamburger.show {
	height: 250px;
}

.submenu:hover, .submenu-below-hamburger:hover {
	height: auto !important;
}

#hamburger-margin {
	width: 100%;
	height: 250px;
	display: none;
}

@media screen and (max-width: 700px) {
	.search {
		width: 400px;
		min-width: 0;
	}
}

@media screen and (max-width: 600px) {
	#top-header {
		text-align: left;
	}
	#title {
		margin-top: 10px;
		margin-left: 40px;
	}
	#title img {
		height: 120px;
	}
	.menu {
		font-size: 25px;
	}
}

.sticky {
	position: fixed;
	top: 230px;
	right: 20px;
	width: 200px;
}

/* 테이블 스타일 */
table {
	width: 100%;
}

th, td {
	padding: 8px;
}

th {
	background-color: #f1f1f1;
}

.tabs {
	display: flex;
	background-color: rgb(218, 241, 225);
	justify-content: center;
	margin-top: 10px;
}

.tab-button {
	background-color: rgb(218, 241, 225);
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	margin: 0 10px;
	cursor: pointer;
}

.content {
	display: none;
	margin-top: 20px;
}

#writeButton {
	display: block;
	margin-top: 10px;
}

h1 {
	font-size: 30px;
	color: black;
	text-transform: uppercase;
	font-weight: 300;
	text-align: center;
	margin-bottom: 15px;
}

table, tr, th {
	border: 1 solid black;
	width: 800px;
}

.container1 {
	display: flex;
	justify-content: center;
	align-items: flex-end; /* 아래 정렬을 위해 추가 */
	height: 500%; /* 높이 조정을 위해 추가 */
	font-size: xx-large;
}

.big {
	width: 800px;
	text: left;
	display: flex;
	justify-content: left;
	align-items: center; /* 중앙 정렬을 위해 추가 */
	height: 400px; /* 높이 조정을 위해 추가 */
}

.bigimg {
	width: 800px;
	height: 400px;
}

p {
	/* 수평 중앙 정렬하기 */
	text-align: center;
}

.btn {
	border: solid 2px rgba(174, 223, 189, 0.988);
	background-color: white;
	color: black;
	border-radius: 10px;
	width: 200px;
	height: 65px;
	font-size: xx-large; /* 폰트크기 */
	padding: 10px 28px;
}

.sticky {
	position: fixed;
	font-family: 'Cafe24Supermagic-Bold-v1.0';
	top: 250px;
	right: 20px;
	width: 180px;
}

.h20 {
	font-size: 4ch;
}

.two {
	font-size: 3em;
}

/* 테이블 스타일 */
table {
	width: 100%;
}

th, td {
	padding: 8px;
}

th {
	background-color: rgb(218, 241, 225);
}

hr {
	border-radius: 5px;
	margin: 20px;
}

.end {
	font-size: medium;
}

.main_menu {
	padding-top: 30px;
	margin: 0 auto;
	width: 70%;
	display: flex;
	justify-content: space-around;
	font-size: 30px;
}

.main_menu .menu_1 {
	text-align: center;
	width: 100%;
	border-bottom: solid 2px rgba(174, 223, 189, 0.988);
}

.main_menu .menu_2 {
	text-align: center;
	width: 100%;
	border-bottom: solid 2px rgba(174, 223, 189, 0.988);
}

.main_menu .menu_3 {
	text-align: center;
	width: 100%;
	border: solid 2px rgba(174, 223, 189, 0.988);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

body {
	margin: 0;
	font-family: 'Cafe24Supermagic-Bold-v1.0';
}

@font-face {
	font-family: 'Cafe24Supermagic-Bold-v1.0';
	src:
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2')
		format('woff2');
	font-weight: 700;
	font-style: normal;
}


a:visited {
	color: black;
}

a {
	text-decoration-line: none;
}
</style>
</head>
<body>






	<!-- Sticky 요소 -->
	<div class="sticky" style="background-color: white;">
		<table>
			<thead>
				<tr>
					<th>관련 서비스</th>
					<!-- th안에 hr태그 넣으면 줄넣어짐-->

				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1:1문의</td>
				</tr>
				<!--<tr><td><a href="1to1.html">1:1문의</a></td></tr> 이렇게 하면 링크 로감-->
				<tr>
					<td>내 문의 보기</td>
				</tr>
				<tr>
					<td>고객의 소리 접수</td>
				</tr>
				<tr>
					<td>주문내역/배송</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="conter">
		<nav>
			<div class="main_menu">
				<a class="menu_1"
					href="http://localhost:8080/Project_2/Notice_Main.jsp"> 공지사항 </a>
				<div class="menu_2">
					<a class="text"
						href="http://localhost:8080/Project_2/Notice_Main.jsp">
						자주묻는질문 </a>
				</div>
				<div class="menu_3">

					<a class="text"
						href="http://localhost:8080/Project_2/Contact_Us_main.jsp">
						문의하기</a>
				</div>
			</div>
		</nav>
		<hr style="border: inset 0px white;">
		<!-- <h2 class="h20" style="text-align: left; margin-left: 0; " >
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  문의사항</h2>
            &nbsp;&nbsp <hr width="1100px" style="border-radius:5px;"> -->

	</div>

	</div>
	<main>
		<form>
			<div class="container;">

				<br>
				<p id="two">
					<span style="font-size: larger;"><strong>상품이나 서비스에
							대한 문의 / 칭찬 / 제안 </strong> 사례를 접수하실 수 있습니다.</span> <br>
					<br> <strong><span style="font-size: 2em;">고객의
							소리 접수</span></strong> <br> <br>
					<br> 문의·제안·칭찬사항을 접수 할 수 있습니다. <br>
					<br> <br>


					<button class="btn" type="button">문의하기</button>
					<button class="btn" type="button">
						<a href="http://localhost:8080/Project_2/SuggestionWrite.jsp"> 제안하기 </a>
					</button>
					<button class="btn" type="button">
						<a href="http://localhost:8080/Project_2/Notice_Main.jsp">
							공지사항</a>
					</button>

				</p>
				<br> <br> <br>
				<div class="container1">
					<div class="big">
						<div class="bigimg">
							<table
								style="border: 1px solid gray; text-align: left; border-radius: 10px;">
								<tr>
									<br>
									<td><img class="img"
										src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROkIFEmlIWNb78hqj3iNqFMuDt4rxg_OhnLA&usqp=CAU">
									</td>
									<td style="vertical-align: top;"><br>
									<strong>자주하는 질문</strong> <br>
									<br>
										<h5>궁금하신 점이 있다면 FAQ에서 먼저 찾아보세요</h5></td>

									</div>

								</tr>
							</table>
							<br>
							<div class="end">
								· 고객센터(1588-1234)를 통해 빠른 상담도 가능합니다. <br> · 평일 09:00 ~ 18:00
								운영
							</div>
						</div>
					</div>
				</div>
			</div>
	</main>



	<script type='text/javascript'>
		function showContent(contentId) {
			// 모든 content 요소 숨김 처리
			let contents = document.getElementsByClassName("content");
			for (let i = 0; i < contents.length; i++) {
				contents[i].style.display = "none";
			}

			// 선택한 contentId에 해당하는 요소만 보여줌
			let selectedContent = document.getElementById(contentId);
			selectedContent.style.display = "block";
		}
	</script>
	
	</form>
<%@ include file="Footer.jsp" %>
</body>
</html>

JSP

문의사항 작성하기


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문의사항_작성하기</title>
<%@ include file="Header_nonsearch.jsp" %>
<style> 
/* 여기부터 수정 */
		/*헤더*/
		@font-face {
			font-family: 'Cafe24Supermagic-Bold-v1.0';
			src:
			url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2')
			format('woff2');
			font-weight: 700;
			font-style: normal;
		}


		body {
			font-family: 'Cafe24Supermagic-Bold-v1.0';
		}
		
		
			/* 여기까지 수정 */
		.outer {
			width: 800px;
			margin: auto;
		}


		.wrap {
			width: 780px;
			margin: 100px auto;
		}
		
		
		.textarea, .input_area {
			border-radius: 10px;
		}

	
		.notice_title {
			border-bottom: 3px solid rgb(218, 241, 225);;
		}


		.notice_content {
			padding: 0px 20px;
		}


		.notice_content .subject {
			height: 55px;
			line-height: 55px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f3f5f7;
		}


		.notice_content .content {
			height: 500px;
			overflow: auto;
			margin-bottom: 30px;
		}


		.title_span {
			background-color: #282A35;
		}

		.notice_area button {
			font-family: 'Cafe24Supermagic-Bold-v1.0';
			border-radius: 10px;
			/* 기본 배경색 및 글자색 설정 */
		
			color: black;
			/* Hover 효과 추가 */
			transition-duration: 0.3s; /* 전환 시간 설정 */
			cursor: pointer; /* 커서 모양 변경 */
		}


		.notice_area button:hover {
			background-color: rgb(220, 241, 218); /* Hover 시 배경색 변경 */
			color: black; /* Hover 시 글자색 변경 */
		}
				

		.btn_area {
			text-align: center;
			border-top: 1px solid #282A35;
			padding: 30px;
		}
		

		.middle {
			text-align: center;
		}		


		.input_area {
			border: solid 1px #dadada;
			padding: 10px 10px 14px 10px;
			background: white;
		}


		.input_area input {
			width: 700px;
			height: 30px;
			border: 0px;
		}


		.input_area input:focus {
			outline: none;
		}


		.textarea {
			resize: none;
			border: solid 1px #dadada;
		}


		.textarea:focus {
			outline: none;
		}


		.title_span {
			background-color: rgb(218, 241, 225);
		}


		.notice_area button {
			width: 100px;
			height: 35px;
			border: 1px solid rgb(190, 190, 190);
			color: black;
			
			margin: 5px;
		}


		.btn_area {
			text-align: center;
			border-top: 1px solid #282A35;
			padding: 30px;
		}
		

		.select {
			text-align: center;
		}
		
		#file {
  				display: none;
			}
			
			
		 	
        	.btn {
            font-family: 'Cafe24Supermagic-Bold-v1.0';
        }
       

       

       
		
</style>

</head>


<body>
	<form>
	<div class="outer">
		<div class="wrap">
			<div class="notice_area">
				<div class="notice_title">
					<h1>문의사항 작성하기</h1>



				</div>
				<div class="notice_content">
					<form action="${contextPath }/notice/insert" method="post">
						<div class="content">
							<h4>
								<span class="title_span">&nbsp;</span> 제목

							</h4>
							<span class="input_area"> <input type="text" name="title"
								required>
							</span>

							<h4>
								<span class="title_span">&nbsp;</span> 내용
							</h4>
							<textarea class="textarea" rows="20" cols="100" name="content"
								required></textarea>
						</div>
						<div class="middle">
							<button type="button" id="backButton">목록으로</button>
							<button type="submit">작성하기</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script>
		document.getElementById("backButton").addEventListener("click",
				function() {
					alert('목록으로 돌아갑니다.');
					// 여기에서 필요한 작업을 수행하세요.
				});

		document.querySelector("form").addEventListener("submit", function() {
			alert('글이 등록되었습니다.');
		});
	</script>
	
		
    </form>
    
<%@ include file="Footer.jsp" %>
</body>

</html>

JSP


공지사항 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공지사항 페이지 </title>.
<%@ include file="Header.jsp" %>
<style>
body {
    margin: 0;
    font-family: 'Cafe24Supermagic-Bold-v1.0';
}
/* 헤더 */
@font-face {
    font-family: 'Cafe24Supermagic-Bold-v1.0';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
.btn {
    font-family: 'Cafe24Supermagic-Bold-v1.0';
}





/* 서브메뉴선택 */
* {
    padding: 0;
    margin: 0;
}


/* 메뉴바 부분 작성 */
.menu {
    width: 340px;
    /* overflow: hidden; */
    /* margin: 150px auto; */
}

.menu>li {
    /* width: 20%; */
    /* 20*5=100% */
    /* float: left; */
    text-align: center;
    line-height: 40px;
    background-color: #fff;
}

.menu a {
    color: black;
}

.submenu>li {
    line-height: 50px;
    /* border: 1px solid rgb(218, 241, 225); */
}
.submenu>li :hover {
    line-height: 50px;
    border-bottom: 2px solid rgb(89, 236, 133);
}

.submenu {
    height: 0;
    /*ul의 높이를 안보이게 처리*/
    overflow: hidden;
    /* border-radius: 10px; */
}

/* hover했을때 */
.menu>li:hover {
    border: 1px solid rgb(218, 241, 225);
    transition-duration: 0.5s;
    border-radius: 10px;
    background-color: white;
    position: relative;
    z-index: 1;
}

.menu>li:hover .submenu {
    height: 250px;
    /*서브메뉴 li한개의 높이 50*5*/
    transition-duration: 1s;
}

.m1_1 img {
    width: 44px;
    display: block;
    margin: auto;
}



/*  */
.submenu.show,
.submenu-below-hamburger.show {
    height: 250px;
}

.submenu:hover,
.submenu-below-hamburger:hover {
    height: auto !important;
}

#hamburger-margin {
    width: 100%;
    height: 250px;
    display: none;
}
@media screen and (max-width: 700px) {
    .search {
        width: 400px;
        min-width: 0;
    }
}

@media screen and (max-width: 600px) {
    #top-header {
        text-align: left;
    }

    
}


.main_menu {
    padding-top: 80px;
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: space-around;
    font-size: 30px;
}

.main_menu .menu_1 {
    text-align: center;
    width: 100%;
    border : solid 2px rgba(174, 223, 189, 0.988);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.main_menu .menu_2 {
    text-align: center;
    width: 100%;
    border-bottom: solid 2px rgba(174, 223, 189, 0.988);
    
}

.main_menu .menu_3 {
    text-align: center;
    width: 100%;
    border-bottom: solid 2px rgba(174, 223, 189, 0.988)
   
}

.bon .bon_name_mom {
    width: 80%;
    margin: 0 auto;
    margin-top: 60px;
    border: solid 3px rgb(165, 225, 183);
    border-radius: 10px;
    padding-top: -50px;
}

.bon .bon_name {
    font-size: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.bon .bon_name .bon_name_1 {
    flex-grow: 1;
    width: 0;
    padding-top: 20px;
    height: 40px;
    text-align: center;
}

.bon .bon_name .bon_name_2 {
    flex-grow: 5;
    padding-top: 20px;
    height: 40px;
    text-align: center;
}

.bon .bon_name .bon_name_3 {
    flex-grow: 2;
    padding-top: 20px;

    height: 40px;
    text-align: center;
}

.bon .bon_nae {
    font-size: 20px;
    margin: 0 auto;
    padding-top: 30px;
    width: 80%;
    display: flex;
    justify-content: space-around;
    border-bottom: solid 1px #837f7f;
}

.bon .bon_nae .bon_border_1 {
    flex-grow: 1;
    height: 40px;
    text-align: center;
    border-right: solid 1px #837f7f;

}

.bon .bon_nae .bon_border_2 {
    flex-grow: 5;
    height: 40px;
    text-align: center;
    border-right: solid 1px #837f7f;

}

.bon .bon_nae .bon_border_3 {
    flex-grow: 2;
    height: 40px;
    text-align: center;
}

.number {
    font-size: 20px;
    margin: 0 auto;
    margin-top: 30px;
    width: 200px;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

a {
    text-decoration: none;
    color: black;
}

.number_1 {
    margin: 0 20px;
    height: 25px;
    width: 50px;
    border-radius: 10px;
    border: none;
}



a:visited{
           
    color:black ;
}
a{
    text-decoration-line: none;
}

	<title>공지사항</title>

  
      

       
       
        }

        

        /* 서브메뉴선택 */
        * {
            padding: 0;
            margin: 0;
        }

      
        /* 메뉴바 부분 작성 */
        .menu {
            width: 340px;
            /* overflow: hidden; */
            /* margin: 150px auto; */
        }

        .menu>li {
            /* width: 20%; */
            /* 20*5=100% */
            /* float: left; */
            text-align: center;
            line-height: 40px;
            background-color: #fff;
        }

        .menu a {
            color: black;
        }

        .submenu>li {
            line-height: 50px;
            /* border: 1px solid rgb(218, 241, 225); */
        }

        .submenu>li :hover {
            line-height: 50px;
            border-bottom: 2px solid rgb(89, 236, 133);
        }

        .submenu {
            height: 0;
            /*ul의 높이를 안보이게 처리*/
            overflow: hidden;
            /* border-radius: 10px; */
        }

        /* hover했을때 */
        .menu>li:hover {
            border: 1px solid rgb(218, 241, 225);
            transition-duration: 0.5s;
            border-radius: 10px;
            background-color: white;
            position: relative;
            z-index: 1;
        }

        .menu>li:hover .submenu {
            height: 250px;
            /*서브메뉴 li한개의 높이 50*5*/
            transition-duration: 1s;
        }

        .m1_1 img {
            width: 44px;
            display: block;
            margin: auto;
        }



        /*  */
        .submenu.show,
        .submenu-below-hamburger.show {
            height: 250px;
        }

        .submenu:hover,
        .submenu-below-hamburger:hover {
            height: auto !important;
        }

        #hamburger-margin {
            width: 100%;
            height: 250px;
            display: none;
        }

        @media screen and (max-width: 700px) {
            .search {
                width: 400px;
                min-width: 0;
            }
        }

        @media screen and (max-width: 600px) {
            #top-header {
                text-align: left;
            }

            #title {
                margin-top: 10px;
                margin-left: 40px;
            }

            #title img {
                height: 120px;
            }

         


        .main_menu {
            padding-top: 80px;
            margin: 0 auto;
            width: 80%;
            display: flex;
            justify-content: space-around;
            font-size: 30px;
        }

        .main_menu .menu_1 {
            text-align: center;
            width: 100%;
            border: solid 2px rgba(174, 223, 189, 0.988);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .main_menu .menu_2 {
            text-align: center;
            width: 100%;
            border-bottom: solid 2px rgba(174, 223, 189, 0.988);

        }

        .main_menu .menu_3 {
            text-align: center;
            width: 100%;
            border-bottom: solid 2px rgba(174, 223, 189, 0.988)
        }

        .bon .bon_name_mom {
            width: 80%;
            margin: 0 auto;
            margin-top: 60px;
            border: solid 3px rgb(165, 225, 183);
            border-radius: 10px;
            padding-top: -50px;
        }

        .bon .bon_name {
            font-size: 20px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        .bon .bon_name .bon_name_1 {
            flex-grow: 1;
            width: 0;
            padding-top: 20px;
            height: 40px;
            text-align: center;
        }

        .bon .bon_name .bon_name_2 {
            flex-grow: 5;
            padding-top: 20px;
            height: 40px;
            text-align: center;
        }

        .bon .bon_name .bon_name_3 {
            flex-grow: 2;
            padding-top: 20px;

            height: 40px;
            text-align: center;
        }

        .bon .bon_nae {
            font-size: 20px;
            margin: 0 auto;
            padding-top: 30px;
            width: 80%;
            display: flex;
            justify-content: space-around;
            border-bottom: solid 1px #837f7f;
        }

        .bon .bon_nae .bon_border_1 {
            flex-grow: 1;
            height: 40px;
            text-align: center;
            border-right: solid 1px #837f7f;

        }

        .bon .bon_nae .bon_border_2 {
            flex-grow: 5;
            height: 40px;
            text-align: center;
            border-right: solid 1px #837f7f;

        }

        .bon .bon_nae .bon_border_3 {
            flex-grow: 2;
            height: 40px;
            text-align: center;
        }

        .number {
            font-size: 20px;
            margin: 0 auto;
            margin-top: 30px;
            width: 200px;
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .number_1 {
            margin: 0 20px;
            height: 25px;
            width: 50px;
            border-radius: 10px;
            border: none;
        }



        a:visited {

            color: black;
        }

        a {
            text-decoration-line: none;
        }

        .number_1:hover{
            cursor: pointer;
        }
    </style>


<body>

    <script>
        window.onload = function () {



            // 페이지가 로드될 때 실행될 함수
            document.addEventListener('DOMContentLoaded', function () {
                // 모든 서브 메뉴 요소를 선택합니다.
                const submenus = document.querySelectorAll('.submenu, .submenu-below-hamburger');

                // 모든 서브 메뉴의 'show' 클래스를 제거하여 초기에는 숨깁니다.
                submenus.forEach(submenu => {
                    submenu.classList.remove('show');
                });
            });

            // 햄버거 버튼 요소를 선택합니다.
            const hamburgerButton = document.querySelector('.m1_1');

            // 모든 서브 메뉴 요소를 선택합니다.
            const submenus = document.querySelectorAll('.submenu');

            // 모든 햄버거 아래 서브 메뉴 요소를 선택합니다.
            const submenusBelowHamburger = document.querySelectorAll('.submenu-below-hamburger');

            // 햄버거 버튼 클릭 상태를 저장하는 변수를 만듭니다.
            let isHamburgerClicked = false;

            // 햄버거 버튼 클릭 시 이벤트 리스너를 추가합니다.
            hamburgerButton.addEventListener('click', (e) => {
                // 클릭 이벤트를 중단하여 호버 효과가 유지되도록 합니다.
                e.preventDefault();

                // 햄버거 버튼 클릭 상태를 토글합니다.
                isHamburgerClicked = !isHamburgerClicked;
                document.querySelector("#hamburger-margin").style.display = 'block';

                // 모든 메뉴의 서브 메뉴를 토글하여 보이거나 숨깁니다.
                submenus.forEach(submenu => {
                    if (isHamburgerClicked) {
                        submenu.classList.add('show'); // 보이게 설정
                    } else {
                        submenu.classList.remove('show'); // 숨기게 설정
                        document.querySelector("#hamburger-margin").style.display = 'none';

                    }
                });

                // 햄버거 아래의 서브 메뉴도 토글하여 보이거나 숨깁니다.
                submenusBelowHamburger.forEach(submenu => {
                    if (isHamburgerClicked) {
                        submenu.classList.add('show'); // 보이게 설정
                    } else {
                        submenu.classList.remove('show'); // 숨기게 설정
                    }
                });
            });



        };





    </script>



</head>

<body>
	<form>

    
    <div id="hamburger-margin"></div>


    <div class="main_menu">
        <a class="menu_1"
            href="http://localhost:8080/Project_2/Notice_Main.jsp">
            <div>
                공지사항
            </div>
        </a>
        <a class="menu_2" href="http://localhost:8080/Project_2/Question.jsp">
            <div>
                자주묻는질문
            </div>
        </a>
        <a class="menu_3"
            href="http://localhost:8080/Project_2/Contact_Us_main.jsp">
            <div>
                문의하기
            </div>
        </a>
    </div>

    <div class="bon">
        <div class="bon_name_mom">
            <div class="bon_name">
                <div class="bon_name_1">번호</div>
                <div class="bon_name_2">제목</div>
                <div class="bon_name_3">작성일</div>
            </div>
        </div>
        <div class="bon_nae">
            <div class="bon_border_1">102</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.20</div>
        </div>
        <div class="bon_nae">
            <div class="bon_border_1">101</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.19</div>
        </div>
        <div class="bon_nae">
            <div class="bon_border_1">100</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.18</div>
        </div>
        <div class="bon_nae">
            <div class="bon_border_1">99</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.17</div>
        </div>
        <div class="bon_nae">
            <div class="bon_border_1">98</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.16</div>
        </div>

        <div class="bon_nae">
            <div class="bon_border_1">97</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.15</div>
        </div>
        <div class="bon_nae">
            <div class="bon_border_1">96</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.14</div>
        </div>
        <div class="bon_nae">
            <div class="bon_border_1">95</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.13</div>
        </div>
        <div class="bon_nae">
            <div class="bon_border_1">94</div>
            <div class="bon_border_2"><a
                    href="http://127.0.0.1:5502/%EB%B0%95%EB%AF%BC%EA%B7%9C/Park_MinGyu/Notice_detailedpage.html">안녕하세요
                    북마스터스입니다.</a></div>
            <div class="bon_border_3">2023.06.12</div>
        </div>
    
<nav aria-label="Page navigation example">
  <div class="pagination" style="display: flex; justify-content: center; align-items: center;">
    <a class="page-link" href="#" aria-label="Previous">
      <span aria-hidden="true">←</span> &nbsp;&nbsp;
    </a>
    <a class="page-link" href="#">1</a> &nbsp;&nbsp;
    <a class="page-link" href="#">2</a> &nbsp;&nbsp;
    <a class="page-link" href="#">3</a> &nbsp;&nbsp;
    <a class="page-link" href="#">4</a> &nbsp;&nbsp;
    <a class="page-link" href="#">5</a> &nbsp;&nbsp;
    <a class="page-link" href="#">6</a> &nbsp;&nbsp;
    <a class="page-link" href="#">7</a> &nbsp;&nbsp;
    <a class="page-link" href="#" aria-label="Next">
      <span aria-hidden="true">→</span>
    </a>
  </div>
</nav>




    </form>

<%@ include file="Footer.jsp" %>

</body>
</html>

JSP

공지사항 


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공지사항</title>
<%@ include file="Header.jsp" %>

<style>

		body {
			margin:0;
			font-family: 'Cafe24Supermagic-Bold-v1.0';
		}


		@font-face {
			font-family: 'Cafe24Supermagic-Bold-v1.0';
			src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
			font-weight: 700;
			font-style: normal;
		}

 		


        /* 메뉴바 부분 작성 */
        .menu {
            width: 340px;
            /* overflow: hidden; */
            /* margin: 150px auto; */
        }

        .menu>li {
            /* width: 20%; */
            /* 20*5=100% */
            /* float: left; */
            text-align: center;
            line-height: 40px;
            background-color: #fff;
        }

        .menu a {
            color: black;
        }

        .submenu>li {
            line-height: 50px;
            /* border: 1px solid rgb(218, 241, 225); */
        }
        .submenu>li :hover {
            line-height: 50px;
            border-bottom: 2px solid rgb(89, 236, 133);
        }
        
        .submenu {
            height: 0;
            /*ul의 높이를 안보이게 처리*/
            overflow: hidden;
            /* border-radius: 10px; */
        }
        
        /* hover했을때 */
        .menu>li:hover {
            border: 1px solid rgb(218, 241, 225);
            transition-duration: 0.5s;
            border-radius: 10px;
            background-color: white;
            position: relative;
            z-index: 1;
        }

        .menu>li:hover .submenu {
            height: 250px;
            /*서브메뉴 li한개의 높이 50*5*/
            transition-duration: 1s;
        }

        .m1_1 img {
            width: 44px;
            display: block;
            margin: auto;
        }
        
        

        /*  */
        .submenu.show,
        .submenu-below-hamburger.show {
            height: 250px;
        }

        .submenu:hover,
        .submenu-below-hamburger:hover {
            height: auto !important;
        }

        #hamburger-margin {
            width: 100%;
            height: 250px;
            display: none;
        }
        @media screen and (max-width: 700px) {
            .search {
                width: 400px;
                min-width: 0;
            }
        }

        @media screen and (max-width: 600px) {
            #top-header {
                text-align: left;
            }

          
        }
		

		.outer {
			width: 800px;
			margin: auto;
		}

		.wrap {
			width: 780px;
			margin: 100px auto;
		}

		.notice_underbar {
			width: 750px;
			border-bottom: 3px solid rgb(218, 241, 225);
		}

		.notice_title {
			width: 765px;
			border-bottom: 2px solid rgb(218, 241, 225);
			text-align: left; /* 중앙 왼쪽 정렬 */
    		margin-left: auto; /* 가로 가운데 정렬 */
    		margin-right: auto; /* 가로 가운데 정렬 */
    		margin-top: 20px; /* 상단 여백 추가 */
		}

		.notice_content {
			padding: 0px 20px;



		}
		
		

		.notice_content .subject {
			height: 55px;
			line-height: 55px;
			margin-top: 2cm;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f3f5f7;
			
		}

		.notice_content .content {
			height: 500px;
			overflow: auto;
			margin-top: 2cm;
			padding-top :20px; /* 상단 여백 추가 */
			margin-bottom: 1px;
			font-family: 'Cafe24Supermagic-Bold-v1.0';
			src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
			font-weight: 700;
			font-style: normal;
			
		}


		.title_span {
		margin-top: 2cm;
			background-color: rgb(218, 241, 225);

		}

		.notice_area button {
		  font-family: 'Cafe24Supermagic-Bold-v1.0';
            width: 100px;
            height: 35px;
            border-bottom: 1px solid;
            border-radius: 10px;
            text-align: center;
            color: black;
            
           
            
           /* Hover 효과 추가 */
           transition-duration : 0.3s; /* 전환 시간 설정 */
           cursor : pointer; /* 커서 모양 변경 */

         /* 테두리 스타일 변경 */
       border: none; /* 테두리 제거 */
         }
         
    
         
         .notice_area button:hover{
             background-color : rgb(220, 241, 218); /* Hover 시 배경색 변경 */
             color : black; /* Hover 시 글자색 변경 */
		 }
		.btn_area {
			text-align: center;
			border-top: 1px solid #282A35;
			padding: 30px;
			font-family: 'Cafe24Supermagic-Bold-v1.0';
			src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
			font-weight: 700;
			
			
		
			
		}

		.middle {
			text-align: center;
			margin-top: 30 px;

		}
		

        
		
         
   </style>
   </head>
   <body>
   
   <form action="savePost" method="post">
   
  

	<div class="outer">
		<div class="wrap">
			<div class="notice_area">
				<div class="notice_title">
					<h1 >공지사항</h1>
				</div>

				<div class="notice_content">
					<h4>
						<span class="title_span">&nbsp;</span>
						제목 : 공지사항 안내입니다.
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span> 작성일 : 2023.08.24</span>
					</h4>
					<div class="notice_underbar">

					</div>
				<%
					// 세션에서 새로운 글의 ID 값을 가져옴.
					HttpSession session2 = request.getSession();
					int newId = (Integer) session.getAttribute("newId");

			// 여기에서 데이터베이스 등으로부터 해당 ID의 공지사항 정보를 조회하여 출력하는 로직을 구현하기위한 공간.

				%>
				
				
					<div>
						<pre class="content">공지사항 안내 내용 </pre>
					</div>
					<div class="middle">
						<!-- 목록으로 돌아가는 버튼 위치 변경 -->
						<button type="button" id="backButton">목록으로</button>


						<script>
							document.getElementById("backButton").addEventListener("click", function () {
								alert('목록으로 돌아갑니다.');
								// 여기에서 필요한 작업을 수행함
							});
						</script>

					</div>
				</div>
			</div>
		</div>
	</div>
	
		
    
    <script>
    // 페이지가 로드될 때 실행될 함수
    document.addEventListener('DOMContentLoaded', function () {
        // 모든 서브 메뉴 요소를 선택합니다.
        const submenus = document.querySelectorAll('.submenu, .submenu-below-hamburger');

        // 모든 서브 메뉴의 'show' 클래스를 제거하여 초기에는 숨깁니다.
        submenus.forEach(submenu => {
            submenu.classList.remove('show');
        });
    });

    // 햄버거 버튼 요소를 선택합니다.
    const hamburgerButton = document.querySelector('.m1_1');

    // 모든 서브 메뉴 요소를 선택합니다.
    const submenus = document.querySelectorAll('.submenu');

    // 모든 햄버거 아래 서브 메뉴 요소를 선택합니다.
    const submenusBelowHamburger = document.querySelectorAll('.submenu-below-hamburger');

    // 햄버거 버튼 클릭 상태를 저장하는 변수를 만듭니다.
    let isHamburgerClicked = false;

    // 햄버거 버튼 클릭 시 이벤트 리스너를 추가합니다.
    hamburgerButton.addEventListener('click', (e) => {
        // 클릭 이벤트를 중단하여 호버 효과가 유지되도록 합니다.
        e.preventDefault();

        // 햄버거 버튼 클릭 상태를 토글합니다.
        isHamburgerClicked = !isHamburgerClicked;
        document.querySelector("#hamburger-margin").style.display = 'block';

        // 모든 메뉴의 서브 메뉴를 토글하여 보이거나 숨깁니다.
        submenus.forEach(submenu => {
            if (isHamburgerClicked) {
                submenu.classList.add('show'); // 보이게 설정
            } else {
                submenu.classList.remove('show'); // 숨기게 설정
                document.querySelector("#hamburger-margin").style.display = 'none';

            }
        });

        // 햄버거 아래의 서브 메뉴도 토글하여 보이거나 숨깁니다.
        submenusBelowHamburger.forEach(submenu => {
            if (isHamburgerClicked) {
                submenu.classList.add('show'); // 보이게 설정
            } else {
                submenu.classList.remove('show'); // 숨기게 설정
            }
        });
    });
</script>
    
    
  <%@ include file="Footer.jsp" %>
  </form>

</body>
</html>

JSP

공지사항 작성


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공지사항작성</title>
<%@ include file="Header_nonsearch.jsp" %>
	<style>
		/* 여기부터 수정 */
			@font-face {
				font-family: 'Cafe24Supermagic-Bold-v1.0';
				src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
				font-weight: 700;
				font-style: normal;
			}


			body {
				font-family: 'Cafe24Supermagic-Bold-v1.0';
			}
			
			


    		/* 공통 스타일 */
    		.outer {
	       		width: 800px;
    	    	margin: auto;
   			 }

    		.wrap {
        		width: 780px;
        		margin: 100px auto;
    		}

   			 .notice_area button {
        		font-family: 'Cafe24Supermagic-Bold-v1.0';
       			 border-radius: 10px;
		 		/* 기본 배경색 및 글자색 설정 */
		 		
           		color : black;

           		/* Hover 효과 추가 */
           		transition-duration : 0.3s; /* 전환 시간 설정 */
         	}
         	
         
         	.notice_area button:hover{
             	background-color : rgb(220, 241, 218); /* Hover 시 배경색 변경 */
             	color : white; /* Hover 시 글자색 변경 */
         	}
         
    

   			 .textarea, .input_area {
        		border-radius: 10px;
   			 }

        		 
     		/* 로고 폰트 설정 */
    		 h1.logo {
         		font-family:'Cafe24Supermagic-Bold-v1.0', sans-serif; 
         		text-align:center; 
        		 margin-top:-20px; 
         		padding-bottom :px; 
         		color:#282A35
     		}
     
     		
     		 /* 제목 폰트 설정 */
      		h4.title_span{
          		background-color:#282A35 ;
          		color:white ; 
         		 padding-left :5px
     		 }
      
      
      		 /* 날짜 폰트 설정 */
       		span.date{
           		font-size :12pt
      		 }
      
      
      		 .notice_title {
      		 	 
				border-bottom: 5px solid rgb(218, 241, 225);
				
				
			}


			.notice_content {
				padding: 0px 20px;
			}

							
			.notice_content .content {
				margin-bottom: 30px;
			}


			.input_area {
				border: solid 1px #dadada;
				padding: 10px 10px 14px 10px;
				background: white;
			}


			.input_area input {
				width: 700px;
				height: 30px;
				border: 0px;
			}


			.input_area input:focus {
				outline: none;
			}


			.textarea {
				resize: none;
				border: solid 1px #dadada;
			}
			

			.textarea:focus {
				outline: none;
			}

			.title_span {
				background-color: rgb(218, 241, 225);
				width: 765px;	
				text-align: left; /* 중앙 왼쪽 정렬 */
    			margin-left: auto; /* 가로 가운데 정렬 */
    			margin-right: auto; /* 가로 가운데 정렬 */
    			margin-top: 20px; /* 상단 여백 추가 */
				
				
			}
			

			.notice_area button {
				width: 100px;
				height: 35px;
				border: 1px solid rgb(190, 190, 190);
				color: black;
				
				margin: 5px;
			}

			.btn_area {
				text-align: center;
				border-top: 1px solid #282A35;
				padding: 30px;
			}


			.select {
				text-align: center;
			}
			

			.middle {
               	text-align:center ;
              	margin-top :30px ;
          	 }
          	 
          	 
			body {
				margin: 10px
			}
			
			
			.filebox label {
  				display: inline-block;
 				padding: .5em .75em;
				color: #999;
				font-size: inherit;
  				line-height: normal;
  				vertical-align: middle;
  				background-color: #fdfdfd;
 				cursor: pointer;
  				border: 1px solid #ebebeb;
  				border-bottom-color: #e2e2e2;
  				border-radius: .25em;
			}
			
			
			.btn-upload {
 				 width: 150px;
  				height: 30px;
  				background: #fff;
  				border: 1px solid black;
  				border-radius: 10px;
				font-weight: 500;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				&:hover {
			    background: rgb(218, 241, 225);
			    color: #fff;
  				}
			}


			#file {
  				display: none;
			}
			
			
        	
        	.btn {
            font-family: 'Cafe24Supermagic-Bold-v1.0';
        }
       

        #title {
            display: inline-block;
            width: 45%;
            font-size: 80px;
            font-weight: 600;
            margin-top: 10px;
            margin-bottom: -50px;
        }

        #title img {
            height: 150px;
        }

        #icons {
            position: absolute;
            width: 20%;
            display: flex;
            top: 70px;
            right: 10%;
            justify-content: space-around;
        }

        .icon {
            width: 40px;
            height: 40px;
        }

        .icon img {
            width: 100%;
            height: 100%;
        }

        .icon .btn {
            background-color: #5E5E5E;
            color: white;
            width: 100px;
            height: 40px;
            border-radius: 5px;
            border: 1px solid white;
        }
       
	</style>
</head>
<body>	

	 <form action="NoticeServlet" method="post">

	<div id="header">
         <div id="title"><img src="C:\Users\User\Desktop\2차 프로젝트\박민규\Park_MinGyu\img/title_bookmasters.png" alt=""></div>
        <div id="icons">
            <div class="icon"><img src="img/cart.png" class="header_icon"></div>
            <div class="icon"><img src="img/user.png" class="header_icon"></div>
            <div class="icon"><input type="button" value="문의하기" class="btn"></div>
        </div>
        

        


	<div class="outer">
		<div class="wrap">
			<div class="notice_area">
				<div class="notice_title">
							<h1>공지사항 작성하기</h1>
					</div>
					
							<div class="notice_content">
								<form action="${contextPath }/notice/insert" method="post">
									<div class="content">
										<h4>
											<span class="title_span">&nbsp;</span> 제목 
												&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														
													<select name="option">	
														<option value="notice">공지사항</option>
														<option value="event">이벤트</option>
														<option value="etc">기타</option>
													</select>													
												</h4>
								
												<span class="input_area"> 
													<input type="text" name="title" required>
												</span>

												<h4>
													<span class="title_span">&nbsp;</span> 내용
												</h4>
												
												<textarea class="textarea" rows="20" cols="100" name="content"
													required></textarea>
											</div>
											<div>
											<label for="file">
  												<div class="btn-upload">파일 업로드</div>
													</label>
												<input type="file" name="file" id="file">
											
											</div>
											
											<div class="middle">
												<!-- 목록으로 돌아가는 버튼 위치 변경 -->
												<button type="button" id="backButton">목록으로</button>
												<!-- 작성하기 버튼 위치 변경 없음 -->
												<button type="submit">작성하기 </button>
												
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
						
				<script>
					document.getElementById("backButton").addEventListener("click", function () {
						alert('목록으로 돌아갑니다.');
							// 여기에서 필요한 작업을 수행하세요.
					});

					document.querySelector("form").addEventListener("submit", function () {
						alert('글이 등록되었습니다.');
					});
				</script>
				
    </form>
		 <%@ include file="Footer.jsp" %>

</body>
</html>

JSP

자주 묻는 질문


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자주 묻는 질문</title>
<%@ include file="Header.jsp" %>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자주묻는질문</title>

    <!-- style.css라는 css파일을 연결 -->
    <link rel="stylesheet" href="Qusetion_correction.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <style>
    body {
    /* margin: 0;
    height: 1500px; */
    font-family: 'Cafe24Supermagic-Bold-v1.0';
}

@font-face {
    font-family: 'Cafe24Supermagic-Bold-v1.0';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

.btn {
    font-family: 'Cafe24Supermagic-Bold-v1.0';
}




/* 서브메뉴선택 */
* {
    padding: 0;
    margin: 0;
}



/* 메뉴바 부분 작성 */
.menu {
    width: 340px;
    /* overflow: hidden; */
    /* margin: 150px auto; */
}

.menu>li {
    /* width: 20%; */
    /* 20*5=100% */
    /* float: left; */
    text-align: center;
    line-height: 40px;
    background-color: #fff;
}

.menu a {
    color: black;
}

.submenu>li {
    line-height: 50px;
    /* border: 1px solid rgb(218, 241, 225); */
}

.submenu>li :hover {
    line-height: 50px;
    border-bottom: 2px solid rgb(89, 236, 133);
}

.submenu {
    height: 0;
    /*ul의 높이를 안보이게 처리*/
    overflow: hidden;
    /* border-radius: 10px; */
}

/* hover했을때 */
.menu>li:hover {
    border: 1px solid rgb(218, 241, 225);
    transition-duration: 0.5s;
    border-radius: 10px;
    background-color: white;
    position: relative;
    z-index: 1;
}

.menu>li:hover .submenu {
    height: 250px;
    /*서브메뉴 li한개의 높이 50*5*/
    transition-duration: 1s;
}

.m1_1 img {
    width: 44px;
    display: block;
    margin: auto;
}



/*  */
.submenu.show,
.submenu-below-hamburger.show {
    height: 250px;
}

.submenu:hover,
.submenu-below-hamburger:hover {
    height: auto !important;
}

#hamburger-margin {
    width: 100%;
    height: 250px;
    display: none;
}

@media screen and (max-width: 600px) {
    #top-header {
        text-align: left;
    }

    

    .menu {
        font-size: 25px;
    }

}

/* 자주 묻는 질문 css 할거임,, */

.main_menu {
    padding-top: 80px;
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: space-around;
    font-size: 30px;
}

.main_menu .menu_1 {
    text-align: center;
    width: 100%;
    border-bottom: solid 2px rgba(174, 223, 189, 0.988);
}

.main_menu .menu_2 {
    text-align: center;
    width: 100%;
    border: solid 2px rgba(174, 223, 189, 0.988);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.main_menu .menu_3 {
    text-align: center;
    width: 100%;
    border-bottom: solid 2px rgba(174, 223, 189, 0.988);
}

/* 서브메뉴라인 */
.sub_menu {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 60px;
    margin-left: 10%;
    width: 80%;
    height: 60px;
    /* border-top: 2px solid rgb(165, 225, 183); */
    /* border-left: 2px solid rgb(165, 225, 183); */
    border: 3px solid rgb(165, 225, 183);
    border-radius: 10px;
}

.subm_1,
.subm_2,
.subm_3,
.subm_4,
.subm_5,
.subm_6 {
    margin-right: 4%;
    margin-top: 17px;
}

.subm_7 {
    margin-top: 15px;
}

/* 버튼 스타일들 */
.sub_menu input {
    font-family: 'Cafe24Supermagic-Bold-v1.0';
    font-size: 16px;
    border-radius: 10px;
    border: none;
    height: 24px;
    background-color: rgb(218, 241, 225);
}

.sub_menu input:hover {
    background-color: rgb(165, 225, 183);
}

#sm_1 {
    width: 60px;
}

#sm_2 {
    width: 100px;
}

#sm_3 {
    width: 90px;
}

#sm_4 {
    width: 100px;
}

#sm_5 {
    width: 70px;
}

#sm_6 {
    width: 130px;
}

#sm_7 {
    width: 110px;
}


/* 아코디언 css */

/* * {
    box-sizing: border-box;
} */

#Acd_q {
    width: 80%;
    margin: 0 auto;

}

/* .que:first-child {
    margin-top: 2%;
    border-top: 2px solid rgb(165, 225, 183);
} */

.que {
    position: relative;
    padding: 17px 0;
    cursor: pointer;
    border-bottom: 1px solid #dddddd;

    /* font-size: ; */
}

/* Q에 대한 코드 */
.que::before {
    display: inline-block;
    content: 'Q';
    /* font-size: ; */
    color: #006633;
    margin: 0 5px;
}

/* 아코디언 선택햇을때 글자 크기와 색상변경 */
.que.on>span {
    font-weight: bolder;
    color: #006633;
}

/* 아코디언 질문답 숨기고 크기 지정 */
.anw {
    display: none;
    overflow: hidden;
    /* font-size: ; */
    background-color: #f4f4f2;
    padding: 20px 0;
}

/* 질문답 앞 A 글자  */
.anw::before {
    display: inline-block;
    content: 'A';
    /* font-size: ; */
    font-weight: bolder;
    color: #666;
    margin: 0 5px;
}

/* 질문을 눌렀을때 */
.arrow-wrap {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}

.que .arrow-top {
    display: none;
}

.que .arrow-bottom {
    display: block;
}

.que.on .arrow-bottom {
    display: none;
}

.que.on .arrow-top {
    display: block;
}
a:visited{
           
    color:black ;
}
a{
    text-decoration-line: none;
}



    
    </style>

</head>

<body>
<form>
    
    <div id="hamburger-margin"></div>


    <!-- 자주묻는 질문 만들거임,, -->

    <div class="main_menu">
        <div class="menu_1">
            <a href="http://localhost:8080/Project_2/Notice_Main.jsp">
                공지사항
            </a>
        </div>
        <div class="menu_2"> 
            <a href="http://localhost:8080/Project_2/Question.jsp">
                자주묻는질문
        </a>
        </div>
        <div class="menu_3">
         <a href="http://localhost:8080/Project_2/Contact_Us_main.jsp"> 
            문의하기</a>   
        </div>
    </div>

    <div class="sub_menu">
        <div class="subm_1">
            <!-- <li><a href="#">전체</a></li> -->
            <input id="sm_1" type="submit" value="전체">
        </div>
        <div class="subm_2">
            <input id="sm_2" type="submit" value="주문/결제">
        </div>
        <div class="subm_3">
            <input id="sm_3" type="submit" value="배송관련">
        </div>
        <div class="subm_4">
            <input id="sm_4" type="submit" value="취소/환불">
        </div>
        <div class="subm_5">
            <input id="sm_5" type="submit" value="이벤트">
        </div>
        <div class="subm_6">
            <input id="sm_6" type="submit" value="로그인/회원정보">
        </div>
        <div class="subm_7">
            <input id="sm_7" type="submit" value="서비스/기타">
        </div>
    </div>

    <!-- 미리 작성된 질문 창 -->
    <!-- 1 -->
    <div id="Acd_q" class="q_1">
        <div class="que">
            <span>1 첫 번째 질문입니다.</span>
            <div class="arrow-wrap">
                <span class="arrow-top">↑</span>
                <span class="arrow-bottom">↓</span>
            </div>
        </div>

        <div class="anw">
            <span>첫 번째 질문의 답입니다.</span>
        </div>
        <div div class="que">
            <span>두 번째 질문입니다.</span>
            <div class="arrow-wrap">
                <span class="arrow-top">↑</span>
                <span class="arrow-bottom">↓</span>
            </div>
        </div>
        <div class="anw">
            <span>두 번째 질문의 답입니다.</span>
        </div>
        <div div class="que">
            <span>세 번째 질문입니다.</span>
            <div class="arrow-wrap">
                <span class="arrow-top">↑</span>
                <span class="arrow-bottom">↓</span>
            </div>
        </div>
        <div class="anw">
            <span>세 번째 질문의 답입니다.</span>
        </div>
        <div div class="que">
            <span>네 번째 질문입니다.</span>
            <div class="arrow-wrap">
                <span class="arrow-top">↑</span>
                <span class="arrow-bottom">↓</span>
            </div>
        </div>
        <div class="anw">
            <span>네 번째 질문의 답입니다.</span>
        </div>
        <div div class="que">
            <span>다섯 번째 질문입니다.</span>
            <div class="arrow-wrap">
                <span class="arrow-top">↑</span>
                <span class="arrow-bottom">↓</span>
            </div>
        </div>
        <div class="anw">
            <span>다섯 번째 질문의 답입니다.</span>
        </div>
        <div div class="que">
            <span>여섯 번째 질문입니다.</span>
            <div class="arrow-wrap">
                <span class="arrow-top">↑</span>
                <span class="arrow-bottom">↓</span>
            </div>
        </div>
        <div class="anw">
            <span>여섯 번째 질문의 답입니다.</span>
        </div>
        <div div class="que">
            <span>일곱 번째 질문입니다.</span>
            <div class="arrow-wrap">
                <span class="arrow-top">↑</span>
                <span class="arrow-bottom">↓</span>
            </div>
        </div>
        <div class="anw">
            <span>일곱 번째 질문의 답입니다.</span>
        </div>
        <div div class="que">
            <span>여덟 번째 질문입니다.</span>
            <div class="arrow-wrap">
                <span class="arrow-top">↑</span>
                <span class="arrow-bottom">↓</span>
            </div>
        </div>
        <div class="anw">
            <span>여덟 번째 질문의 답입니다.</span>
        </div>

    </div>


   </form>
<%@ include file="Footer.jsp" %>



<script src="Question_correction.js"></script>

</head>


</body>
</html>

JSP

제안하기


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제안하기</title>
<%@ include file="Header_nonsearch.jsp" %>
<style>
<title>제안하기</title>
	<style>
	
		 .btn {
            font-family: 'Cafe24Supermagic-Bold-v1.0';
        }
      
        
	
		/* 여기부터 수정 */
		@font-face {
			font-family: 'Cafe24Supermagic-Bold-v1.0';
			src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
			font-weight: 700;
			font-style: normal;
		}

		body {
			font-family: 'Cafe24Supermagic-Bold-v1.0';
		}

		.notice_area button {
			font-family: 'Cafe24Supermagic-Bold-v1.0';
			border-radius: 10px;
		}

		.textarea,
		.input_area {
			border-radius: 10px;
		}

		/* 여기까지 수정 */
		.outer {
			width: 800px;
			margin: auto;
		}

		.wrap {
			width: 780px;
			margin: 100px auto;
		}

		.notice_title {
			border-bottom: 1px solid #282A35;
		}

		.notice_content {
			padding: 0px 20px;
		}

		.notice_content .subject {
			height: 55px;
			line-height: 55px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f3f5f7;
		}

		.notice_content .content {
			height: 500px;
			overflow: auto;
			margin-bottom: 30px;
		}

		.title_span {
			background-color: #282A35;

		}

		.notice_area button {
			width: 100px;
			height: 35px;
			border: 0px;
			color: white;
			background: #282A35;
			margin: 5px;
		}

		.btn_area {
			text-align: center;
			border-top: 1px solid #282A35;
			padding: 30px;
		}

		.middle {
			text-align: center;
		}

		button,
		submit {
			cursor: pointer;
		}

		#backButton, #submit {
			border: 1px solid #dadada;
		}
		
	</style>
</head>

<body>

	
	<div class="outer">
		<div class="wrap">
			<div class="notice_area">
				<div class="notice_title">
					<!DOCTYPE html>
					<html>

					<head>
						<meta charset="UTF-8">
						<title>문의 사항작성</title>
						<style>
							.outer {
								width: 800px;
								margin: auto;
							}

							.wrap {
								width: 780px;
								margin: 100px auto;
							}

							.notice_title {
								border-bottom: 1px solid #282A35;
							}

							.notice_content {
								padding: 0px 20px;
							}

							.notice_content .content {
								margin-bottom: 30px;
							}

							.input_area {
								border: solid 2px rgb(172, 172, 172);
								padding: 10px 10px 14px 10px;
								background: white;
							}

							.input_area input {
								width: 700px;
								height: 30px;
								border: 0px;
							}

							.input_area input:focus {
								outline: none;
							}

							.textarea {
								resize: none;
								border: solid 2px rgb(172, 172, 172)
							}

							.textarea:focus {
								outline: none;
							}

							.title_span {
								background-color: rgb(165, 225, 183);
							}

							.notice_area button {
								width: 100px;
								height: 35px;
								/* border: 1px solid rgb(190, 190, 190); */
								color: black;
								background: rgb(218, 241, 225);
								/* background: rgb(165, 225, 183); */
								margin: 5px;
								font-size: 18px;
							}

							.btn_area {
								text-align: center;
								border-top: 1px solid #282A35;
								padding: 30px;

							}

							.select {
								text-align: center;
							}
							
							<style>
        body {
            margin: 0;
            font-family: 'Cafe24Supermagic-Bold-v1.0';
        }
        @font-face {
            font-family: 'Cafe24Supermagic-Bold-v1.0';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }

							
						</style>




</head>
<body>
	<form>
	<div class="outer">
							<div class="wrap">
								<div class="notice_area">
									<div class="notice_title">
										<h1>제안하기</h1>
									</div>
									<div class="notice_content">
										<form action="${contextPath }/notice/insert" method="post">
											<div class="content">
												<h4>
													<span class="title_span">&nbsp;</span> 제목

												</h4>
												<span class="input_area"> <input type="text" name="title" required>
												</span>

												<h4>
													<span class="title_span">&nbsp;</span> 내용
												</h4>
												<textarea class="textarea" rows="20" cols="100" name="content"
													required></textarea>
											</div>
											<div class="middle">
												<button type="button" id="backButton">목록으로</button>
												<button type="submit" id="submit">작성하기 </button>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
						
					
       
						
						
						<script>

							btn = document.querySelector("#backButton")
							submit = document.querySelector("#submit")

							btn.addEventListener("mousedown", function (event) {
								btn.style.backgroundColor = 'rgba(174, 223, 189, 0.988)';
							})

							btn.addEventListener("mouseup", function (event) {
								btn.style.backgroundColor = 'rgb(218, 241, 225)';
							})

							btn.addEventListener("mouseout", function (event) {
								btn.style.backgroundColor = 'rgb(218, 241, 225)';
							})


							submit.addEventListener("mousedown", function (event) {
								submit.style.backgroundColor = 'rgba(174, 223, 189, 0.988)';
							})

							submit.addEventListener("mouseup", function (event) {
								submit.style.backgroundColor = 'rgb(218, 241, 225)';
							})

							submit.addEventListener("mouseout", function (event) {
								submit.style.backgroundColor = 'rgb(218, 241, 225)';
							})


							document.getElementById("backButton").addEventListener("click", function () {
								alert('목록으로 돌아갑니다.');
								// 여기에서 필요한 작업을 수행하세요.
							});

							document.querySelector("form").addEventListener("submit", function () {
								alert('글이 등록되었습니다.');
							});



						</script>
						<%@ include file="Footer.jsp" %>
				</form>
				


</body>
</html>

JSP

찾아오시는 길


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<head>
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>찾아오시는길</title>
    <style>
        body {
            margin: 0;
            font-family: 'Cafe24Supermagic-Bold-v1.0';
        }
        /* 헤더 */
        @font-face {
            font-family: 'Cafe24Supermagic-Bold-v1.0';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }
        .btn {
            font-family: 'Cafe24Supermagic-Bold-v1.0';
        }
        #top-header {
            width: 98%;
            height: auto;
            display: inline-block;
            text-align: center;
            background-color: white;
  
        }

        #title {
            display: inline-block;
            width: 45%;
            font-size: 80px;
            font-weight: 600;
            margin-top: 10px;
            margin-bottom: -50px;
        }

        #title img {
            height: 150px;
        }

        #icons {
            position: absolute;
            width: 20%;
            display: flex;
            top: 70px;
            right: 13%;
            justify-content: space-around;
        }

        .icon {
            width: 40px;
            height: 40px;
        }

        .icon img {
            width: 100%;
            height: 100%;
        }

        .icon .btn {
            background-color: #5E5E5E;
            color: white;
            width: 100px;
            height: 40px;
            border-radius: 5px;
            border: 1px solid white;
        }

        .search {
            position: relative;
            text-align: center;
            width: 50%;
            min-width: 400px;
            margin: 0 auto;
        }
        .search input {
            width: 100%;
            height: 50px;
            border-radius: 10px;
            border: none;
            outline: none;
            margin: 10px 0;
            font-size: 30px;
            background-color: rgb(218, 241, 225);
        }
        .search :focus {
            box-shadow: 1px 1px 1px 1px #bbb;
        }
        #search-icon {
            position: absolute;
            right: 0%;
            top: 21%;
            width: 40px;
        }

        #search-icon img {
            width: 100%;
        }

        #header-menus {
            display: inline-flex;
            margin-left: 10px;
            width: 60%;
            height: 50px;
            justify-content: space-around;
        }


        /* 서브메뉴선택 */
        * {
            padding: 0;
            margin: 0;
        }

        #header-menus li {
            list-style: none;
        }

        #header-menus a {
            text-decoration: none;
            font-size: 14px;
        }

        #header-menus #m1 {
            font-size: 25px;
            font-weight: bold;
            /* 줄 바꿈 방지 */
            white-space: nowrap;
        }

        /* 메뉴바 부분 작성 */
        .menu {
            width: 340px;
            /* overflow: hidden; */
            /* margin: 150px auto; */
        }

        .menu>li {
            /* width: 20%; */
            /* 20*5=100% */
            /* float: left; */
            text-align: center;
            line-height: 40px;
            background-color: #fff;
        }

        .menu a {
            color: black;
        }

        .submenu>li {
            line-height: 50px;
            /* border: 1px solid rgb(218, 241, 225); */
        }
        .submenu>li :hover {
            line-height: 50px;
            border-bottom: 2px solid rgb(89, 236, 133);
        }
        
        .submenu {
            height: 0;
            /*ul의 높이를 안보이게 처리*/
            overflow: hidden;
            /* border-radius: 10px; */
        }
        
        /* hover했을때 */
        .menu>li:hover {
            border: 1px solid rgb(218, 241, 225);
            transition-duration: 0.5s;
            border-radius: 10px;
            background-color: white;
            position: relative;
            z-index: 1;
        }

        .menu>li:hover .submenu {
            height: 250px;
            /*서브메뉴 li한개의 높이 50*5*/
            transition-duration: 1s;
        }

        .m1_1 img {
            width: 44px;
            display: block;
            margin: auto;
        }
        
        

        /*  */
        .submenu.show,
        .submenu-below-hamburger.show {
            height: 250px;
        }

        .submenu:hover,
        .submenu-below-hamburger:hover {
            height: auto !important;
        }

        #hamburger-margin {
            width: 100%;
            height: 250px;
            display: none;
        }
        @media screen and (max-width: 700px) {
            .search {
                width: 400px;
                min-width: 0;
            }
        }

        @media screen and (max-width: 600px) {
            #top-header {
                text-align: left;
            }

            #title {
                margin-top: 10px;
                margin-left: 40px;
            }

            #title img {
                height: 120px;
            }

            #icons {
                width: 40%;
                margin-top: 10px;
            }
            #icons .btn {
                width: 80px;
            }
            .search {
                position: relative;
                text-align: center;
                width: 300px;
                margin: 0 auto;
            }

            #search-icon {
                position: absolute;
                right: 0;
                top: 20%;
                width: 40px;
            }

            #search-icon img {
                width: 100%;
            }

            #header-menus {
                display: inline-flex;
                width: 100%;
                height: 50px;
                justify-content: space-around;
            }
            #header-menus #m1 {
                font-size: 20px;
            }
            
        }

        .where_title {
            margin: 0 auto;
            border-bottom: 1px solid black;
            font-size: 40px;
            width: 90%;
        }
        .where-box {
            margin: 20px auto;
            width: 90%;
            display: flex;
            justify-content: space-between;
            background-color: rgb(241, 250, 243);
            height: 700px;
            border-radius: 15px;
        }
        .where_map {
            margin-left: 10px;
            width: 40%;
        }
        .where_map-img {
            width: 100%;
            overflow: hidden;
            border: 1px solid black;
            border-radius: 10px;
        }
        .where_map-img img {
            width: 100%;
        }
        .where_details {
            width: 55%;
        }
        .where_detail {
            font-size: 20px;
            margin: 30px;
        }
        .foot {
            background-color: rgb(94, 94, 94);
            height: 200px;
            width: 100%;
            color: white;
        }
        .foot-box {
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;
        }
        .foot_left {
            width: 40%;
        }
        .foot_right {
            width: 40%;
        }
        .foot_title {
            font-size: 23px;
            margin-bottom: 10px;
            margin-top: 40px;
            margin-left: 30px;
        }
        .foot_text {
            font-size: 15px;
            margin-bottom: 5px;
            margin-left: 30px;
            display: flex;
        }
        .foot_btn {
            width: 120px;
            height: 30px;
            color: white;
            background-color: rgb(94, 94, 94);
            border: 1px solid rgb(151, 151, 151);
            font-family: 'Cafe24Supermagic-Bold-v1.0';

        }
    </style>


</head>

<body>
<form>
    <div data-include-path="foot.html"></div>
 
    <script>
 
        window.addEventListener('load', function() {
            var allElements = document.getElementsByTagName('*');
            Array.prototype.forEach.call(allElements, function(el) {
                var includePath = el.dataset.includePath;
                if (includePath) {
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function () {
                        if (this.readyState == 4 && this.status == 200) {
                            el.outerHTML = this.responseText;
                        }
                    };
                    xhttp.open('GET', includePath, true);
                    xhttp.send();
                }
            });
        });
 
    </script>
    <br>
    <br>
    <div id="hamburger-margin"></div>
    <div class="where_title">찾아오시는길</div>
    <div class="where-box">
        <div class="where_map">
            <div style="font-size: 30px; margin: 10px;">지도</div>
            <div class="where_map-img"><img src="img/map.PNG" alt="지도 이미지">></div>
        </div>
        <div class="where_details">
            <div style="font-size: 30px; margin: 10px;">상세</div>
            <div class="where_detail">ADDRESS: 충청남도 천안시 동남구 대흥동 134 8층 4강의실</div>
            <div class="where_detail">TEL: 000-0000-0000 / FAX: 000-000-0000</div>
            <div class="where_detail" style="border-bottom: 1px solid black;">EMAIL: aaaaaaaaaa@aaaaa.aaa</div>
            <div style="font-size: 30px; margin: 10px;">교통편</div>
            <div class="where_detail">지하철 1호선 천안역 3번출구</div>
            <div class="where_detail" style="border-bottom: 1px solid black;">천안역 동부광장 버스 하차</div>
        </div>
    </div>
   

</body>


<script>
    
   
    
    // 페이지가 로드될 때 실행될 함수
    document.addEventListener('DOMContentLoaded', function () {
        // 모든 서브 메뉴 요소를 선택합니다.
        const submenus = document.querySelectorAll('.submenu, .submenu-below-hamburger');

        // 모든 서브 메뉴의 'show' 클래스를 제거하여 초기에는 숨깁니다.
        submenus.forEach(submenu => {
            submenu.classList.remove('show');
        });
    });

    // 햄버거 버튼 요소를 선택합니다.
    const hamburgerButton = document.querySelector('.m1_1');

    // 모든 서브 메뉴 요소를 선택합니다.
    const submenus = document.querySelectorAll('.submenu');

    // 모든 햄버거 아래 서브 메뉴 요소를 선택합니다.
    const submenusBelowHamburger = document.querySelectorAll('.submenu-below-hamburger');

    // 햄버거 버튼 클릭 상태를 저장하는 변수를 만듭니다.
    let isHamburgerClicked = false;

    // 햄버거 버튼 클릭 시 이벤트 리스너를 추가합니다.
    hamburgerButton.addEventListener('click', (e) => {
        // 클릭 이벤트를 중단하여 호버 효과가 유지되도록 합니다.
        e.preventDefault();

        // 햄버거 버튼 클릭 상태를 토글합니다.
        isHamburgerClicked = !isHamburgerClicked;
        document.querySelector("#hamburger-margin").style.display = 'block';

        // 모든 메뉴의 서브 메뉴를 토글하여 보이거나 숨깁니다.
        submenus.forEach(submenu => {
            if (isHamburgerClicked) {
                submenu.classList.add('show'); // 보이게 설정
            } else {
                submenu.classList.remove('show'); // 숨기게 설정
                document.querySelector("#hamburger-margin").style.display = 'none';

            }
        });

        // 햄버거 아래의 서브 메뉴도 토글하여 보이거나 숨깁니다.
        submenusBelowHamburger.forEach(submenu => {
            if (isHamburgerClicked) {
                submenu.classList.add('show'); // 보이게 설정
            } else {
                submenu.classList.remove('show'); // 숨기게 설정
            }
        });
    });
</script>
<%@ include file="Footer.jsp" %>
</form>

</html>