[PROJECT] jQuery-UI를 이용한 Trello clone project (1) - 설계 및 기획

jQuery-UI를 이용한 Trello clone project (1) - 설계 및 기획

jQuery-UI 를 이용하여 Trello를 만들어 보자.

기본적으로 준비해야 할 것

• jQuery-UI 선행 학습

  이번에 사용할 옵션들을 지난 시간에 정리해 두었다.

  https://pa-pico.tistory.com/12

• 프로젝트 셋팅

clone_trello
|- index.html
|- css
|	|- style.css
|
|- scss
|	|- style.scss
|
|- js
	|- jquery-ui.min.js
	|- jquery-3.3.1.min.js
	|- script.js

• scss 사용

  설치 방법은 다른 블로그를 통해 얻고

  sass --watch scss/style.scss:css/style.css

  명령을 이용하면 실시간으로 scss 를 css 로 변환하며 개발할 수 있다.

설계 및 기획

• 기능

  원래 Trello는 일정을 관리하는 툴이라서 기능이 많지만 우리는 element 들의 이동 관련된 기능만을 구현할 것이다. 이 코드를 베이스로 기간을 정하는 것, DB 와 연결하는 것등은 차후 시간이 되면 개발해보겠다.

• 우리가 개발해야 할 기능

  • 프로젝트 제목 ( 생성, 수정 )
  • list ( 생성, 수정, 이동, 정렬 )
  • card ( 생성, 이동, 정렬 )

• 디자인

  디자인 초안은 이렇다.

  

다음 시간에

기본적인 마크업을 작성해보자.