Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1주차 심화 + 2주차 기본/심화] 다현이의 가계부 #4

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

[1주차 심화 + 2주차 기본/심화] 다현이의 가계부 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0766760
Feat: 최초데이터, 총수입/총지출
moondda Oct 23, 2023
225ffe7
Feat: 수입/지출 필터링
moondda Oct 23, 2023
42663aa
Fix: 필터링 에러
moondda Oct 26, 2023
57059a6
Feat: 리스트 삭제
moondda Oct 26, 2023
6c2f40a
Refactor: px->rem
moondda Oct 26, 2023
2004073
Feat: 리스트 추가
moondda Oct 26, 2023
18718a6
Feat: 리스트 삭제 모달
moondda Oct 26, 2023
f1b0f89
Feat: 리스트 추가
moondda Oct 26, 2023
066b76d
Feat: 금액
moondda Oct 26, 2023
8c49dac
Feat: 모달 백그라운드
moondda Oct 26, 2023
2e39178
Feat: 1주차심화 말줄임표
moondda Oct 27, 2023
7e998b2
Test
moondda Oct 27, 2023
c59b435
refactor: 필요없는 주석 삭제
moondda Nov 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 81 additions & 64 deletions 1주차/4.가계부/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,92 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>가계부</title>
</head>
<body>
<header>다현이의 가계부</header>
<div class="my-account">
</head>
<body>
<div class="home">
<header class="main_header">다현이의 가계부</header>
<div class="my-account">
<div class="inner">
<div class="inner-1">나의 자산</div>
<div class="inner-2">2000723</div>
<div class="inner-3">
<div style="color: red;">+30000</div>
<div style="color:blue">-500000</div>
</div>
<div class="inner-1">나의 자산</div>
<div class="total"></div>
<div class="inner-3">
<div class="income"></div>
<div class="outcome"></div>
</div>
</div>
</div>
<div class="list-header-1"> < 10월 1일 > </div>
<div class="list-header-2">
</div>
<div class="list-header-1">< 10월 1일 ></div>
<div class="cancel_modal">
삭제하시겠습니까?
<button class="cancel_yes">예</button>
<button class="cancel_no">아니오</button>
</div>
<div class="list-header-2">
<div class="title">내역 리스트</div>
<div class="button">
<input type="checkbox" checked>수입</input> <!-- checked로 default -->
</div>
<div class="button">
<input type="checkbox" checked>지출</input>
</div>
<input type="checkbox" id="incomeCheckbox" value="income" checked />
<label for="incomeCheckbox">수입</label>
</div>
<div class="button">
<input type="checkbox" id="outcomeCheckbox" value="outcome" checked />
<label for="outcomeCheckbox">지출</label>
</div>
Comment on lines -22 to +37
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다현이도 전체적으로 클래스명 짓는 방식이 혼합되어 있는 것 같은데,
가독성이나 유지보수를 위해서라도 하나로 통일해주면 좋을 것 같아 !

특히 css에서는 bem 방식으로 class나 id 명을 짓는게 좋다고 해!
최근에 계속 react를 사용하다보니 class를 따로 지정해줄 일이 없어서 생각하지 못하고 있던 부분인데,
bem 방식을 활용하면 CSS를 쉽게 읽고, 쉽게 이해하고, 확장하기에 용이하다.고 하더라구!

이 자료 참고해보면 이해하기 쉬울 것 같아!

</div>
<section class="list-real"></section>
</div>
<div class="category_page">
<header class="main_header">카테고리 관리</header>
<section class="each_category">
<header class="category_header">수입 카테고리</header>
<div class="category_box">
<div class="category_block" id="incomeCategories"></div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요기 보면 class를 지정해줬는데, id를 한 번 더 지정해준 이유가 뭘까용!?

<input
type="text"
id="newCategoryInput"
placeholder="새 카테고리 입력"
/>
</div>
</section>
<section class="each_category">
<header class="category_header">지출 카테고리</header>
<div class="category_box">
<div class="category_block" id="outcomeCategories"></div>
<input
type="text"
id="newCategoryOutput"
placeholder="새 카테고리 입력"
/>
</div>
</section>
</div>
<section class="list-real">

<ul class="list-indiv">
<li class="category">식비</li>
<li class="content">버거킹 문정역</li>
<li class="price">-10800</li>
<li class="x">x</li>
</ul>

<ul class="list-indiv">
<li class="category">취미</li>
<li class="content">포토그레이강남2호첨</li>
<li class="price">-5000</li>
<li class="x">x</li>
</ul>

<ul class="list-indiv">
<li class="category">식비</li>
<li class="content">내가찜한닭</li>
<li class="price">-18000</li>
<li class="x">x</li>
</ul>


<ul class="list-indiv">
<li class="category">월급</li>
<li class="content">꼰떼넨떼</li>
<li class="price" style="color: red;">+7000000</li>
<li class="x">x</li>
</ul>

<ul class="list-indiv">
<li class="category">취미</li>
<li class="content">인터파크</li>
<li class="price">-110000</li>
<li class="x">x</li>
</ul>

</section>
<footer class="list-add">
<div class="button">+</div>
<button class="add_list">+</button>
<button class="category_list">···</button>
<button class="return_home">H</button>
</footer>
<div class="add_modal">
<div class="modal_header">내역 추가</div>

<button class="incomeModalButton">수입</button>
<button class="outcomeModalButton">지출</button>

<ul>
<li>종류</li>
<form>
<select class="category_option"></select>
</form>
<li>금액</li>
<input class="new_price" />
<li>내용</li>
<input class="new_content" />
</ul>
<button class="submitButton">저장하기</button>
<button class="closeModal">닫기</button>
</div>
<script src="./script.js"></script>
</body>
</html>
</body>
</html>
Loading