Merge pull request #2 from DO-SOPT-WEB/week1_assign4

[1주차 기본/심화 과제] 가계부 💸
DO-SOPT-WEB · Feb 13, 2024 · 730dbb8 · 730dbb8
2 parents 6f46fc1 + 0a611fd
commit 730dbb8
Show file tree

Hide file tree

Showing 4 changed files with 517 additions and 0 deletions.
diff --git a/week1/assign4/assign4-favicon.png b/week1/assign4/assign4-favicon.png
diff --git a/week1/assign4/index.html b/week1/assign4/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>💸시믄서의 가계부💸</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="assign4-favicon.png" />
+  </head>
+  <body>
+    <section class="summary">
+      <header>💸 시믄서의 가계부 💸</header>
+      <h2>생활비 관리</h2>
+      <h1>1,000,000,000원</h1>
+      <div class="income-spending">
+        <div class="income">
+          <button type="button">+</button> <span>200,000원</span>
+        </div>
+        <div class="spending">
+          <button type="button">-</button> <span>6,000원</span>
+        </div>
+      </div>
+    </section>
+    <main>
+      <div class="date">
+        <button type="button"><</button>
+        <span>10월 13일</span>
+        <button type="button">></button>
+      </div>
+      <div class="overall-list">
+        <div class="sub-menu">
+          <strong>내역</strong>
+          <div class="checkboxes">
+            <input type="checkbox" name="income" id="checkbox-income" checked />
+            <label for="checkbox-income">수입</label>
+            <input
+              type="checkbox"
+              name="spending"
+              id="checkbox-spending"
+              checked
+            />
+            <label for="checkbox-spending">지출</label>
+          </div>
+        </div>
+        <ol>
+          <li>
+            <div class="title">
+              <small>식비</small>
+              <h3>크라이치즈버거 역곡점</h3>
+            </div>
+            <h4 class="text-spending">-10,800원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>취미</small>
+              <h3>포토그레이 부천점</h3>
+            </div>
+            <h4 class="text-spending">-4,000원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>월급</small>
+              <h3>근로장학🤑돈💰내놔🔫돈💰내놔🔫돈💰내놔🔫</h3>
+            </div>
+            <h4>300,000원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>쇼핑</small>
+              <h3>풋락커 커먼그라운드점</h3>
+            </div>
+            <h4 class="text-spending">-99,000원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>식비</small>
+              <h3>지에스25 역곡본점</h3>
+            </div>
+            <h4 class="text-spending">-4,200원</h4>
+            <button class="delete-btn" type="button">x</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>월급</small>
+              <h3>근로장학</h3>
+            </div>
+            <h4>300,000원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>월급</small>
+              <h3>근로장학</h3>
+            </div>
+            <h4>300,000원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>월급</small>
+              <h3>근로장학</h3>
+            </div>
+            <h4>300,000원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>월급</small>
+              <h3>근로장학</h3>
+            </div>
+            <h4>300,000원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+          <li>
+            <div class="title">
+              <small>월급</small>
+              <h3>근로장학</h3>
+            </div>
+            <h4>300,000원</h4>
+            <button class="delete-btn" type="button">X</button>
+          </li>
+        </ol>
+      </div>
+    </main>
+    <div class="bottom-plus-btn">
+      <button type="button">+</button>
+    </div>
+  </body>
+</html>
diff --git a/week1/assign4/reset.css b/week1/assign4/reset.css
@@ -0,0 +1,115 @@
+/***
+    The new CSS reset - version 1.11 (last updated 20.9.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(
+    :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)
+  ) {
+  all: unset;
+  display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Fix mobile Safari increase font-size on landscape mode */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a,
+button {
+  cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input,
+textarea {
+  -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+  all: revert;
+  box-sizing: border-box;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+
+/* remove default dot (•) sign */
+::marker {
+  content: initial;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+  all: revert;
+  box-sizing: border-box;
+}