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

lydiacho · 2023-10-13T14:40:11Z

✨ 구현 기능 명세

기본 과제
제목

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

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

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

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

최하단 가운데 추가 버튼이 있습니다.
심화 과제
checkbox input 커스텀
- checkbox input을 예쁘게 커스텀해주세요!
내역 리스트
- 내역 내용이 일정 길이보다 길어질 경우 ... 로 말줄임 처리됩니다.
반응형
- 어느 모바일 디바이스에서 봐도 전체적인 UI 정렬 및 레이아웃이 깨지지 않도록 구현합니다.

💎 PR Point

기본과제

▶️ 시맨틱 구조

<body>    
	<header>
      <h1>숭이의 가계부</h1>
    </header>
    <section id="my">
      <h2></h2>
      <p></p>
      <div>
        <span id="plus"></span>
        <span id="minus"></span>
      </div>
    </section>
    <hr />
    <section id="history">
      <nav id="date">
        <button></button>
        <p></p>
        <button></button>
      </nav>
      <div id="list">
        <header>
          <h2></h2>
          <div>
            <input />
            <input />
          </div>
        </header>
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </section>
    <footer>
      <button></button>
    </footer>
  </body>

▶️ 수입, 지출 선택

input type=”checkbox”로 구현합니다. (기본 스타일도 괜찮습니다.)

default는 수입, 지출 모두 checked 되어 있습니다.

<input id="plus" type="checkbox" checked />
<label for="plus">수입</label>
<input id="minus" type="checkbox" checked />
<label for="minus">지출</label>

심화과제

▶️ checkbox input 커스텀

checkbox input을 예쁘게 커스텀해주세요!

<form>
  <input name="plus_price" type="checkbox" id="plus_p" />
  <label for="plus_p">수입</label>
  <input name="minus_price" type="checkbox" id="minus_p" />
  <label for="minus_p">지출</label>
</form>

/* 체크박스 커스텀 */
label {
  padding: 0.3rem 1rem;

  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid rgb(33, 109, 176);

  color: rgb(33, 109, 176);
}

input:checked + label {
  background-color: rgb(33, 109, 176);
  color: white;
}

▶️ 내역 리스트

내역 내용이 일정 길이보다 길어질 경우 ... 로 말줄임 처리됩니다.

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

▶️ 반응형

대부분의 영역의 width를 설정하는 것이 아닌, margin과 padding으로 여백을 주어 어느 기기에서도 동일한 여백과 가운데 정렬을 유지할 수 있도록 구현하였습니다

🥺 소요 시간, 어려웠던 점

3h
다른거 다 무난했는데... 특정 부분에서 element id를 중복으로 사용해서 에러가 발생해서 이걸로 한 한시간 잡아먹었던 것 같습니다... 이유를 발견하고 얼마나 절망스러웠는지..... 이게 바로 css가 아닌 styled components같은 친구들을 사용해야 하는 이유인 것 같습니다......

🌈 구현 결과물

2023-10-13.11.51.46.mov

rachel5640

바빠서 신경 많이 못썼다고 했는데... 난 또 숭에게 속았어..
코드 보면서 div를 최소화하고 시멘틱하게 코드 짜는 방법을 많이 배웠습니다!!
진짜 하나하나 주석처리 해주어서 코드 읽기에도 정말 수월했어요! 많이 배워가요...최고🥹🥹💛

rachel5640 · 2023-10-16T20:20:42Z

week1/ledgerStyle.css

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


진짜 이렇게 주석처리 해서 코드 적어주니까 정말 깔끔하군요...다음부터 특정 기능들은 이렇게 묶어두는 연습을 해봐야겠어요!!

rachel5640 · 2023-10-16T20:26:04Z

week1/ledger.html

+          <form>
+            <input name="plus_price" type="checkbox" id="plus_p" checked />
+            <label for="plus_p">수입</label>
+            <input name="minus_price" type="checkbox" id="minus_p" checked />
+            <label for="minus_p">지출</label>
+          </form>


수입 지출을 form태그로 묶을 수도 있구나!!!

rachel5640 · 2023-10-16T20:29:06Z

week1/ledger.html

+              >청년다방청년다방청년다방청년다방청년다방청년다방</span
+            >
+            <span class="minus_price">-26,500</span>
+            <i class="close_btn">✕</i>


i 가 이탤릭 사용할 때만 적용되는 태그인줄 알았는데,아이콘 넣을때도 활용될 수도 있군요... 너무 유용합니다...!

