1. 특정페이지로 넘어가는 방법
✏️ Test1.
- ex, 홈페이지 내 게시판, 회원가입 등등 클릭
💻 입력
index.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h3>JSP 첫시간 - 수인</h3>
1. <a href="<%=cp %>/score/list.jsp">성적처리(JSP)</a><br/>
2. <a href="<%=cp %>/naver/naver.jsp">네이버 회원가입(JSP)</a><br/>
3. <a href="<%=cp %>/board/list.jsp">게시판(JSP)</a><br/>
</body>
</html>📌 출력
📂 퀀텀 설치
- 복사완료
📌 eclipse에서 퀀텀DB 보는법
2. 게시판 만들기
✏️ Test2.
⬇️ css
padding: 1px 6px 1px 6px;
: padding : ↑ →↓←순서
#을 쓰는건 id로 받아야함- 넓은 범위에 쓸 때
#bbsCreated db { }
: #bbsCreated (부모) 가 적용된/ 안에 있는 곳에 적용해라
.boxTA: TextArea
⬇️ jsp
css파일 만드는법
외부 css불러오는 법
- link
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/style.css>"/>
이름 안썼을 때 경고문 alert
💻 입력
board폴더
css폴더
style.css- 공용
created.css
article.css
list.css
js폴더
article.jsp
created.jsp
list.jsp
⬇️ created.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게 시 판</title>
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/style.css" />
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/created.css" />
<script type="text/javascript" src="<%=cp%>/board/js/util.js"></script>
<script type="text/javascript">
function sendIt() {
let f = document.myForm;
str = f.subject.value;
str = str.trim();
if (!str) {
alert("\n제목을 입력하세요.");
f.subject.focus();
return;
}
f.subject.value = str;
str = f.name.value;
str = str.trim();
if (!str) {
alert("\n이름을 입력하세요.");
f.name.focus();
return;
}
/* if(!isValidKorean(str)){ //한글필터링
alert("\n이름을 정확히 입력하세요.");
f.name.focus();
return;
} */
f.name.value = str;
if(f.email.value){
if(!isValidEmail(f.email.value)){
alert("\n정상적인 E-Mail을 입력하세요.");
f.email.focus();
return;
}
}
str = f.content.value;
str = str.trim();
if (!str) {
alert("\n내용을 입력하세요.");
f.content.focus();
return;
}
f.content.value = str;
str = f.pwd.value;
str = str.trim();
if (!str) {
alert("\n패스워드를 입력하세요.");
f.pwd.focus();
return;
}
f.pwd.value = str;
f.action = "<%=cp%>/board/created_ok.jsp";
f.submit();
}
</script>
</head>
<body>
<div id="bbs">
<div id="bbs_title">게 시 판</div>
<form action="" method="post" name="myForm">
<div id="bbsCreated">
<div class="bbsCreated_bottomLine">
<dl>
<dt>제 목</dt>
<dd>
<input type="text" name="subject" size="60" maxlength="100"
class="boxTF" />
</dd>
</dl>
</div>
<div class="bbsCreated_bottomLine">
<dl>
<dt>작 성 자</dt>
<dd>
<input type="text" name="name" size="35" maxlength="20"
class="boxTF" />
</dd>
</dl>
</div>
<div class="bbsCreated_bottomLine">
<dl>
<dt>E - Mail</dt>
<dd>
<input type="text" name="email" size="35" maxlength="50"
class="boxTF" />
</dd>
</dl>
</div>
<div id="bbsCreated_content">
<dl>
<dt>내 용</dt>
<dd>
<textarea rows="12" cols="63" name="content" class="boxTA"
style="resize: none; background-color: #ffffff"></textarea>
</dd>
</dl>
</div>
<div class="bbsCreated_noLine">
<dl>
<dt>패스워드</dt>
<dd>
<input type="text" name="pwd" size="35" maxlength="7"
class="boxTF" /> (게시물 수정 및 삭제시 필요!)
</dd>
</dl>
</div>
</div>
<div id="bbsCreated_footer">
<input type="button" value="등록하기" class="btn2" onclick="sendIt();" />
<input type="reset" value="다시입력" class="btn2"
onclick="document.myForm.subject.focus();" /> <input type="button"
value="작성취소" class="btn2" onclick="location='<%=cp%>/board/list.jsp';" />
</div>
</form>
</div>
</body>
</html>⬇️ article.jsp`
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게 시 판</title>
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/style.css" />
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/article.css" />
</head>
<body>
<div id="bbs">
<div id="bbs_title">게 시 판</div>
<div id="bbsArticle">
<div id="bbsArticle_header">게시물 제목</div>
<div class="bbsArticle_bottomLine">
<dl>
<dt>작성자</dt>
<dd>이이담</dd>
<dt>줄 수</dt>
<dd>10</dd>
</dl>
</div>
<div class="bbsArticle_bottomLine">
<dl>
<dt>등록일</dt>
<dd>2024-1-10</dd>
<dt>조회수</dt>
<dd>10</dd>
</dl>
</div>
<div id="bbsArticle_content">
<table width="600" border="0">
<tr>
<td style="padding: 20px 80px 20px 62px;" valign="top"
height="200">게시물 내용</td>
</tr>
</table>
</div>
</div>
<div class="bbsArticle_noLine" style="text-align: right;">
From : 127.0.0.1</div>
<div id="bbsArticle_footer">
<div id="leftFooter">
<input type="button" value=" 수정 " class="btn2" onclick="" />
<input type="button" value=" 삭제 " class="btn2" onclick="" />
</div>
<div id="rightFooter">
<input type="button" value=" 리스트 " class="btn2"
onclick="location='<%=cp%>/board/list.jsp';" />
</div>
</div>
</div>
</body>
</html> ⬇️ list.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게 시 판</title>
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/style.css"/>
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/list.css"/>
<script type="text/javascript">
function searchData(){ //검색
var f = document.searchForm;
f.submit(); //자기자신 한번 호출
}
</script>
</head>
<body>
<div id="bbsList">
<div id="bbsList_title">
게 시 판
</div>
<div id="bbsList_header">
<div id="leftHeader">
<form action="" name="searchForm" method="post">
<select name="searchKey" class="selectField">
<option value="subject">제목</option>
<option value="name">작성자</option>
<option value="content">내용</option>
</select>
<input type="text" name="searchValue" class="textField"/>
<input type="button" value=" 검 색 " class="btn2"
onclick="searchData();">
</form>
</div>
<div id="rightHeader">
<input type="button" value=" 글올리기 " class="btn2"
onclick="location='<%=cp%>/board/created.jsp';"/>
</div>
</div>
<div id="bbsList_list">
<div id="title">
<dl>
<dt class="num">번호</dt>
<dt class="subject">제목</dt>
<dt class="name">작성자</dt>
<dt class="created">작성일</dt>
<dt class="hitCount">조회수</dt>
</dl>
</div>
<div id="lists">
<dl>
<dd class="num">1</dd>
<dd class="subject">게시판 만들기</dd>
<dd class="name">이이담</dd>
<dd class="created">2024-1-10</dd>
<dd class="hitCount">10</dd>
</dl>
</div>
<div id="footer">
<p>
1 2 3
</p>
</div>
</div>
</div>
</body>
</html> ⬇️📌⭐ util.js
// 내용의 값의 빈공백을 trim(앞/뒤)
String.prototype.trim = function() {
var TRIM_PATTERN = /(^\s*)|(\s*$)/g;
return this.replace(TRIM_PATTERN, "");
};
// E-Mail 검사
function isValidEmail(email) {
var format = /^((\w|[\-\.])+)@((\w|[\-\.])+)\.([A-Za-z]+)$/;
if (email.search(format) != -1)
return true; //올바른 포맷 형식
return false;
}
// 한글 필터링
function isValidKorean(data){
// UTF-8 코드 중 AC00부터 D7A3 값이지 검사
var format = /^[\uac00-\ud7a3]*$/g;
if (data.search(format) != -1)
return true; //올바른 포맷 형식
return false;
}
// 날짜 검사
function isValidDate(year, month, day) {
var days = new Array (31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if(year%4==0 && year%100 !=0 || year%400==0)
days[1]=29;
else
days[1]=28;
if(month < 1 || month > 12)
return false;
if(day > days[month-1] || day < 1)
return false;
return true;
}
✨article.css
@CHARSET "UTF-8";
#bbs {
width:600px;
margin:30px auto;
text-align:left;
}
#bbs_title {
width:574px;
padding-left:20px;
height:40px;
border:3px solid #D6D4A6;
text-align:left;
font-weight: bold;
line-height:40px;
font-size:10pt;
margin-bottom:30px;
}
#bbsArticle {
width:600px;
overflow: visible;
border-top:3px solid #E6D4A6;
border-bottom:3px solid #E6D4A6;
text-align:left;
}
#bbsArticle_header {
height:35px;
line-height:35px;
border-bottom:2px solid #DBDBDB;
text-align:center;
}
#bbsArticle dt {
float:left;
height:35px;
width:60px;
line-height:35px;
text-align:center;
background-color:#EEEEEE;
}
#bbsArticle dd {
float:left;
height:35px;
width:230px;
line-height:35px;
text-align:left;
padding-left:10px;
}
.bbsArticle_bottomLine {
height:35px;
line-height:35px;
border-bottom:1px solid #DBDBDB;
clear:both;
text-align:left;
}
.bbsArticle_noLine {
height:35px;
line-height:35px;
clear:both;
text-align:left;
}
#bbsArticle_content {
overflow: visible;
border-bottom:1px solid #DBDBDB;
text-align:left;
}
#bbsArticle_footer {
clear:both;
height:32px;
line-height:32px;
margin-bottom:20px;
}
#bbsArticle_footer #leftFooter{
float:left;
width:300px;
text-align:left;
}
#bbsArticle_footer #rightFooter{
float:right;
width:300px;
text-align:right;
}
✨created.css
@charset "UTF-8";
#bbs {
width:600px;
margin:30px auto;
text-align:left;
}
#bbs_title {
width:574px;
padding-left:20px;
height:40px;
border:3px solid #D6D4A6;
text-align:left;
font-weight: bold;
line-height:40px;
font-size:10pt;
margin-bottom:30px;
}
#bbsCreated {
width:600px;
overflow: visible;
border-top:3px solid #DBDBDB;
border-bottom:3px solid #DBDBDB;
text-align:left;
}
.bbsCreated_bottomLine {
height:35px;
line-height:35px;
border-bottom:1px solid #DBDBDB;
clear:both;
text-align:left;
}
.bbsCreated_bottomLine dl {
margin: 0px;
padding: 0px;
}
.bbsCreated_noLine {
height:35px;
line-height:35px;
clear:both;
text-align:left;
}
.bbsCreated_noLine dl{
margin: 0px;
padding: 0px;
}
#bbsCreated_content {
height:170px;
line-height:170px;
border-bottom:1px solid #DBDBDB;
clear:both;
text-align:left;
}
#bbsCreated_content dl {
margin: 0px;
padding: 0px;
}
#bbsCreated dt {
float:left;
height:35px;
width:80px;
line-height:35px;
text-align:left;
padding-left:20px;
background-color:#EEEEEE;
}
#bbsCreated dd {
float:left;
height:35px;
width:440px;
line-height:35px;
text-align:left;
padding-left:10px;
}
#bbsCreated_content dt {
float:left;
height:170px;
width:80px;
text-align:left;
padding-left:20px;
background-color:#EEEEEE;
}
#bbsCreated_content dd {
float:left;
height:170px;
width:440px;
line-height:170px;
text-align:left;
padding-left:10px;
}
#bbsCreated_footer {
width:600px;
overflow: visible;
clear:both;
height:50px;
line-height:50px;
margin-bottom:20px;
text-align:center;
}
.boxTF {
border:1px solid;
height:15px;
margin-top:7px;
padding:2px 2px 2px 2px;
border-color:#666666;
background-color:#ffffff;
font-family:"굴림";
font-size:9pt;
}
.boxTA {
border:1px solid;
height:150px;
margin-top:7px;
padding:2px 2px 2px 2px;
border-color:#666666;
background-color:#ffffff;
font-family:"굴림";
font-size:9pt;
} ✨list.css
@CHARSET "UTF-8";
#bbsList {
width:690px;
margin:30px auto;
text-align:left;
}
#bbsList_title {
width:664px; /* 690px - (padding-left+border:3px+border:3px) */
padding-left:20px;
height:40px;
border:3px solid #D6D4A6;
text-align:left;
font-weight: bold;
line-height:40px;
font-size:10pt;
margin-bottom:30px;
}
#bbsList_header {
height:27px;
}
#bbsList_header #leftHeader{
float:left;
width:345px;
text-align:left;
}
#bbsList_header #rightHeader{
float:right;
width:345px;
text-align:right;
}
#bbsList_header .selectFiled {
border:1px solid;
border-color:#666666;
background-color:#ffffff;
font-family:굴림;
font-size:9pt;
}
#bbsList_header .textFiled {
border:1px solid;
height:13px;
padding:2px 2px 2px 2px;
border-color:#666666;
background-color:#ffffff;
font-family:"굴림";
font-size:9pt;
}
#bbsList_list {
clear:both;
}
#bbsList_list dd {
float:left;
height:27px;
line-height:27px;
text-align:center;
}
#bbsList_list #title {
height:30px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background-color: #E6E4E6;
}
#bbsList_list #title dl {
height:27px;
border-left:0px solid #5db062;
border-right:0px solid #5db062;
}
#bbsList_list #title dt {
float:left;
line-height:34px;
text-align:center;
}
#bbsList_list .num {width:50px;}
#bbsList_list .subject {width:420px;}
#bbsList_list .name {width:90px;}
#bbsList_list .created {width:65px;}
#bbsList_list .hitCount {width:60px;}
#bbsList_list #lists {
clear:both;
}
#bbsList_list #lists dl {
float:left;
border-bottom:1px solid #E4E4E4;
}
#bbsList_list dd.subject {
width:410px;
margin-left:10px;
text-align:left;
}
#bbsList_list a {
line-height: 27px;
}
#bbsList_list #footer {
clear:both;
height:32px;
line-height:32px;
margin-top:5px;
text-align:center;
}
✨style.css
@CHARSET "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 9pt;
font-family:굴림;
}
a {
cursor: hand;
color: #000000;
text-decoration: none;
font-size: 9pt;
line-height: 150%;
}
a:hover, a:active {
font-size: 9pt;
color: #F28011;
text-decoration: underline;
}
ul {
list-style: none;
}
td {font-size: 9pt;}
.btn1 {
font-size: 9pt;
color:rgb(0,0,0);
background-color:rgb(245,245,245);
line-height:16px;
}
.btn2 {
color:#000000;
font: normal 9pt '굴림','trebuchet ms',helvetica,sans-serif;
background-color:#E4E4E4;
border:1px solid;
border-color: #696 #363 #363 #696;
line-height:16px;
padding:1px 6px 1px 6px;
}
📌 출력
