카테고리 없음
2023. 10. 19 (목) / Day 94
backandfrontdeveloper
2023. 10. 19. 12:29
728x90
프로젝트 파일들 jsp로 옮기고 수정하기
목록으로 나 작성하기에 마우스를 가져다 놓으면 Hover 가 된다.
↑ 이런게 Hover가 된다.
jsp
공지사항
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공지사항</title>
<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_underbar {
width: 750px;
border-bottom: 3px solid rgb(218, 241, 225);
}
.notice_title {
width: 765px;
border-bottom: 2px 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;
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 {
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>
<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"> </span>
제목 : 공지사항 안내입니다.
<span>
<span> 작성일 : 2023.08.24</span>
</h4>
<div class="notice_underbar">
</div>
<div class="subject">
</div>
<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>
</body>
</html>
jsp
공지사항 작성하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<title>공지사항작성</title>
<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;
/* 기본 배경색 및 글자색 설정 */
background-color : rgb(218, 241, 225);
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 :10px;
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:8px
}
.notice_area button {
width: 100px;
height: 35px;
border: 1px solid rgb(190, 190, 190);
color: black;
background: rgb(218, 241, 225);
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;
}
</style>
</head>
<body>
<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"> </span> 제목
<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"> </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>
</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>
<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;
}
</style>
</head>
<body>
<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"> </span> 제목
</h4>
<span class="input_area"> <input type="text" name="title"
required>
</span>
<h4>
<span class="title_span"> </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>
</body>
</html>