게시판 - 스타일 수정

/*
 * 이 강의는 2020년 버전으로 update되었습니다. -> 2020년 버전 보기
 */

bootstrap을 쓰면 일단 사이트들이 비슷비슷하게만 만들어 지는데, 여기에 자신만의 css를 덧입히면 개성있는 사이트를 만들 수 있습니다.
아래와 같은 디자인으로 한번 만들어 보겠습니다.

폴더구조

주황색은 변경된 파일, 회색은 변화가 없는 파일입니다.

코드 - ejs

<!-- views/partials/head.ejs -->

<!-- jquery  ... -->

<!-- bootstrap ... -->

<!-- web font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet" type="text/css">

<!-- my css  ... -->

<!-- <title>  ... -->

...으로 표시된 부분은 이전과 변화가 없는 부분입니다.
구글 웹폰트가 추가되었습니다. (https://fonts.google.com에서 마음에 드는 무료 폰트를 골라 내 프로젝트에서 사용할 수 있습니다.)

코드 - css

/* public/css/master.css */

/* global style */
form label{
 padding: 3px;
 margin-bottom: 0;
 font-weight: 300;
}
form .form-control{
 padding: 3px 7px;
 font-size: inherit;
 line-height: 20px;
 height: auto;
 border: 1px solid #ccc;
 border-radius: 3px;
 width: 100%;
}
form fieldset{
 margin: 7px 0 1px;
 padding: 0px 15px;
}
form .form-group{
 margin: 0;
 padding-bottom: 6px;
}
.form-horizontal .control-label {
 padding-top: 5px;
 text-align: left;
}
.buttons {
 margin: 7px 0;
 padding: 0 5px;
}
.buttons form{
 display: inline-block;
}
.buttons .btn-default{
 min-width: 55px;
 color: #165751;
 border: 1px solid #ccc;
 border-right: 1px solid #aaa;
 border-bottom: 1px solid #aaa;
 border-radius: 4px;
 padding: 5px 10px;
 background-color: #f5f5f5;
 font-size: 0.8em;
 font-weight: bold;
}
.buttons .btn-default:hover{
 text-decoration: none;
 position: relative;
 top: 1px;
 left: 1px;
 border: 1px solid #ccc;
 border-top: 1px solid #aaa;
 border-left: 1px solid #aaa;
}
.contentBox{
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
}
.contentBoxTop {
 font-size: 14px;
 font-weight: 600;
 margin: 0;
 border-bottom: 1px solid #ccc;
 background-color: #F5F5F5;
 padding: 6px 15px;
}

/* home style */
.home h1{
 color: darkseagreen;
}

/* post style */
.post {
 max-width: 670px;
 font-family: 'Open Sans', sans-serif;
 font-size: 12px;
}
.post h2 {
 color: tomato;
 text-align: center;
}
.post .post-body {
 white-space: pre-line;
 padding: 6px 15px 20px;
}
.post .post-info{
 font-size: 11px;
 margin: 5px;
 padding: 5px 10px;
 background-color: #E4E4E4;
 border: 0 solid black;
 border-radius: 5px;
}
.post .post-info>div{
 padding: 5px 0;
 border-top: 1px dotted #999;
}
.post .post-info>div:first-child{
 border-top: none;
}
.post .post-info span{
 display: inline-block;
 width: 40px;
}
.post-index .posts{
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
}
.post .posts th,
.post .posts td
{
 padding: 7px 5px;
}
.post .posts th:first-child,
.post .posts td:first-child
{
 padding-left: 15px;
}
.post .posts thead{
 background-color: #F5F5F5;
}
.post .posts thead tr th{
 border-bottom: 1px solid #ccc;
}
.post .posts tbody tr:nth-child(odd){
 background-color: #F4FFFF;
}
.post .posts tbody .noData{
 background-color: #FFFFFF;
 text-align: center;
}
.post .posts .date{
 text-align: center;
 width: 100px;
 padding-right: 15px;
}
.post-new,
.post-edit{
 max-width: 520px;
}

CSS 설명은 생략합니다. 

실행결과

마치며...

css는 딱히 설명할 건 없고 마음에 들때까지 고치시면 됩니다.
다음포스팅은 회원가입입니다.