이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.
이 게시물의 소스코드는 게시판 만들기(2016) / 게시판 - Front End 개발에서 이어집니다.
board.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.
board.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 board.git 을 clone 합니다.
- Github에서 소스코드 보기: https://github.com/a-mean-blogger/board/tree/ae351d7d755341de7173740dfcde31e39e89c2ff
/* * 이 강의는 2020년 버전으로 update되었습니다. -> 2020년 버전 보기 */
bootstrap을 쓰면 일단 사이트들이 비슷비슷하게만 만들어 지는데, 여기에 자신만의 css를 덧입히면 개성있는 사이트를 만들 수 있습니다.
아래와 같은 디자인으로 한번 만들어 보겠습니다.
주황색은 변경된 파일, 회색은 변화가 없는 파일입니다.
<!-- 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에서 마음에 드는 무료 폰트를 골라 내 프로젝트에서 사용할 수 있습니다.)
/* 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는 딱히 설명할 건 없고 마음에 들때까지 고치시면 됩니다.
다음포스팅은 회원가입입니다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기