rachel5640 · 2023-10-16T22:02:07Z

week1/ledgerStyle.css

+  font-size: 1.5rem;
+  border: 0px;
+  background-color: white;
+  cursor: pointer;


cursor 포인터 설정해두는 이런 섬세함! 너무 좋아요!!

se0jinYoon · 2023-10-17T07:52:22Z

week1/ledger.html

+        <span id="minus">3,000</span>
+      </div>
+    </section>
+    <hr />


옹 border-bottom을 주지 않고 hr 태그로 주었군뇨 ! 잊고있던 hr 태그,,

se0jinYoon · 2023-10-17T07:53:59Z

week1/ledger.html

+          </form>
+        </header>
+        <ul>
+          <li>


저는 이 부분 li랑 article이랑 고민하다가 결국 article로 코드 작성했는데 혹시 article이 아닌 li로 구현한 이유가 있나용 ? 단순 궁금 ,,

se0jinYoon · 2023-10-17T08:01:06Z

week1/ledgerStyle.css

+}
+/* 체크박스 커스텀 */
+label {
+  padding: 0.3rem 1rem;


아 ,, 전 label 태그 내부에 span 넣어서 position으로 위치 조정했는데 padding 진짜 넘 간단 ,, 난 왜 생각해내지 못했는가

se0jinYoon · 2023-10-17T08:13:25Z

week1/ledgerStyle.css

+
+  padding: 2rem;
+
+  height: 25rem;


오 높이를 이렇게 지정해두어도 footer 윗 부분까지로 높이를 잡나요? 전 처음에 이렇게 rem 정해서 넣었다가 ul 영역의 높이가 footer까지 포함해서 잡혀서 스크롤 범위도 페이지 가장 바닥까지 잡히게 되는 이슈를 마주했었는데 ,, 뭐가 다른 걸까요 알고싶다 알고싶다

ljh0608

오우 잘하셨네요 저 많이 배우고 갑니당

ljh0608 · 2023-10-18T09:08:02Z

week1/ledger.html

+    <section id="my">
+      <h2>나의 자산</h2>
+      <p>9,999,987,000</p>
+      <div id="detail">
+        <i>+</i>
+        <span id="plus">9,999,990,000</span>
+        <i>-</i>
+        <span id="minus">3,000</span>


P2) css선택자에서 id와 class를 혼용하는 것은 좋지 않다고 알고 있습니다. id의 우선순위가 높기 때문에 추후 유지보수에 어려움이 있을 수도 있다고 하네요! 의미론적인 관점에서도요!

맞습니당 ~! 그래서 정말 유닉하고 추후에 절대 중복될 일이 없는 그런 필요한 상황에만 id를 사용하고, 하나더라도 class를 사용해서 해결하는 것이 좋답니다!!

ljh0608 · 2023-10-18T09:13:29Z

week1/ledger.html

+      <nav id="date">
+        <button>〈</button>
+        <p>8월 4일</p>
+        <button>〉</button>
+      </nav>


저는 nav태그가 "다른 페이지로의 링크를 보여주는 영역을 나타내는 태그" 니까 네비게이션바 같은 영역에 사용하고 nav보다는 section안에 하나의 div나 article을 사용하는건 어떨까요?

ljh0608 · 2023-10-18T09:16:47Z

week1/ledgerStyle.css

@@ -0,0 +1,219 @@
+@import "reset.css";


이게 지금은 비표준방식이라고 알고있어요 성능차이가 있는 것 같습니다
https://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import

ljh0608 · 2023-10-18T09:17:25Z

week1/ledgerStyle.css

