게시판 - 스타일 수정

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

이 게시물의 소스코드는 게시판 만들기 / 게시판 - Front End 개발에서 이어집니다.

board.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.

git reset --hard
git pull
git reset --hard ae351d7
git reset --soft 6e060a3
npm install
atom .

board.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 board.git 을 clone 합니다.

git clone https://github.com/a-mean-blogger/board.git
cd board
git reset --hard ae351d7
git reset --soft 6e060a3
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/board/tree/ae351d7d755341de7173740dfcde31e39e89c2ff


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는 딱히 설명할 건 없고 마음에 들때까지 고치시면 됩니다.
다음포스팅은 회원가입입니다.

댓글

김남현 2017.11.02
master.css 에서 동일한 클래스를 두번 코딩하는 것은 어떤 의미를 갖는지요?
.form-horizontal .control-label {  padding-top: 5px;  text-align: left; } .form-horizontal .control-label {  padding-top: 3px;  text-align: left; }
I
Ian H 2017.11.02
@김남현,
코드는 괜찮은데 강의 본문에 실수가 있었네요. 수정하였습니다!
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP