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

simeunseo · 2023-10-12T21:03:04Z

배포링크

✨ 구현 기능 명세

기본 과제
- 제목
- 나의 자산
  - 자산 박스 위치와 내부 요소들 모두 중앙 정렬
  - 총 수입과 총 지출의 색깔 구분
- 날짜
  - 좌우 버튼과 가운데 날짜
- 수입, 지출 선택
  - input type="checkbox"로 구현
  - default는 checked로 지정
- 내역 리스트
  - 리스트는 flex로 배치
  - 각 리스트에 카테고리, 내역 내용, 지출 및 수입 금액, 삭제 버튼 추가
  - 리스트 내부도 flex로 배치
  - 리스트가 일정 height 초과시 리스트 영역 내에서 스크롤
  - 지출과 수입 금액 색깔 구분
- 리스트 추가 버튼
심화 과제
- checkbox input 커스텀
- 내역 리스트 말줄임
- 반응형 구현

💎 PR Point

시맨틱 태그

다음과 같은 구조로 문서를 구성했습니다. ~~div 안쓰는거 대체 어떻게 하는건데...~~

<body>
    <section> <!-- 상단 잔액 부분 -->
    </section>
    <main>
        <div></div> <!-- 날짜 부분 -->
        <div>
            <div></div>
            <ol> <-- 거래 내역 부분 -->
                <li></li>
                ...
            </ol>
        </div> 
    </main>
    <div></div>
</body>

체크박스 커스텀

reset.css로 체크박스를 아예 가리고, 체크박스와 label을 나란히 두고 label의 디자인을 변경하여 label이 체크박스의 역할을 하도록 구현했습니다.

index.html

    <input type="checkbox" name="income"    id="checkbox-income" checked />
    <label for="checkbox-income">수입</label>

style.css

.checkboxes > label {
    padding: 0.8rem 1.5rem;

    background-color: var(--gray-color);
    color: var(--white-color);

    border-radius: 1rem;

    cursor: pointer;
    }

input[type="checkbox"]:checked + label {
    background-color: var(--dark-yellow-color);
    color: var(--dark-gray-color);
}

label을 보여지고 싶은대로 꾸민 뒤, checkbox가 체크되었을 때 그 체크박스의 형제 요소인 label의 배경색과 글자색이 변경되도록 함으로써 체크 여부를 시각화했습니다.

🥺 소요 시간, 어려웠던 점

1h
어려운 점은 크게 없었습니다!

🌈 구현 결과물

배포링크

eonseok-jeon

좋은 코드 잘 봤습니다! 역시나 이번에도 너무나도 깔끔하게 잘 만드셔서 제가 딱히 리뷰 드릴 게 없었습니다 😄

또 한 번 말씀드리지만 제 review는 저의 의견일 뿐 객관적인 지표는 아닐 수 있으니 이 점 유념해 주시면 감사드리겠습니다 :)

eonseok-jeon · 2023-10-17T16:19:13Z

week1/assign4/style.css

+
+  margin: 2.5rem 0;
+  padding-bottom: 2rem;
+  margin-bottom: 4rem;


margin: 2.5rem 0 4rem;
이렇게 축약 시킬 수 있을 거 같습니다!

eonseok-jeon · 2023-10-17T16:25:46Z

week1/assign4/index.html

+      <div class="date">
+        <button type="button"><</button>
+        <span>10월 13일</span>
+        <button type="button">></button>


'>'는 종료 태그와 헷갈릴 수 있는데 HTML entity에 대해선 어떻게 생각하시나요??

참고자료
왜 HTML entity를 사용해야 하죠? : https://teamtreehouse.com/community/why-dont-we-just-put-instead-of-writing-gt

HTML entity : https://www.freeformatter.com/html-entities.html

eonseok-jeon · 2023-10-17T16:36:03Z

week1/assign4/style.css

+/* list */
+ol {
+  margin-top: 5rem;
+  padding-bottom: 5rem;


padding-bottom 때문에 아래에 빈 여백이 생기
는데 혹시 padding-bottom 주신 이유가 있으실까요?

eonseok-jeon · 2023-10-17T16:38:28Z

week1/assign4/style.css

+  padding-bottom: 5rem;
+}
+
+li {


리스트 마지막 요소는 margin-bottom이 없는 게 리스트 전체 박스 위 아래 여백 사이즈가 맞을 거 같습니다!
예를 들어 위에 여백 1rem 아래 여백 1rem으로 설정했는데 리스트 마지막 요소의 margin-bottom: 1rem;으로 인해 아래 여백이 2rem이 되는 경우가 발생할 수도 있어서요!
어떻게 생각하시나요?

qwp0

다시 한 번 말하는 감자인 점 사죄드리며,, 너무 깔끔하게 잘하신 것 같아용!

qwp0 · 2023-10-18T01:49:58Z

week1/assign4/style.css

+
+  overflow-y: scroll;
+}
+


sub-menu를 포함한 전체에다 스크롤을 주지 않고 sub-menu를 뺀 리스트 부분에만 스크롤을 주면 더 좋을 것 같아요! 그래야 스크롤 하다가 수입 , 지출을 선택하려고 다시 스크롤해서 올라가지 않아도 되니 편할 것 같습니당

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

simeunseo added 12 commits October 13, 2023 04:23

docs: initial structure

929b297

design: css settings

877d833

design: header design

06b702c

design: summary section

202e6ab

design: checkbox custom

991786e

design: list design

f90dbf3

design: detail

a309bff

docs: bottom plus button

840ff0a

design: bottom plus button

67fbe24

design: text ellipsis

3b6bc1c

design: modify width of ellipsis width

6cf3334

docs: add favicon

0a611fd

simeunseo self-assigned this Oct 13, 2023

simeunseo marked this pull request as ready for review October 13, 2023 13:51

simeunseo added 기본과제 심화과제 labels Oct 13, 2023

simeunseo requested review from Grandelwald, qwp0 and eonseok-jeon October 14, 2023 13:37

eonseok-jeon reviewed Oct 17, 2023

View reviewed changes

qwp0 reviewed Oct 18, 2023

View reviewed changes

simeunseo merged commit 730dbb8 into main Feb 13, 2024

simeunseo added a commit that referenced this pull request Feb 13, 2024

Merge pull request #5 from DO-SOPT-WEB/week2/#2

2787862

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

simeunseo commented Oct 12, 2023 •

edited

Loading

eonseok-jeon left a comment

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

eonseok-jeon Oct 17, 2023

qwp0 left a comment

qwp0 Oct 18, 2023

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

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

Conversation

simeunseo commented Oct 12, 2023 • edited Loading

배포링크

✨ 구현 기능 명세

기본 과제

심화 과제

💎 PR Point

시맨틱 태그

체크박스 커스텀

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

배포링크

eonseok-jeon left a comment

Choose a reason for hiding this comment

eonseok-jeon Oct 17, 2023

Choose a reason for hiding this comment

eonseok-jeon Oct 17, 2023

Choose a reason for hiding this comment

eonseok-jeon Oct 17, 2023

Choose a reason for hiding this comment

eonseok-jeon Oct 17, 2023

Choose a reason for hiding this comment

qwp0 left a comment

Choose a reason for hiding this comment

qwp0 Oct 18, 2023

Choose a reason for hiding this comment

simeunseo commented Oct 12, 2023 •

edited

Loading