+@import "reset.css";
+
+html {
+  min-width: 375px;


이부분만 따로 px을 사용하신 이유가 있으신가요?? rem으로 통일해도 좋을 것 같아요!

ljh0608 · 2023-10-18T09:19:30Z

week1/reset.css

+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";


저는 reset.css에 button 요소에 cursor:pointer 넣어두고 사용하면 코드가 조금 더 간결해지는 것 같아요! 몇가지 커스텀 해보는 것도 추천~

seobbang

역시 넘나 깔끔하네요,, 코드 읽기 정말 편했어요! 가계부까지 고생 많으셨습니당ㅎㅎㅎ ✨🔥

seobbang · 2023-10-21T19:39:51Z

week1/ledger.html

+    </header>
+    <section id="my">
+      <h2>나의 자산</h2>
+      <p>9,999,987,000</p>


언니 나랑 살자..

seobbang · 2023-10-21T19:40:15Z

week1/ledger.html

+    <header>
+      <h1>숭이의 가계부</h1>
+    </header>
+    <section id="my">


좀 더 어떤 section인지 id를 명확한 이름으로 명명해주면 좋을 것 같아요!~

seobbang · 2023-10-21T19:41:15Z

week1/ledger.html

+    <section id="my">
+      <h2>나의 자산</h2>
+      <p>9,999,987,000</p>
+      <div id="detail">
+        <i>+</i>
+        <span id="plus">9,999,990,000</span>
+        <i>-</i>
+        <span id="minus">3,000</span>


맞습니당 ~! 그래서 정말 유닉하고 추후에 절대 중복될 일이 없는 그런 필요한 상황에만 id를 사용하고, 하나더라도 class를 사용해서 해결하는 것이 좋답니다!!

seobbang · 2023-10-21T19:42:10Z

week1/ledger.html

+        <p>8월 4일</p>
+        <button>〉</button>
+      </nav>
+      <div id="list">


section 태그 써도 좋을 것 같아요!

seobbang · 2023-10-21T19:43:06Z

week1/ledger.html

+      </div>
+    </section>
+    <footer>
+      <button>+</button>


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

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

버튼에 타입을 쓰는 이유

seobbang · 2023-10-21T19:43:35Z

week1/ledgerStyle.css

+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  margin: 1rem 3rem;
+  padding: 1rem;
+  background-color: aliceblue;
+
+  border: 0.3rem solid black;
+  border-radius: 0.7rem;


역시..개행 넘 깔끔하네용 ㅎㅎ

[ 2주차 기본 과제 ] 가계부

lydiacho added 12 commits October 7, 2023 15:00

1주차 세미나 html 실습

cc4b5f7

css 실습

a78a784

setting: 시맨틱태그 구조 잡기

d636a2c

setting: reset.css 세팅

3c43315

style: header UI

1007803

style: #my section UI

31e22dd

style: #history 내 #date UI

3abc566

style: #history 내 #list의 header UI

1c39b81

style: #history 내 #list의 ul UI

1651989

style: footer UI

596a55e

style: list 내용 말줄임표

625ea3f

style: input custom

293ea90

lydiacho requested review from se0jinYoon and rachel5640 October 13, 2023 14:40

lydiacho self-assigned this Oct 13, 2023

lydiacho added 2 commits October 13, 2023 23:51

fix: input 누락 사항 추가

8b83dc1

style: 내역 리스트 내 height 고정 및 scroll 추가

74f5d05

rachel5640 reviewed Oct 16, 2023

View reviewed changes

se0jinYoon reviewed Oct 17, 2023

View reviewed changes

lydiacho requested review from ljh0608 and doyn511 October 18, 2023 09:01

ljh0608 reviewed Oct 18, 2023

View reviewed changes

seobbang reviewed Oct 21, 2023

View reviewed changes

fix: 코드리뷰 반영

fcc30c1

lydiacho merged commit 2ef8a19 into main Oct 25, 2023

lydiacho added a commit that referenced this pull request Nov 10, 2023

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

2467fef

[ 2주차 기본 과제 ] 가계부

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lydiacho commented Oct 13, 2023 •

edited

Loading

rachel5640 left a comment

rachel5640 Oct 16, 2023

rachel5640 Oct 16, 2023

rachel5640 Oct 16, 2023

rachel5640 Oct 16, 2023

se0jinYoon Oct 17, 2023

se0jinYoon Oct 17, 2023

se0jinYoon Oct 17, 2023

se0jinYoon Oct 17, 2023

ljh0608 left a comment

ljh0608 Oct 18, 2023

seobbang Oct 21, 2023

ljh0608 Oct 18, 2023

ljh0608 Oct 18, 2023

ljh0608 Oct 18, 2023

ljh0608 Oct 18, 2023

seobbang left a comment

seobbang Oct 21, 2023

seobbang Oct 21, 2023

seobbang Oct 21, 2023

seobbang Oct 21, 2023

seobbang Oct 21, 2023

seobbang Oct 21, 2023

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

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

Conversation

lydiacho commented Oct 13, 2023 • edited Loading

✨ 구현 기능 명세

💎 PR Point

기본과제

심화과제

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

rachel5640 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

ljh0608 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

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

Choose a reason for hiding this comment

lydiacho commented Oct 13, 2023 •

edited

Loading