HTML | 게시판 / 글쓰기 구현

S·2024년 1월 31일

CSS Java Script html

WEB

목록 보기

2/8

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

이전 포스트

HTML | 로그인 / 회원가입 창 구현

다음 포스트

HTML | 게시판 / 글쓰기 구현

WEB

1. 게시판 구현

실행 화면

코드

HTML & Java Script

CSS

전체 코드

2. 글쓰기 구현

실행 화면

코드

HTML

CSS

전체 코드

HTML | 로그인 / 회원가입 창 구현

PHP | 개발 환경 설정 / 문법

0개의 댓글