[BACKEND] NODE.JS와 MYSQL을 활용한 웹 사이트를 CAFE24로 호스팅하기(5)


Bootstrap 다운로드


호스팅과 도메인 연결이 완료되었으니 UI 구성을 시작해본다. 스스로 괜찮은 디자인을 해낼 자신이 없기 때문에, MIT 라이선스의 Bootstrap Template을 이용할 것이다. 아래 화면 우측의 Free Download를 클릭해 다운로드 받았다.


저작권 규정도 확인한 뒤, 철저히 준수한다.




CSS 및 template.js 구성


로그인 페이지, 글쓰기 페이지, 개별 게시글 페이지의 html 소스를 template.js에 제작하고, 각 페이지를 위한 CSS 파일을 제작해 연결한다. 디렉토리 구조는 아래와 같으며, 자세한 소스코드는 github에 올려놓았다.

> root
    > node_modules
    > views
        > css
            > signin.css
            > styles.css
            > write.css
        > js
            > template.js
    > web.js

웹 사이트 소스코드 바로가기


제작이 완료된 로그인 페이지는 다음과 같다.



제작이 완료된 글쓰기 페이지는 다음과 같다. 글쓰기 기능은 텍스트 스타일 변경, 사진 첨부 등의 기능을 제공하는 Summernote를 이용하여 제작했다.




Summernote 추가


글쓰기 페이지를 만들기 위해 Summernote를 사용하였다. head 태그에 필요한 link를 넣고, script 태그에 jQuery 코드도 넣어주었다. 이와 같은 과정을 마치면, id를 summernote로 설정한 div, textarea 등의 태그에서 Summernote를 이용할 수 있다.

Summernote Getting Started 바로가기