[ 1주차 기본/심화 과제 ] 가계부 💸 #2

Yeonseo-Jo · 2023-10-13T10:11:27Z

✨ 구현 기능 명세

⭐️기본 과제

1. 제목

“OO이의 가계부”를 상단 제목으로 넣어줍니다.
2. 나의 자산

현재 나의 자산을 볼 수 있는 부분입니다.
- 나의 자산 박스 위치와 내부 요소들 모두 중앙 정렬 되도록 해주세요.
- 아래쪽에는 오늘의 총 수입과 총 지출이 나와있습니다. 총 수입과 총 지출의 색깔을 구분해주세요. (ex. 수입 : 파란색, 지출 : 빨간색)
3. 날짜
- 좌 우로 누를 수 있는 버튼과, 그 가운데 오늘의 날짜가 있습니다.
- 오늘의 날짜는 실제 날짜가 아닌, 임의로 지정하시면 됩니다.
4. 수입, 지출 선택

수입 선택시 수입만 지출 선택시 지출만 필터링되는 버튼입니다.
- input type=”checkbox”로 구현합니다. (기본 스타일도 괜찮습니다.)
- default는 수입, 지출 모두 checked 되어 있습니다.
5. 내역 리스트

수입 및 지출 내역 리스트입니다.
- 리스트는 flex로 배치합니다.
- 각 리스트에는 카테고리 내역 내용 지출 및 수입 금액 삭제 버튼 x 가 있습니다.
- 리스트 내부도 flex로 배치합니다. (선택)
- 리스트가 일정 height 초과시 리스트 영역 내에서 스크롤이 생깁니다.
- 지출과 수입 금액은 색깔 구분이 됩니다. (ex. 수입 : 파란색, 지출 : 빨간색)
6. 리스트 추가 버튼

최하단 가운데 추가 버튼이 있습니다.

⭐️ 심화 과제

1. checkbox input 커스텀
- checkbox input을 예쁘게 커스텀해주세요!
2. 내역 리스트
- 내역 내용이 일정 길이보다 길어질 경우 ... 로 말줄임 처리됩니다.
3. 반응형
- 어느 모바일 디바이스에서 봐도 전체적인 UI 정렬 및 레이아웃이 깨지지 않도록 구현합니다.

💎 PR Point

1️⃣ 나의 자산 영역

flex로 가운데 정렬

/* 나의 자산 */
.asset {
display: flex;
justify-content: center;
align-items: center;
...

}

.asset__box {
display: flex;
flex-direction: column;
align-items: center;
...

}

총 수입과 총 지출의 색깔 구분 : class명 활용! (전역으로 설정하여 이후 지출 내역 리스트에서도 활용)

.income {
color: blue;
}

.expense {
color: red;
}

2️⃣ 수입, 지출 선택

html :
- input type="checkbox"와 "label" 태그를 id 값으로 연결 하여 커스텀 했습니당
- 이때 checked 속성을 기본으로 주어 기본 값은 선택되어 있게 구현!

<article  class="history__detail">
<h3>내역 리스트</h3>
<div  class="history__detail__checkbox">
<input  type="checkbox"  id="checkbox-income"  checked />
<label  for="checkbox-income">수입</label>
<input  type="checkbox"  id="checkbox-expense"  checked />
<label  for="checkbox-expense">지출</label>
</div>
</article>

css : label 태그에 스타일을 주어 커스텀!

/* checkbox input 커스텀 */
input[type="checkbox"] {
display: none;
}

/*체크 박스 공통 속성 => label로 커스텀*/
input[id="checkbox-income"] + label,
input[id="checkbox-expense"] + label {
display: flex;
justify-content: center;
align-items: center;

width: 5rem;
height: 2rem;

border-radius: 0.5rem;

cursor: pointer;
}

input[id="checkbox-income"] + label {
background-color: transparent;
border: 0.1rem solid blue;
}
input[id="checkbox-income"]:checked + label {
background-color: blue;
color: white;
} 

