jQuery-UI를 이용한 Trello clone project (2) - 웹 마크업 작성
지난 시간에
설계와 기획을 했다. 오늘은 지난번에 나온 디자인을 가지고 마크업을 작성해보자.
mark up 작성
정말 심플하게 갈 것 이다. 기존 Trello 는 수정같은 것을 할때는 수정 버튼을 누르고 카드의 상세 보기 모달을 띄우는 일과 같은 복잡한 동작은 모두 없애고 jQuery UI 를 이용해 아주 간단하게 작성해보겠다.
아래 그림은 기능을 명세한 것이다.
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script src="./js/script.js"></script>
<title>Trello</title>
</head>
<body>
<div class="wrapper">
<nav>PAPICO Trello</nav>
<div id="contentWrap">
<div id="projectTitleWrap">
<div id="title">Project test</div>
<form id="titleEdit">
<input id="projectTitle" type="text" placeholder="Project Name..." autocomplete="off">
<input type="submit" style="display: none">
</form>
</div>
<div id="listWrap">
<div class="list">
<div class="listTitleWrap">
<div class="title">list test</div>
<form class="titleEdit">
<input class="listTitle" type="text" placeholder="List Name..." autocomplete="off">
</form>
</div>
<div class="cardWrap">
<div class="cardContent">test1</div>
<div class="cardContent">test2</div>
<div class="cardContent">test3</div>
</div>
<div class="cardAddWrap">
<div class="addLabel" style="">+ Add another card</div>
<form class="addCard" style="display: none;">
<textarea name="" class="addCardContent" cols="30" rows="10" placeholder="card content..."></textarea>
<button class="btn btn-green addCardBtn">Add Card</button><span class="close" id="addCardClose">×</span>
</form>
</div>
</div>
</div>
<div id="listAddWrap">
<div id="addLabel">+ Add another list</div>
<form id="addList">
<input id="addListTitle" type="text" placeholder="Enter list title..." autocomplete="off">
<button class="btn btn-green">Add List</button><span class="close" id="addListClose">×</span>
</form>
</div>
</div>
</div>
</body>
</html>
나누어서 설명하겠다.
projectTitleWrap
<div id="projectTitleWrap">
<div id="title">Project test</div>
<form id="titleEdit">
<input id="projectTitle" type="text" placeholder="Project Name..." autocomplete="off">
<input type="submit" style="display: none">
</form>
</div>
프로젝트의 이름을 출력하는 곳으로 #title과 #titleEdit 으로 이루어져 있다.
listWrap
<div id="listWrap">
<div class="list">
<div class="listTitleWrap">
<div class="title">list test</div>
<form class="titleEdit">
<input class="listTitle" type="text" placeholder="List Name..." autocomplete="off">
</form>
</div>
<div class="cardWrap">
<div class="cardContent">test1</div>
<div class="cardContent">test2</div>
<div class="cardContent">test3</div>
</div>
<div class="cardAddWrap">
<div class="addLabel" style="">+ Add another card</div>
<form class="addCard" style="display: none;">
<textarea name="" class="addCardContent" cols="30" rows="10" placeholder="card content..."></textarea>
<button class="btn btn-green addCardBtn">Add Card</button><span class="close" id="addCardClose">×</span>
</form>
</div>
</div>
</div>
list 들을 관리하는 영역으로 list 안에는 제목, 카드 목록, 카드 추가 영역이 있다.
listAddWrap
<div id="listAddWrap">
<div id="addLabel">+ Add another list</div>
<form id="addList">
<input id="addListTitle" type="text" placeholder="Enter list title..." autocomplete="off">
<button class="btn btn-green">Add List</button><span class="close" id="addListClose">×</span>
</form>
</div>
리스트를 추가 하는 영역이다.
결과화면
아직 디자인을 입히지 않아서 디자인이 이상하지만 css 를 작성하면 나름 괜찮아 질 것이다.
다음 시간에
다음 시간에는 작성했던 마크업에 스타일을 입히는 작업을 하겠다.
'Side Project' 카테고리의 다른 글
| [PROJECT] jQuery-UI를 이용한 Trello clone project (4) Trello 웹 스크립트 작성 (0) | 2018.10.16 |
|---|---|
| [PROJECT] jQuery-UI를 이용한 Trello clone project (3) Trello 웹 스타일 입히기 (0) | 2018.10.16 |
| [PROJECT] jQuery-UI를 이용한 Trello clone project (1) - 설계 및 기획 (0) | 2018.10.08 |
| [PROJECT] Socket.io 를 이용한 채팅 어플리케이션 (9) - 마무리 (4) | 2018.09.28 |
| [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (8) - 채팅 기능 구현 (들어갔으니 채팅을 치자 - 클라이언트) (1) | 2018.09.28 |
