1. 문제
2. 구현
01. 공통 CSS
/*Common*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header, main, footer {
margin: 10px 0;
border: 2px solid #000;
}
.btn-group {
text-align: right;
}
.btn {
padding: 2px 20px;
border: 3px solid #000;
background-color: #fff;
cursor: pointer;
}
.btn:hover {
background-color: #000;
color: #fff;
}
/* Header */
header {
text-align: center;
padding: 10px;
}
header h1 {
font-size: 1.3rem;
font-weight: 400;
}
/* Main */
.inner {
width: 80%;
margin: auto;
padding: 10px;
}
table {
width: 100%;
margin: 20px auto;
border-collapse: collapse;
}
table tr,
table td,
table th {
border: 1px solid #000;
text-align: center;
padding: 5px 10px;
}
/* Footer */
footer {
width: 100%;
text-align: center;
padding: 15px;
position: absolute;
bottom: 0;
}02. 게시판
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판</title>
<link rel="stylesheet" href="./1.css">
<script src="./1.js" defer></script>
</head>
<body>
<div class="bodyContainer">
<header>
<h1>커뮤니티 사이트</h1>
</header>
<main>
<div class="inner">
<div>총 <span class="board-count"></span>개의 게시물이 있습니다</div>
<table>
<thead>
<th>번호</th>
<th>작성자</th>
<th>제목</th>
<th>작성일</th>
</thead>
</table>
<div class="btn-group">
<button class="btn">작성</button>
</div>
</div>
</main>
<footer>
<small>Copyright (C) 2018 정보처리산업기사 All Right Reserved</small>
</footer>
</div>
</body>
</html>
@import url('./main.css');
table th {
background-color: #ffff00;
}
table tr td:nth-child(3) {
text-align: left;
}
'use strict';
const borad = [
{
writer : "김회원",
title : "정보처리 산업기사 쉽다",
date : "2018-07-30 12:34"
},
{
writer : "김회원",
title : "웹 디자인 기능사 어렵다",
date : "2018-07-30 12:34"
},
{
writer : "이회원",
title : "정보처리 산업기사 어렵다",
date : "2018-07-30 12:34"
},
{
writer : "이회원",
title : "정보처리 산업기사 쉽다",
date : "2018-07-30 12:34"
},
{
writer : "박회원",
title : "ㅈㄱㄴ",
date : "2018-07-30 12:34"
},
{
writer : "박회원",
title : "제목 그대로 내용",
date : "2018-07-30 12:34"
},
{
writer : "강회원",
title : "하드코딩하는 사람들",
date : "2018-07-30 12:34"
},
{
writer : "나회원",
title : "github를 사용합시다",
date : "2018-07-30 12:34"
},
{
writer : "문회원",
title : "노는게 제일 좋아",
date : "2018-07-30 12:34"
},
{
writer : "지회원",
title : "여름아",
date : "2018-07-30 12:34"
},
];
const table = document.querySelector('table');
const tr = [];
const indexTd = [];
const writerTd = [];
const titleTd = [];
const dateTd = [];
for(let i = 0; i < borad.length; i++) {
tr[i] = document.createElement("tr");
indexTd[i] = document.createElement("td");
writerTd[i] = document.createElement("td");
titleTd[i] = document.createElement("td");
dateTd[i] = document.createElement("td");
indexTd[i].textContent = i+1;
writerTd[i].textContent = borad[i].writer;
titleTd[i].textContent = borad[i].title;
dateTd[i].textContent = borad[i].date;
table.appendChild(tr[i]);
tr[i].appendChild(indexTd[i]);
tr[i].appendChild(writerTd[i]);
tr[i].appendChild(titleTd[i]);
tr[i].appendChild(dateTd[i]);
};
const boardCount = document.querySelector('.board-count');
boardCount.textContent = borad.length;03. 게시물 작성화면
<!DOCTYPE html>
<html lang=＂ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시물 작성 화면</title>
<link rel="stylesheet" href="./2.css">
</head>
<body>
<div class="bodyContainer">
<header>
<h1>커뮤니티 사이트</h1>
</header>
<main>
<div class="inner">
<h2>게시물 작성</h2>
<form action="javascript:void">
<table>
<tr>
<td>작성자</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>내용</td>
<td><textarea cols="30" rows="10"></textarea></td>
</tr>
</table>
</form>
<div class="btn-group">
<button class="btn">목록</button>
<button class="btn">완료</button>
</div>
</div>
</main>
<footer>
<small>Copyright (C) 2018 정보처리산업기사 All Right Reserved</small>
</footer>
</div>
</body>
</html>
@import url('./main.css');
.inner h2 {
text-align: center;
}
input,
textarea{
width: 100%;
border: 2px solid #000;
}04. 게시물 조회화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시물 조회화면</title>
<link rel="stylesheet" href="./3.css">
</head>
<body>
<div class="bodyContainer">
<header>
<h1>커뮤니티 사이트</h1>
</header>
<main>
<div class="inner">
<section class="search-board">
<h2>게시물 조회</h2>
<div class="search-board-info">
<div>제목 : <span id="info-title">정보처리 산업기사 쉽다</span></div>
<div>
작성자 : <span id="info-writer">김회원</span>
작성일 : <span id="info-date">2018-07-31 12:34</span>
</div>
</div>
<div class="search-board-content">jsp 쉽네요</div>
</section>
<section class="search-comment">
<h2>댓글 조회</h2>
<div>
<span class="comment-writer">김회원</span> /
<span class="comment-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> /
<span class="comment-date">2018-08-01 12:34:56</span> /
<span>삭제</span>
</div>
<div>
<span class="comment-writer">김회원</span> /
<span class="comment-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> /
<span class="comment-date">2018-08-01 12:34:56</span> /
<span>삭제</span>
</div>
</section>
<section class="writer-comment">
<h2>댓글작성</h2>
<form action="javascript:void(0)">
<input type="text">
<button class="btn">작성완료</button>
</form>
</section>
<div class="btn-group">
<button class="btn">목록</button>
<button class="btn">수정</button>
<button class="btn">삭제</button>
</div>
</div>
</main>
<footer>
<small>Copyright (C) 2018 정보처리산업기사 All Right Reserved</small>
</footer>
</div>
</body>
</html>
@import url('./main.css');
section {
border: 2px solid #000;
margin: 10px 0;
padding: 10px;
}
.search-board {
height: 300px;
}
.search-board h2 {
text-align: center;
}
.search-board .search-board-info {
margin: 20px 0;
}
.search-board .search-board-info div {
margin: 5px 0;
}
#info-writer {
margin-right: 100px;
}
/*search-commen*/
.search-comment h2,
.writer-comment h2 {
font-size: 1.2rem;
font-weight: 400;
padding: 5px 0;
}
.search-comment div {
margin: 5px 0;
}
/* writer-comment */
.writer-comment form {
display: flex;
}
.writer-comment input {
flex-grow: 1;
border: 2px solid #000;
margin-right: 10px;
}
아직까지는 코린이!