input[id="checkbox-expense"] + label {
background-color: transparent;
border: 0.1rem solid red;
}
input[id="checkbox-expense"]:checked + label {
background-color: red;
color: white;
}

3️⃣ 내역 리스트

li 태그들을 감싸는 ul 태그에 flex를 주어 정렬, gap으로 리스트 간 여백 통일
리스트 내부 정렬 : flex, margin: auto 이용
말줄임표 : white-space, overflow, text-overflow 속성 활용

.history-contents {
width: 8.5rem;

/* 말줄임표 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

color: #242526;

font-size: 1rem;
}

일정 height 초과시 리스트 영역 내에서 스크롤 : height 값 주고, overflow-y 속성 주기 (이때, 전체 스크롤은 방지되도록 설정)

body {
display: flex;
flex-direction: column;

/* 전체 스크롤 방지 */
overflow: hidden;
touch-action: none;

font-family: "DungGeunMo";
}

/*리스트 내 세로 스크롤*/
.history__list {
height: 42vh;
overflow-y: scroll;
 
margin-bottom: 3rem; /*fixed footer랑 겹치치 않도록!*/ 
}

클래스명 활용해서 지출, 수입 구분

/*수입, 지출에 따라 부호 붙여주기*/
/* .income, .expense는 다른 곳에서도 사용하는 클래스이기 때문에 자식 선택자 필수! */
.history__list__box > .income::before {
content: "+";
}

.history__list__box > .expense::before {
content: "-";
}

4️⃣ 리스트 추가 버튼

position: fixed로 고정시키기!

/* footer 영역 */
.footer {
display: flex;
justify-content: center;
align-items: center;

position: fixed;
bottom: 0;

width: 100%;
height: 3rem;

background-color: #ddd;
}

🥺 소요 시간, 어려웠던 점

3h
리스트 내부 스크롤 구현이 어려웠어요!

🌈 구현 결과물

노션 링크로 첨부합니댜 ~
https://quasar-smelt-153.notion.site/week1-assign4-cf8346270f3c42fe82b9f22c08ed789e?pvs=4

SooY2

좋은 코드 많이 얻어갑니다롱😆

SooY2 · 2023-10-16T09:48:50Z

week1/assign4/style.css

+}
+
+/*전역 적용*/
+.income {


저는 리스트랑 자산부분의 수입지출을 따로 스타일입혔는데 같이 입히는게 더 좋네요!!!

SooY2 · 2023-10-16T09:52:19Z

week1/assign4/style.css

+  font-size: 1.4rem;
+}
+
+.detail-amount__plus,


class명을 보고 어떤 역할을 하는건지 알 수 있어서 가독성이 좋네요!! 다음과제부턴 저도 보내준 링크 보고 참고해야겠어요ㅎㅎㅎ

SooY2 · 2023-10-16T09:56:45Z

week1/assign4/style.css

+  gap: 1rem;
+}
+
+/* checkbox input 커스텀 */


checkbox 수입/지출 나눠서 하는 섬세함..👍🏻 미리 기능을 생각하고 스타일을 입히는게 중요하다는걸 깨닫고 갑니다!!ㅎㅎ

SooY2 · 2023-10-16T09:59:42Z

week1/assign4/style.css

+
+/*리스트 내 세로 스크롤*/
+.history__list {
+  height: 42vh;


height값을 값으로 지정해주니 디바이스 높이에 따라 여백이 남을 때가 있더라구요! 그래서 저는 cal()함수 이용해서 상단부분과 하단부분의 정적인 높이값을 빼주는 방법을 사용했습니다!

오오 맞아요!! 저는 처음에 이 부분 놓치고 급하게 구현하다 보니까 vh로 임시로 맞춰줬는데 calc를 사용하는 방법으로 리팩토링 해볼게요 ><

SooY2 · 2023-10-16T10:07:54Z

week1/assign4/style.css

+  font-size: 1.1rem;
+}
+
+/*수입, 지출에 따라 부호 붙여주기*/


