-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from DO-SOPT-WEB/week1/assign4
[ 1주차 기본/심화 과제 ] 가계부 💸
- Loading branch information
Showing
3 changed files
with
552 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| <!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" /> | ||
| <title>연또의 가계부</title> | ||
| </head> | ||
| <body> | ||
| <header class="header"> | ||
| <h1>💰 연또의 가계부 💰</h1> | ||
| </header> | ||
|
|
||
| <main> | ||
| <section class="asset"> | ||
| <article class="asset__box"> | ||
| <h2 class="asset__box__title">나의 자산</h2> | ||
| <p class="asset__box__total-amount">💲249700</p> | ||
| <div class="asset__box__detail-amount"> | ||
| <p class="detail-amount__plus income"> | ||
| <span class="amount-sign">+</span><span>300000</span> | ||
| </p> | ||
| <p class="detail-amount__minus expense"> | ||
| <span class="amount-sign">-</span><span>50300</span> | ||
| </p> | ||
| </div> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section class="history"> | ||
| <article class="history__top"> | ||
| <button type="button"><</button> | ||
| <h2>10월 1일</h2> | ||
| <button type="button">></button> | ||
| </article> | ||
|
|
||
| <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> | ||
|
|
||
| <article class="history__list"> | ||
| <ul> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">식비</span> | ||
| <span class="history-contents">맥도날드 안암역점</span> | ||
| <span class="history-amount expense">10800</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">취미</span> | ||
| <span class="history-contents">하루필름 강남2호점</span> | ||
| <span class="history-amount expense">5000</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">월급</span> | ||
| <span class="history-contents">이번달 알바비</span> | ||
| <span class="history-amount income">300000</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">쇼핑</span> | ||
| <span class="history-contents">오렌즈 강남역 지하쇼핑역점</span> | ||
| <span class="history-amount expense">30000</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">식비</span> | ||
| <span class="history-contents">지에스25 안암역점</span> | ||
| <span class="history-amount expense">4500</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">식비</span> | ||
| <span class="history-contents">지에스25 안암역점</span> | ||
| <span class="history-amount expense">4500</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">식비</span> | ||
| <span class="history-contents">지에스25 안암역점</span> | ||
| <span class="history-amount expense">4500</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">식비</span> | ||
| <span class="history-contents">지에스25 안암역점</span> | ||
| <span class="history-amount expense">4500</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| <li class="history__list__box"> | ||
| <span class="history-category">식비</span> | ||
| <span class="history-contents">지에스25 안암역점</span> | ||
| <span class="history-amount expense">4500</span> | ||
| <button type="button" class="history-del-btn">X</button> | ||
| </li> | ||
| </ul> | ||
| </article> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer class="footer"> | ||
| <button class="footer__add-btn">+</button> | ||
| </footer> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| html, | ||
| body, | ||
| div, | ||
| span, | ||
| applet, | ||
| object, | ||
| iframe, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| p, | ||
| blockquote, | ||
| pre, | ||
| a, | ||
| abbr, | ||
| acronym, | ||
| address, | ||
| big, | ||
| cite, | ||
| code, | ||
| del, | ||
| dfn, | ||
| em, | ||
| img, | ||
| ins, | ||
| kbd, | ||
| q, | ||
| s, | ||
| samp, | ||
| small, | ||
| strike, | ||
| strong, | ||
| sub, | ||
| sup, | ||
| tt, | ||
| var, | ||
| b, | ||
| u, | ||
| i, | ||
| center, | ||
| dl, | ||
| dt, | ||
| dd, | ||
| ol, | ||
| ul, | ||
| li, | ||
| fieldset, | ||
| form, | ||
| label, | ||
| legend, | ||
| table, | ||
| caption, | ||
| tbody, | ||
| tfoot, | ||
| thead, | ||
| tr, | ||
| th, | ||
| td, | ||
| article, | ||
| aside, | ||
| canvas, | ||
| details, | ||
| embed, | ||
| figure, | ||
| figcaption, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| output, | ||
| ruby, | ||
| section, | ||
| summary, | ||
| time, | ||
| mark, | ||
| audio, | ||
| video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| /* font: inherit; */ | ||
| vertical-align: baseline; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, | ||
| aside, | ||
| details, | ||
| figcaption, | ||
| figure, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| } | ||
| ol, | ||
| ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, | ||
| q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, | ||
| blockquote:after, | ||
| q:before, | ||
| q:after { | ||
| content: ""; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } |
Oops, something went wrong.