강의를 듣고 있는 사이트에서 토이 프로젝트로 쇼핑리스트 사이트를 만드는 것이 나와서 직접 해보려고 한다.
일단 내가 대충 만든 레이아웃은 다음과 같다.
위의 디자인을 토대로 필요한 요소들을 html로 현재 만들고 있는 중이다.
아이콘들은 fontawesome을 이용했다.
<body>
<!-- Main Content -->
<div class="main">
<!-- Title -->
<div class="title">Shopping List</div>
<!-- Add Items -->
<div class="add">
<input type="add_text">
<input type="number" class="add_price">
<i class="add_add-button fas fa-plus-circle"></i>
</div>
<!-- Item List -->
<div class="item-list">
<button>Delete Checked</button>
<div class="item">
<input type="checkbox" class="item_checkbox">
<div class="item_name">name</div>
<div class="item_price">price</div>
<i class="item_edit-button fas fa-pen"></i>
</div>
<div class="item">
<input type="checkbox" class="item_checkbox">
<div class="item_name">name</div>
<div class="item_price">price</div>
<i class="item_edit-button fas fa-pen"></i>
</div><div class="item">
<input type="checkbox" class="item_checkbox">
<div class="item_name">name</div>
<div class="item_price">price</div>
<i class="item_edit-button fas fa-pen"></i>
</div>
</div>
<!-- Summary -->
<div class="horizontal-line"></div>
<div class="sum">
<div class="sum_total">Total: </div>
<div class="sum_checked-price">checked-price</div>
<div class="sum_unchecked-price">unchecked-price</div>
</div>
</div>
</body>[Main Content]
- 메인 요소들이 들어갈 div를 만들었다. DOM Tree에 많은 요소를 추가하는 꼴이 되지만 배경 이미지를 영수증으로 표현하기 위해서 그렇게 선택했다.
[Add Items]
- Input Box: 하나는 아이템 이름을 적기 위해, 다른 하나는 예상 가격을 적기 위해 2개의 인풋박스를 만들었다.
- +아이콘: 누르면 아이템 리스트에 아이템이 추가되도록 할 예정이다.
[Item List]
- 아이템들이 들어갈 곳이다.
- +아이콘을 누르면 아이템들이 리스트에 하나씩 생성되어야 하는데 그걸 어떻게 구현하게될지 아직 잘 모르겠어서 일단 간단하게 element를 3개 만들어두었다.
- Button: Delete Checked 버튼으로 체크되어져있는 아이템들을 모두 삭제한다.
[Item]
- Check Box: 해당 상품을 장바구니에 넣었는지 체크할 수 있도록 체크박스를 추가했다.
- Edit Icon: 에딧 아이콘을 누르면 간단하게 해당 아이템의 이름이나 가격을 수정할 수 있다.
[Summary]
- 요약으로 예상되는 가격을 알려준다.
- Checked-Price: 체크한 상품들의 총 가격
- Unchecked-Price: 체크되지 않은 상품들의 총 가격
'Study Log > Software Engineering' 카테고리의 다른 글
| [토이프로젝트] 쇼핑리스트: 자바스크립트 작성 (0) | 2021.12.01 |
|---|---|
| [토이프로젝트] 쇼핑리스트: CSS 작성 (0) | 2021.12.01 |
| 루비 온 레일즈 api 만들기 (2) (0) | 2021.08.22 |
| Ruby on Rails 공부하기_wsl2 환경 설정하기 (1) (0) | 2021.08.20 |
| CSS 정리하기 (0) | 2020.09.21 |
댓글