css로 수입,지출에 따라 부호 붙이는방법이 있군요!!!

SooY2 · 2023-10-16T10:11:42Z

week1/assign4/index.html

+
+      <section class="history">
+        <article class="history__top">
+          <button>&lt;</button>


<,>는 예약문자이기 때문에 &lt,&gt를 사용해야하는군요!!!

맞습니당 !!! 예약 문자는 요기 참고해보면 좋을거 같아요 ~

SooY2 · 2023-10-16T10:48:32Z

week1/assign4/style.css

+}
+
+.history-category {
+  width: fit-content;


width:fit-content를 해도 디바이스의 너비가 줄어들면 text가 가로로 정렬되네요 history-contents의 너비가 8.5rem으로 정해져서 그런건가요???

넵 맞습니당 ! 가로로 정렬되는 영역만큼만 반응형 되도록 history-contents의 너비를 지정했어용

nayujin-dev

고생했어용 ~~ 폰트 귀엽다 ㅎㅎ

nayujin-dev · 2023-10-16T17:31:20Z

week1/assign4/style.css

+  border-width: 0.2rem 0;
+}
+
+.asset__box {


연서가 알려준 BEM 방식 ,, 바닐라로 코딩할때는 진짜진짜 유용한것같아 !! 나도 한번 익혀봐야겠어 이번 과제할때 확실히 필요성을 느꼈어 ㅎㅎ

nayujin-dev · 2023-10-16T17:34:02Z

week1/assign4/style.css

+}
+
+/*전역 적용*/
+.income {


마자 나도 이거 나중에 앗차 글케할걸 싶었어

nayujin-dev · 2023-10-16T17:39:34Z

week1/assign4/style.css

+
+/*수입, 지출에 따라 부호 붙여주기*/
+.history__list__box > .income::before {
+  content: "+";


우와 이거 약간 짬이 느껴진다 ,, 난 냅다 div로 + 감싼거 같은디 ㅎ,ㅎ 이거 보면서 방금 찾아봤는데 content 가상속성 사용하면 되게 js처럼 이것저것 할 수 있는게 많네 !! 신기하다 덕분에 하나 배워가용 ~

nayujin-dev · 2023-10-16T17:42:05Z

week1/assign4/reset.css

+  /* font: inherit; */
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */


혹시 이 파일은 어떤거야?? 다 초기값으로 세팅하려는건가??

맞습니당 ! 브라우저로부터 상속받는 기본 스타일링을 미리 다 제거해서, 의도치 않은 스타일링 결과가 나오지 않게 해주는 파일이에용!
요기를 참고하면 더 좋을거 같아용 !!

nayujin-dev · 2023-10-16T17:43:32Z

week1/assign4/style.css

+
+  /* 전체 스크롤 방지 */
+  overflow: hidden;
+  touch-action: none;


오오 이거 첨알았어

캬아.. 디테일 미쳤다

seobbang

이게 OB다,, 신경 많이 쓴게 느껴진다 !! 심화과제까지 고생 많았어용 ✨

seobbang · 2023-10-20T18:08:11Z

week1/assign4/index.html

+      <section class="asset">
+        <article class="asset__box">
+          <h2 class="asset__box__title">나의 자산</h2>
+          <p class="asset__box__total-amount">💲249700</p>


동적으로 값을 바꿀 때는 css에서 before로 $ 붙여주는 것도 좋을 것 같네욤!ㅎㅎ

오오 맞습니당 요것도 before 속성 사용하는게 좋을것 같네유 바로 수정 !!!

seobbang · 2023-10-20T18:10:22Z

week1/assign4/index.html

+              <span class="history-category">식비</span>
+              <span class="history-contents">맥도날드 안암역점</span>
+              <span class="history-amount expense">10800</span>
+              <button class="history-del-btn">X</button>


button 태그는 reset, button, submit 세가지의 type을 가져요!

default는 submit이므로, 이렇게 type을 button으로 명시해주는 게 좋답니당!

버튼에 타입을 쓰는 이유

앗 맞아요 ㅎㅎ 깜빡한 부분인데 저도 코드리뷰 하다가 생각났네용 바로 수정 갈기겠습니댜 🖤

seobbang · 2023-10-20T18:12:04Z

week1/assign4/style.css

+
+  /* 전체 스크롤 방지 */
+  overflow: hidden;
+  touch-action: none;


캬아.. 디테일 미쳤다

Yeonseo-Jo added 14 commits October 13, 2023 00:46

init : 파일 생성

de1ee58

feat : 기본 구조

5a79b1d

feat : 헤더 구현

28529a4

feat : 나의 자산 영역 구현

830b487

fix : border-box 전역 적용

7fec97e

feat : 내역리스트 윗부분 스타일링

21a2bf2

feat : checkbox input custom

5c575e8

feat : 내역 세부 리스트 영역 구현

e1364c2

feat : 내역 세부 리스트 영역 내 스크롤

92d559d

chore : 주석 추가

e03901e

feat : 최하단 추가 버튼 추가

9ad87fc

fix : 글자 크기 수정

4f6cc40

feat : 체크박스 default checked

b0019e1

fix : 스크롤 영역 높이 수정

6977c5e

Yeonseo-Jo added 1주차 기본과제 심화과제 labels Oct 13, 2023

Yeonseo-Jo requested review from nayujin-dev, seobbang and SooY2 October 13, 2023 10:11

Yeonseo-Jo self-assigned this Oct 13, 2023

SooY2 reviewed Oct 16, 2023

View reviewed changes

nayujin-dev reviewed Oct 16, 2023

View reviewed changes

seobbang reviewed Oct 20, 2023

View reviewed changes

refactor : 코드리뷰 반영 - 버튼 타입 추가

f608d09

Yeonseo-Jo merged commit 05e3ec0 into main Oct 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 1주차 기본/심화 과제 ] 가계부 💸 #2

[ 1주차 기본/심화 과제 ] 가계부 💸 #2

Yeonseo-Jo commented Oct 13, 2023

SooY2 left a comment

SooY2 Oct 16, 2023

SooY2 Oct 16, 2023

SooY2 Oct 16, 2023

SooY2 Oct 16, 2023

Yeonseo-Jo Oct 23, 2023

SooY2 Oct 16, 2023

SooY2 Oct 16, 2023

Yeonseo-Jo Oct 23, 2023

SooY2 Oct 16, 2023

Yeonseo-Jo Oct 23, 2023

nayujin-dev left a comment

nayujin-dev Oct 16, 2023

nayujin-dev Oct 16, 2023

nayujin-dev Oct 16, 2023

nayujin-dev Oct 16, 2023

Yeonseo-Jo Oct 23, 2023

nayujin-dev Oct 16, 2023

seobbang Oct 20, 2023

seobbang left a comment

seobbang Oct 20, 2023

Yeonseo-Jo Oct 23, 2023

seobbang Oct 20, 2023

Yeonseo-Jo Oct 23, 2023

seobbang Oct 20, 2023

[ 1주차 기본/심화 과제 ] 가계부 💸 #2

[ 1주차 기본/심화 과제 ] 가계부 💸 #2

Conversation

Yeonseo-Jo commented Oct 13, 2023

✨ 구현 기능 명세

⭐️기본 과제

⭐️ 심화 과제

💎 PR Point

1️⃣ 나의 자산 영역

2️⃣ 수입, 지출 선택

3️⃣ 내역 리스트

4️⃣ 리스트 추가 버튼

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

SooY2 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nayujin-dev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seobbang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment