1. 게시판 구현
실행 화면
코드
HTML & Java Script
<body>
<table class="table">
<tr><td colspan="2"><h2>게시판</h2></td></tr>
<tr class="header">
<td class="num">번호</td>
<td class="title">제목</td>
<td>작성자</td>
<td>작성날짜</td>
</tr>
<script>
var i, day = 20;
for (i = 10; i > 0; i--) {
document.write("<tr class='body'>");
document.write("<td>" + i +"</td>");
document.write("<td class='title'>제목입니다.</td>");
document.write("<td>작성자</td>");
document.write("<td>24-01-" + day-- + "</td>");
document.write("</tr>");
}
</script>
</table>
<br>
<table>
<tr>
<td><button onclick="location.href='write.html'">글쓰기</button></td>
</tr>
</table>
</body>table태그를 사용하여 요소를 배치하였다.- 반복문을 사용하여 게시글 목록을 출력하였다.
i,day변수를 사용하여 가장 최신 글이 위로 올라오도록 하였다.- 버튼을
write.html에 연결하여 클릭 시 글쓰기 페이지로 이동한다.
CSS
table {
margin: auto;
width: 700px;
border-radius: 5px;
border-collapse: collapse;
border-top: none;
}
.header {
background-color: rgb(218, 231, 255);
text-align: center;
}
.table td, .table th {
border-bottom: 1px lightgray solid;
height: 30px;
font-size: 14px;
}
.num {
width: 50px;
}
.title {
width: 500px;
}
.body {
text-align: center;
}
.body .title {
text-align: left;
}
button {
width: 100px;
height: 40px;
font-size: 15px;
border: 0;
outline: 1.5px rgb(68, 136, 244) solid;
border-radius: 5px;
padding-left: 10px;
background-color: rgb(164, 199, 255);
}
button:active {
width: 100px;
height: 40px;
font-size: 15px;
border: 0;
border-radius: 5px;
outline: 1.5px rgb(27, 76, 155) solid;
padding-left: 10px;
background-color: rgb(68, 136, 244);
}전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta .name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판</title>
<style>
table {
margin: auto;
width: 700px;
border-radius: 5px;
border-collapse: collapse;
border-top: none;
}
.header {
background-color: rgb(218, 231, 255);
text-align: center;
}
.table td, .table th {
border-bottom: 1px lightgray solid;
height: 30px;
font-size: 14px;
}
.num {
width: 50px;
}
.title {
width: 500px;
}
.body {
text-align: center;
}
.body .title {
text-align: left;
}
button {
width: 100px;
height: 40px;
font-size: 15px;
border: 0;
outline: 1.5px rgb(68, 136, 244) solid;
border-radius: 5px;
padding-left: 10px;
background-color: rgb(164, 199, 255);
}
button:active {
width: 100px;
height: 40px;
font-size: 15px;
border: 0;
border-radius: 5px;
outline: 1.5px rgb(27, 76, 155) solid;
padding-left: 10px;
background-color: rgb(68, 136, 244);
}
</style>
</head>
<body>
<table class="table">
<tr><td colspan="2"><h2>게시판</h2></td></tr>
<tr class="header">
<td class="num">번호</td>
<td class="title">제목</td>
<td>작성자</td>
<td>작성날짜</td>
</tr>
<script>
var i, day = 20;
for (i = 10; i > 0; i--) {
document.write("<tr class='body'>");
document.write("<td>" + i +"</td>");
document.write("<td class='title'>제목입니다.</td>");
document.write("<td>작성자</td>");
document.write("<td>24-01-" + day-- + "</td>");
document.write("</tr>");
}
</script>
</table>
<br>
<table>
<tr>
<td><button onclick="location.href='write.html'">글쓰기</button></td>
</tr>
</table>
</body>
</html>2. 글쓰기 구현
실행 화면
코드
HTML
<body>
<form action="board.html" method="post">
<table>
<tr><td><h2>글쓰기</h2></td></tr>
<tr><td class="header">Title</td></tr>
<tr><td><input type="text" placeholder="제목을 입력하세요" name="title"></td></tr>
<tr><td class="header">Comment</td></tr>
<tr><td><textarea placeholder="내용을 입력하세요" name="detail"></textarea></td></tr>
<tr><td><input type="submit" value="등록" onclick="alert('작성 완료!')"></td></tr>
</table>
</form>
</body>등록버튼을board.html과 연결하여작성 완료!라는 알림과 함께 게시판 페이지로 돌아간다.- jsp 구현은 하지 않았으나,
method를post로 설정하였다.
CSS
table {
margin: auto;
}
input[type="text"] {
border: 1.5px rgb(68, 136, 244) solid;
width: 500px;
height: 30px;
border-radius: 5px;
padding-left: 10px;
}
textarea {
border: 1.5px rgb(68, 136, 244) solid;
width: 500px;
height: 400px;
border-radius: 5px;
padding-left: 10px;
padding-top: 10px;
resize: none;
}
.header {
height: 30px;
}
input[type="submit"] {
width: 100px;
height: 40px;
font-size: 15px;
border: 0;
outline: 1.5px rgb(68, 136, 244) solid;
border-radius: 5px;
padding-left: 10px;
background-color: rgb(164, 199, 255);
}
input[type="submit"]:active {
width: 100px;
height: 40px;
font-size: 15px;
border: 0;
border-radius: 5px;
outline: 1.5px rgb(27, 76, 155) solid;
padding-left: 10px;
background-color: rgb(68, 136, 244);
}전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글쓰기</title>
<style>
table {
margin: auto;
}
input[type="text"] {
border: 1.5px rgb(68, 136, 244) solid;
width: 500px;
height: 30px;
border-radius: 5px;
padding-left: 10px;
}
textarea {
border: 1.5px rgb(68, 136, 244) solid;
width: 500px;
height: 400px;
border-radius: 5px;
padding-left: 10px;
padding-top: 10px;
resize: none;
}
.header {
height: 30px;
}
input[type="submit"] {
width: 100px;
height: 40px;
font-size: 15px;
border: 0;
outline: 1.5px rgb(68, 136, 244) solid;
border-radius: 5px;
padding-left: 10px;
background-color: rgb(164, 199, 255);
}
input[type="submit"]:active {
width: 100px;
height: 40px;
font-size: 15px;
border: 0;
border-radius: 5px;
outline: 1.5px rgb(27, 76, 155) solid;
padding-left: 10px;
background-color: rgb(68, 136, 244);
}
</style>
</head>
<body>
<form action="board.html" method="post">
<table>
<tr><td><h2>글쓰기</h2></td></tr>
<tr><td class="header">Title</td></tr>
<tr><td><input type="text" placeholder="제목을 입력하세요" name="title"></td></tr>
<tr><td class="header">Comment</td></tr>
<tr><td><textarea placeholder="내용을 입력하세요" name="detail"></textarea></td></tr>
<tr><td><input type="submit" value="등록" onclick="alert('작성 완료!')"></td></tr>
</table>
</form>
</body>
</html>
Someone has been here