LMS Web 클론코딩 3 (Nav bar만들기, Markdown form 넣기)

2024/1/15

Front page를 먼저 그려놓고 이후 백엔드를 공부하고 연결하는 게 좋을 것 같다고 생각되어 3-4일은 Front에만 집중하려고 한다. html, css, js 그리고 일정 부분은 bootstrap을 사용했다.

 

모든 버튼에 대한 이벤트는 구현하지 않았고, 필요한 버튼만 클릭하면 다음 동작을 수행하도록만 구현해 놓았다.

메인/대쉬보드 페이지

 

사이드바/Nav bar

사이드바를 누르면 아이콘 배경색이 변하고, Nav bar가 나온다. Nav bar안에는 수강 강의 목록이 나오고 강의 목록을 선택하면 Qna게시판으로 이동한다.

QnA 게시판

 +Write버튼을 누르면 Write a post 페이지로 넘어간다.

Wirte a post 페이지

제목, 내용 그리고 파일 첨부가 가능하며 내용을 넣는 폼은 js의 마크다운 에디터인 SimpleMDE를 사용했다.