diff --git a/.gitignore b/.gitignore index e43b0f9..860f418 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .DS_Store +.vscode/ \ No newline at end of file diff --git a/week1/.DS_Store b/week1/.DS_Store deleted file mode 100644 index d5e1f68..0000000 Binary files a/week1/.DS_Store and /dev/null differ diff --git a/week1/assignment/.DS_Store b/week1/assignment/.DS_Store deleted file mode 100644 index b7efb25..0000000 Binary files a/week1/assignment/.DS_Store and /dev/null differ diff --git "a/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.html" "b/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.html" deleted file mode 100644 index a3706d2..0000000 --- "a/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.html" +++ /dev/null @@ -1,134 +0,0 @@ - - - - - - - - - - 수빈 | 가계부 - - - -
-

수빈이의 가계부

-
-
-

나의 자산

- 3,432,000 -
- 위쪽화살표 -

150000

- 아래쪽화살표 -

43200

-
-
-
-

내역 리스트

-
- -

10월 9일

- -
-
- - - - -
-
- -
-
- - - - \ No newline at end of file diff --git "a/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/style.css" "b/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/style.css" deleted file mode 100644 index 45926a9..0000000 --- "a/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/style.css" +++ /dev/null @@ -1,204 +0,0 @@ -@font-face { - font-family: 'Pretendard'; - src: url('./font/Pretendard-Medium.otf') format('opentype'); -} - -* { - margin: 0px; - padding: 0px; - font-family: Pretendard, sans-serif; - box-sizing: border-box; -} - -html { - background-color: #d9d9d9; -} - -body { - display: flex; - flex-direction: column; - gap: 10px; - width: 100vw; - min-height: 100vh; - margin: auto; - padding: 10px; - background-color: #f8f8f8; -} - -button { - cursor: pointer; -} - -header { - padding: 20px; - background-color: #ffffff; - border-radius: 10px; -} - -h1 { - font-size: 20px; - font-weight: 500; -} - -#asset { - display: flex; - flex-direction: column; - justify-content: center; - gap: 16px; - align-items: center; - padding: 20px; - background-color: #ffffff; - border-radius: 12px; -} - -.subtitle { - font-size: 20px; - font-weight: 500; -} - -#money { - font-size: 20px; -} - -#today { - display: flex; - flex: 1; - justify-content: space-between; - width: 160px; - align-items: center; -} - -#today img { - width: 16px; - height: 16px; -} - -.income { - color: #4d7cfe; -} - -.spending { - color: #fe4d4d; -} - -#main { - flex-grow: 1; - display: flex; - flex-direction: column; - max-height: calc(100vh - 300px); - padding: 20px; - background-color: #ffffff; - border-radius: 12px; -} - -#date { - display: flex; - justify-content: space-between; - margin: 20px 0 10px 0; - width: 160px; -} - -#date button { - border: none; - background: transparent; -} - -#money-type { - display: flex; - justify-content: end; - font-size: 14px; -} - -#money-type input { - display: none; -} - -#money-type label { - margin-left: 10px; - padding: 5px 20px 5px 20px; - color: #777777; - background-color: #f2f2f2; - border-radius: 5px; - cursor: pointer; -} - -#money-type input[type=checkbox]:checked+label { - margin-left: 10px; - padding: 5px 20px 5px 20px; - color: #ffffff; - background-color: #4880ee; -} - -ol { - list-style: none; -} - -#history { - overflow: scroll; - height: 90%; - margin-top: 20px; - padding-top: 20px; - border-top: 1px solid #d9d9d9; -} - -#history ol { - display: flex; - flex-direction: column; -} - -#history li { - display: flex; - height: 40px; - justify-content: space-between; -} - -#history li p { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -#history .tag { - flex: 1; -} - -#history .name { - flex: 3; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -#history .price { - flex: 1.5; - text-align: end; -} - -#history .income::before { - content: '+'; -} - -#history .spending::before { - content: '-'; -} - -#history li button { - flex: 0.5; - height: 20px; - border: 0; - background-color: transparent; -} - -footer #add { - position: fixed; - bottom: 10px; - width: calc(100% - 20px); - height: 44px; - margin-top: 10px; - color: #ffffff; - font-size: 16px; - line-height: 44px; - background-color: #4880ee; - border: none; - border-radius: 10px; -} \ No newline at end of file diff --git "a/week1/assignment/\354\203\235\352\260\201\352\263\274\354\240\234 \360\237\222\255/thinking.md" "b/week1/assignment/\354\203\235\352\260\201\352\263\274\354\240\234 \360\237\222\255/thinking.md" deleted file mode 100644 index 3f48aac..0000000 --- "a/week1/assignment/\354\203\235\352\260\201\352\263\274\354\240\234 \360\237\222\255/thinking.md" +++ /dev/null @@ -1,48 +0,0 @@ -# ♿ 웹 접근성 , 🚀 검색엔진 최적화 - -## ♿ 웹 접근성 - - -### 🤔 웹 접근성은 무엇일까? - -웹 접근성은 `장애를 가진 사람과 장애를 가지지 않은 사람 모두`가 웹사이트를 이용할 수 있도록 보장하는 것, 나아가 신체적인 장애 비장애 여부를 떠나서, 유저가 웹을 사용하는 `모든 상황`들을 고려하여 `동등한 경험`을 할 수 있도록 보장하는 것을 의미한다. - -### 💻 접근성을 위한 개발은 어떤 것들이 있을까? - -콘텐츠의 의미나 용도를 파악할 수 있는 `대체 텍스트`를 제공하고 `시맨틱 태그`를 이용하여 웹 페이지의 구조와 콘텐츠를 명확하게 표현하여 스크린 리더가 잘 인식할 수 있도록 개발한다. - -### ⚙ 접근성을 위한 개발을 꼭 해야 할까? - -웹접근성 준수는 「국가정보화기본법」과 「장애인차별금지법」에서 규정한 `의무사항`이다. 소수의 사용자만을 위한 것이 아닌 `모두`가 사용할 수 있게 하기 위해 접근성을 위한 개발이 필요하다. - - - - -## 🚀 검색엔진 최적화 - - -### 🤔 검색엔진 최적화를 하는 방법에는 무엇이 있을까? - -1. `구체적인 페이지 제목 만들기` - - : 페이지 제목은 구체적이고 간결하게 구성해, 검색 결과 화면에서 텍스트가 잘리지 않도록 한다. - -2. `시맨틱 태그 사용하기` - - : 검색엔진에게도 이해하기 쉬운 웹 문서가 되고, 유사한 내용의 웹 문서가 있을 경우 상대적으로 이러한 문서의 순위가 높아진다. - -3. `메타 태그 활용하기` - - : 검색엔진의 검색 결과에도 표시되고 있기 때문에 포함하는 것이 좋습니다. - -4. `이미지에 alt 속성 기재` - - : 검색엔진은 이미지를 발견하면 alt 속성 안의 텍스트를 통해 인덱싱 작업을 한다. - -5. `anchor 태그를 활용한 적절한 키워드 배치` - - : 주요한 키워드를 앵커태그 및 앵커텍스트로 삽입하면 SEO에 도움이 된다. - -6. `HTTPS 사용` - - : 구글은 HTTPS 보안 프로토콜을 사용하는 웹사이트에 대해 HTTP 일반 프로토콜을 사용하는 웹사이트보다 더 높은 점수를 부여한다. \ No newline at end of file diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.html" "b/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.html" deleted file mode 100644 index 7911d55..0000000 --- "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.html" +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - 수빈 | 삿포로 여행 계획 - - - -
-

🍣 🍶 🧤 🍡  삿포로 여행 계획  🍣 🍶 🧤 🍡

-
-
- 비에이 - 자판기 - tv타워 - 니카상 - 료칸 - 오타루운하 - 닝구르테라스 - 스키장 - 사루타마온천 -
- -
-
-

DAY 1️⃣

-
-
- 비에이 - 오타루 운하 - 닝구르테라스 - 스키장 - tv타워 - 사루타마온천 - 맥주박물관 - 대관람차 - 니카상 - 료칸 -
-
-
-
-

DAY 2️⃣

-
-
-
- 료칸 -
-
- 조잔케이 온천 - 타코야끼 - 라멘 - 오도리공원 -
-
-
-
-
-

DAY 3️⃣

-
-
-
-
-
-
-
-
-
- - -
- 위쪽화살표 -
- - - - \ No newline at end of file diff --git a/week1/practice /index.html b/week1/practice /index.html deleted file mode 100644 index 68a858a..0000000 --- a/week1/practice /index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - 1차 세미나 실습 - - -

1차 세미나

- -

Web

-

- 인터넷에 연결된 전세계 사용자들이 서로의 정보를 공유할 수 있는 장소를 - 의미한다. 줄여서 WWW나 W3라고 불리며, 간단히 웹(Web)이라고 가장 많이 - 불린다. -

-
    -
  1. 직접성
    2. -
  2. 호환성
    3. -
  3. 업데이트 용이성
    4. -
  4. 검색성
    5. -
- - \ No newline at end of file diff --git a/week1/practice /style.css b/week1/practice /style.css deleted file mode 100644 index 8dcd65d..0000000 --- a/week1/practice /style.css +++ /dev/null @@ -1,32 +0,0 @@ -h1 { - color: pink; - background-color: black; -} - -h2 { - color: orange; -} - -p { - font-size: 20px; -} - -li:first-child { - color: red; -} - -li:nth-child(2) { - background-color: pink; -} - -li:nth-child(3) { - color: blue; -} - -li:last-child { - text-decoration: underline; -} - -li::before { - content: "✔"; -} \ No newline at end of file diff --git "a/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/font/Pretendard-Medium.otf" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/assets/font/Pretendard-Medium.otf" similarity index 100% rename from "week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/font/Pretendard-Medium.otf" rename to "week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/assets/font/Pretendard-Medium.otf" diff --git "a/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/img/favicon.ico" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/assets/img/favicon.ico" similarity index 100% rename from "week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/img/favicon.ico" rename to "week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/assets/img/favicon.ico" diff --git "a/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/img/triangle-down.png" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/assets/img/triangle-down.png" similarity index 100% rename from "week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/img/triangle-down.png" rename to "week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/assets/img/triangle-down.png" diff --git "a/week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/img/triangle-up.png" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/assets/img/triangle-up.png" similarity index 100% rename from "week1/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/img/triangle-up.png" rename to "week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/assets/img/triangle-up.png" diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.css" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.css" new file mode 100644 index 0000000..80dd2cc --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.css" @@ -0,0 +1,477 @@ +@import "./styles/reset.css"; + +@font-face { + font-family: 'Pretendard'; + src: url('assets/font/Pretendard-Medium.otf') format('opentype'); +} + +#asset { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px; + + padding: 20px; + border-radius: 12px; + + background-color: #ffffff; +} + +.subtitle { + font-size: 20px; +} + +#money { + font-size: 20px; +} + +#date>p { + vertical-align: middle; + line-height: 24px; +} + +#date>button { + font-size: 20px; + color: #505866; +} + +#prev-day { + transform: scaleX(-1); +} + +#today { + display: flex; + flex: 1; + justify-content: space-between; + align-items: center; + + width: 180px; +} + +#today img { + width: 16px; + height: 16px; +} + +.income { + color: #4d7cfe; +} + +.spending { + color: #fe4d4d; +} + +#main { + display: flex; + flex-direction: column; + flex-grow: 1; + + max-height: calc(100vh - 280px); + + padding: 20px; + border-radius: 12px; + + background-color: #ffffff; +} + +#date { + display: flex; + justify-content: space-between; + + width: 160px; + margin: 20px 0 10px; +} + +#date button { + border: none; + + background: transparent; +} + +#money-type { + display: flex; + justify-content: end; + + font-size: 14px; +} + +#money-type input { + display: none; +} + +#money-type label { + height: 28px; + margin-left: 10px; + + padding: 5px 20px; + + border-radius: 5px; + + background-color: #f2f2f2; + + line-height: 18px; + color: #777777; + + cursor: pointer; +} + +#money-type input[type=checkbox]:checked+label { + margin-left: 10px; + + padding: 5px 20px 5px 20px; + + background-color: #4880ee; + + color: #ffffff; +} + +#history { + overflow: scroll; + + margin-top: 15px; + height: 90%; + border-top: 1px solid #d9d9d9; +} + +#history ul { + display: flex; + flex-direction: column; + + padding-top: 5px; +} + +#history li { + display: flex; + align-items: center; + justify-content: start; + + height: 40px; +} + +#history li p { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#history .category { + flex-basis: 20%; + + padding-left: 10px; +} + +#history .name { + flex-basis: 40%; + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#history .price { + flex-basis: 30%; + flex-grow: 1; + + text-align: end; +} + +#history .income::before { + content: '+'; +} + +#history .spending::before { + content: '-'; +} + +#history li button { + flex-basis: 10%; + + height: 20px; + border: 0; + + background-color: transparent; +} + +.delete::after { + content: "✕"; +} + +footer { + display: flex; + justify-content: center; +} + +footer #add { + position: absolute; + bottom: 10px; + + width: calc(50% - 20px); + height: 44px; + + + border: none; + border-radius: 10px; + + background-color: #4880ee; + + font-size: 16px; + line-height: 44px; + color: #ffffff; +} + +footer #manage-category { + position: absolute; + right: 10px; + bottom: 10px; + + width: calc(25% - 5px); + height: 44px; + + margin-top: 10px; + + border: none; + border-radius: 10px; + + background-color: #E1ECFC; + + font-size: 16px; + text-align: center; + text-decoration: none; + line-height: 44px; + color: #4880ee; +} + +#modal-background { + display: none; + + position: fixed; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background-color: rgba(0, 0, 0, 0.6); +} + + +#add-history-modal { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + + position: absolute; + left: 0; + bottom: -60%; + + width: 100%; + height: 60%; + + padding: 20px 10px; + + border-radius: 20px 20px 0px 0px; + + background-color: #ffffff; + + transition: bottom 0.3s ease-in-out; +} + +#add-history-modal input[type=radio] { + display: none; +} + +#add-history-modal input[type=text] { + width: 70%; + + border: none; + border-bottom: 1px solid #f2f2f2; +} + +#add-history-modal p { + line-height: 40px; +} + +#type-selector { + display: flex; + justify-content: space-between; + align-items: center; + gap: 4px; + + width: 90%; + height: 40px; + + margin: 10px auto 5px; + padding: 4px; + + border-radius: 10px; + + background-color: #f2f2f2; +} + +#type-selector label { + width: 50%; + + border-radius: 7px; + + text-align: center; + line-height: 32px; +} + +.select-category { + width: 70%; +} + +.drop-down { + background-color: transparent; +} + +.select-category .selector { + display: flex; + justify-content: space-between; + align-items: center; + + height: 40px; + + padding: 20px; + + border-radius: 8px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + + background: #ffffff; + + font-size: 18px; + font-weight: 400; + + cursor: pointer; +} + +.selector p { + font-size: 12px; +} + +.select-category.active .drop-down { + transform: rotate(-180deg); +} + +.select-category .categories { + display: none; + + position: absolute; + + overflow: scroll; + + width: 60%; + height: 150px; + + padding: 10px; + margin-top: 10px; + + border-radius: 8px; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + + background-color: #ffffff; +} + +.select-category.active .categories { + display: block; +} + +.categories .category { + display: flex; + align-items: center; + + height: 40px; + + padding: 0 16px; + + border-radius: 8px; + + background-color: #ffffff; + + font-size: 14px; + color: #333333; + + cursor: pointer; +} + +.categories .category:hover { + background: #F2F2F2; +} + + + +#type-selector input[type=radio]:checked+label { + background-color: #ffffff; +} + +#category-selector, +#price-input, +#content-input, +#modal-button-wrapper { + display: flex; + justify-content: space-between; + + width: 90%; +} + +input { + outline: none; +} + +#modal-button-wrapper { + position: absolute; + bottom: 20px; + + gap: 10px; + + width: 90%; + height: 40px; +} + +#modal-button-wrapper button { + width: 50%; + height: 44px; + border: none; + border-radius: 5px; + + font-size: 16px; +} + +button#close, +button#cancel { + position: left; + + color: #333333; +} + +button#save, +button#confirm { + position: right; + + background-color: #4880ee; + + color: #ffffff; +} + +section>#delete-modal { + display: none; + flex-direction: column; + align-items: center; + + position: absolute; + z-index: 1; + top: calc((100% - 150px)/2); + left: calc((100% - 250px)/2); + + width: 250px; + height: 150px; + + padding-top: 40px; + + border-radius: 10px; + + background-color: #ffffff; + +} \ No newline at end of file diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.html" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.html" new file mode 100644 index 0000000..224be31 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.html" @@ -0,0 +1,104 @@ + + + + + + + + + + 수빈 | 가계부 + + + +
+

수빈이의 가계부

+
+
+

나의 자산

+ +
+ 위쪽화살표 +

+ 아래쪽화살표 +

+
+
+
+

내역 리스트

+
+ +

10월 9일

+ +
+
+ + + + +
+
+ +
+
+ +
+ +
+

내역추가

+
+ + + + +
+
+

카테고리

+
+
+

카테고리를 선택하세요

+ +
+
    + +
+
+
+
+

금액

+ +
+
+

내용

+ +
+ +
+
+
+ +
+

정말 삭제하시겠습니까?

+ +
+
+ + + + + \ No newline at end of file diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.js" new file mode 100644 index 0000000..f31f30a --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/index.js" @@ -0,0 +1,11 @@ +import { renderHistoryList } from "./js/History/HistoryView.js"; +import { renderAssetData } from "./js/Asset/AssetView.js"; +import { renderCategory } from "./js/Category/CategoryView.js"; + +function render() { + renderHistoryList(); + renderAssetData(); + renderCategory(); +} + +render(); diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Asset/AssetView.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Asset/AssetView.js" new file mode 100644 index 0000000..d8728d6 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Asset/AssetView.js" @@ -0,0 +1,55 @@ +import { + HISTORY_LIST, + INIT_BALANCE, + INIT_INCOME, + INIT_SPENDING, + TRANSACTION_TYPE, +} from "../utils/constants.js"; + +import { + TODY_TOTAL_INCOME, + TODY_TOTAL_SPENDING, + TOTAL_MONEY, +} from "../utils/documentElements.js"; + +import { changeFormat } from "../utils/moneyFormatter.js"; + +let total; +let income; +let spending; + +function resetMoney() { + total = INIT_BALANCE; + income = INIT_INCOME; + spending = INIT_SPENDING; +} + +function calculateMoney(history) { + switch (history.type) { + case TRANSACTION_TYPE.SPENDING: + total -= history.money; + spending += history.money; + break; + case TRANSACTION_TYPE.INCOME: + total += history.money; + income += history.money; + break; + default: + break; + } +} + +function setMoney() { + TOTAL_MONEY.innerHTML = total; + TODY_TOTAL_INCOME.innerHTML = income; + TODY_TOTAL_SPENDING.innerHTML = spending; +} + +export function renderAssetData() { + resetMoney(); + HISTORY_LIST.forEach((history) => { + calculateMoney(history); + }); + setMoney(); + changeFormat(); +} diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Category/CategoryController.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Category/CategoryController.js" new file mode 100644 index 0000000..eba7f57 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Category/CategoryController.js" @@ -0,0 +1,70 @@ +import { CATEGORY, ELEMENT, LOCAL_STORAGE, TRANSACTION_TYPE } from "../utils/constants.js"; +import { + HOME_BUTTON, + INCOME_CATEGORY_INPUT, + INCOME_CATEGORY_SECTION, + SPENDING_CATEGORY_INPUT, + SPENDING_CATEGORY_SECTION, +} from "../utils/documentElements.js"; + +HOME_BUTTON.addEventListener("click", () => { + window.location.href = "../index.html"; +}); + +function addToCategoryList(type, name) { + const categoryList = + type === TRANSACTION_TYPE.INCOME ? CATEGORY.INCOME : CATEGORY.SPENDING; + categoryList.push(name); +} + +function appendCategoryTagElement(name, categorySection) { + const CATEGORY_TAG = document.createElement(ELEMENT.HTMLTAG.DIV); + CATEGORY_TAG.className = ELEMENT.CLASSNAME.CATEGORY_TAG; + CATEGORY_TAG.innerHTML = name; + categorySection.appendChild(CATEGORY_TAG); +} + +function saveToLocalStorage(type) { + const storageKey = + type === TRANSACTION_TYPE.INCOME + ? LOCAL_STORAGE.INCOME + : LOCAL_STORAGE.SPENDING; + const categoryList = + type === TRANSACTION_TYPE.INCOME ? CATEGORY.INCOME : CATEGORY.SPENDING; + localStorage.setItem(storageKey, JSON.stringify(categoryList)); +} + +function handleCategoryInput(type, inputField, categorySection) { + inputField.addEventListener("keydown", (event) => { + if (event.isComposing) return; // 중복 입력 방지 + if (event.key === "Enter") { + const categoryName = event.target.value; + addToCategoryList(type, categoryName); + appendCategoryTagElement(categoryName, categorySection); + saveToLocalStorage(type); + inputField.value = ""; + } + }); +} + +function renderCategoryTag(type, categorySection) { + const categoryList = + type === TRANSACTION_TYPE.INCOME ? CATEGORY.INCOME : CATEGORY.SPENDING; + categoryList.forEach((category) => { + appendCategoryTagElement(category, categorySection); + }); +} + +renderCategoryTag(TRANSACTION_TYPE.INCOME, INCOME_CATEGORY_SECTION); +renderCategoryTag(TRANSACTION_TYPE.SPENDING, SPENDING_CATEGORY_SECTION); + +handleCategoryInput( + TRANSACTION_TYPE.INCOME, + INCOME_CATEGORY_INPUT, + INCOME_CATEGORY_SECTION +); +handleCategoryInput( + TRANSACTION_TYPE.SPENDING, + SPENDING_CATEGORY_INPUT, + SPENDING_CATEGORY_SECTION +); diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Category/CategoryView.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Category/CategoryView.js" new file mode 100644 index 0000000..40a78da --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/Category/CategoryView.js" @@ -0,0 +1,60 @@ +import { CATEGORY, ELEMENT, TRANSACTION_TYPE } from "../utils/constants.js"; +import { + DROP_DOWN_CATEGORIES, + SELECTED_CATEGORY, + SELECTOR_DIV, + SELECT_TYPE_INCOME, + SELECT_TYPE_SPENDING, +} from "../utils/documentElements.js"; + +function handleSelectChange() { + SELECT_TYPE_INCOME.addEventListener("change", () => { + renderCategory(TRANSACTION_TYPE.INCOME, CATEGORY.INCOME); + SELECTED_CATEGORY.innerText = CATEGORY.INCOME[0]; + }); + + SELECT_TYPE_SPENDING.addEventListener("change", () => { + renderCategory(TRANSACTION_TYPE.SPENDING, CATEGORY.SPENDING); + SELECTED_CATEGORY.innerText = CATEGORY.SPENDING[0]; + }); +} + +function handleCategoryClick() { + const categories = document.querySelectorAll(".categories .category"); + categories.forEach((category) => { + category.addEventListener("click", (event) => { + SELECTED_CATEGORY.innerText = event.target.innerText; + SELECTOR_DIV.classList.remove(ELEMENT.CLASSNAME.ACTIVE); + }); + }); +} + +function createCategoryList(type, category) { + const dropDownList = document.createElement(ELEMENT.HTMLTAG.LIST); + dropDownList.className = ELEMENT.CLASSNAME.CATEGORY; + type === TRANSACTION_TYPE.INCOME + ? dropDownList.classList.add(ELEMENT.CLASSNAME.TYPE_INCOME) + : dropDownList.classList.add(ELEMENT.CLASSNAME.TYPE_SPENDING); + dropDownList.innerHTML = category; + DROP_DOWN_CATEGORIES.appendChild(dropDownList); + handleCategoryClick(); +} + +function resetCategory() { + while (DROP_DOWN_CATEGORIES.firstChild) { + DROP_DOWN_CATEGORIES.removeChild(DROP_DOWN_CATEGORIES.firstChild); + } +} + +export function renderCategory(type, categoryList) { + if (!type & !categoryList) { + type = TRANSACTION_TYPE; + categoryList = CATEGORY.INCOME; + handleCategoryClick(); + } + resetCategory(); + categoryList.forEach((category) => { + createCategoryList(type, category); + }); + handleSelectChange(); +} diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryController.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryController.js" new file mode 100644 index 0000000..fd38e3e --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryController.js" @@ -0,0 +1,55 @@ +import { renderAssetData } from "../Asset/AssetView.js"; +import { ELEMENT, HISTORY_LIST } from "../utils/constants.js"; +import { MODAL_BACKGROUND, CANCEL_BUTTON, CONFIRM_BUTTON, MODAL_DELETE } from "../utils/documentElements.js"; + +let indexToDelete; +let listToDelete; +let isConfirmed = false; + +function findIndexToDelete() { + return HISTORY_LIST.findIndex((history) => indexToDelete === history.id); +} + +function deleteList() { + const index = findIndexToDelete(); + if (index !== -1) { + HISTORY_LIST.splice(index, 1); + listToDelete.remove(); + renderAssetData(); + } +} + +function handleConfirmClick() { + isConfirmed = true; + deleteList(); + closeModal(); +} + +function handleCancelClick() { + isConfirmed = false; + closeModal(); +} + +function openModal() { + MODAL_DELETE.style.display = ELEMENT.STYLE.DISPLAY.FLEX; + MODAL_BACKGROUND.style.display = ELEMENT.STYLE.DISPLAY.BLOCK; +} + +function closeModal() { + MODAL_DELETE.style.display = ELEMENT.STYLE.DISPLAY.NONE; + MODAL_BACKGROUND.style.display = ELEMENT.STYLE.DISPLAY.NONE; +} + +export function setDeleteEvent() { + const deleteButtons = document.querySelectorAll("button.delete"); + deleteButtons.forEach((button) => { + button.addEventListener("click", (event) => { + indexToDelete = parseInt(event.target.getAttribute(ELEMENT.ATTRIBUTE.DATA_INDEX)); + listToDelete = event.target.parentElement; + openModal(); + }); + }); + + CONFIRM_BUTTON.addEventListener("click", handleConfirmClick); + CANCEL_BUTTON.addEventListener("click", handleCancelClick); +} diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryListTemplate.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryListTemplate.js" new file mode 100644 index 0000000..b4b4ca7 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryListTemplate.js" @@ -0,0 +1,37 @@ +import { TRANSACTION_TYPE, ELEMENT } from "../utils/constants.js"; + +export function makeCategoryElement(category) { + const historyCategory = document.createElement(ELEMENT.HTMLTAG.TEXT); + historyCategory.className = ELEMENT.CLASSNAME.CATEGORY; + historyCategory.innerHTML = category; + return historyCategory; +} + +export function makeNameElement(name) { + const historyName = document.createElement(ELEMENT.HTMLTAG.TEXT); + historyName.className = ELEMENT.CLASSNAME.NAME; + historyName.innerHTML = name; + return historyName; +} + +export function makePriceElement(type, price) { + const historyPrice = document.createElement(ELEMENT.HTMLTAG.TEXT); + historyPrice.className = ELEMENT.CLASSNAME.PRICE; + if (type === TRANSACTION_TYPE.SPENDING) { + historyPrice.classList.add(ELEMENT.CLASSNAME.SPENDING, ELEMENT.CLASSNAME.MONEY); + } + if (type === TRANSACTION_TYPE.INCOME) { + historyPrice.classList.add(ELEMENT.CLASSNAME.INCOME, ELEMENT.CLASSNAME.MONEY); + } + historyPrice.innerText = price; + return historyPrice; +} + +export function makeDeleteButton(id) { + const deleteButton = document.createElement(ELEMENT.HTMLTAG.BUTTON); + deleteButton.className = ELEMENT.CLASSNAME.DELETE; + const attributeName = ELEMENT.ATTRIBUTE.DATA_INDEX; + const attributeValue = id; + deleteButton.setAttribute(attributeName, attributeValue); + return deleteButton; +} diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryView.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryView.js" new file mode 100644 index 0000000..9a35431 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/HistoryView.js" @@ -0,0 +1,38 @@ +import { ELEMENT, HISTORY_LIST } from "../utils/constants.js"; +import { HISTORY_DIV } from "../utils/documentElements.js"; +import { setDeleteEvent } from "./HistoryController.js"; +import { changeFormat } from "../utils/moneyFormatter.js"; +import { makeCategoryElement, makeDeleteButton, makeNameElement, makePriceElement } from "./HistoryListTemplate.js"; +import { handleModal } from "./ModalController.js"; + +function addList(history) { + const list = document.createElement(ELEMENT.HTMLTAG.LIST); + list.append( + makeCategoryElement(history.category), + makeNameElement(history.content), + makePriceElement(history.type, history.money), + makeDeleteButton(history.id) + ); + HISTORY_DIV.appendChild(list); + setDeleteEvent(); +} + +export function resetData() { + while (HISTORY_DIV.firstChild) { + HISTORY_DIV.removeChild(HISTORY_DIV.firstChild); + } +} + +export function renderHistoryList(list) { + if (list === undefined) { + //전체 데이터를 렌더링 하고자 호출했을 때 + list = HISTORY_LIST; + } + resetData(); + list.forEach((history) => { + addList(history); + }); + changeFormat(); +} + +handleModal(); diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/ModalController.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/ModalController.js" new file mode 100644 index 0000000..887f1ad --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/ModalController.js" @@ -0,0 +1,74 @@ +import { ELEMENT, HISTORY_LIST, MESSAGE, TRANSACTION_TYPE } from "../utils/constants.js"; +import { renderHistoryList } from "./HistoryView.js"; +import { renderAssetData } from "../Asset/AssetView.js"; +import { + ADD_HISTORY_BUTTON, + CLOSE_MODAL_BUTTON, + CONTENT_INPUT, + MODAL, + MODAL_BACKGROUND, + PRICE_INPUT, + SAVE_BUTTON, + SELECTED_CATEGORY, + SELECTOR, + SELECTOR_DIV, + SELECT_TYPE_SPENDING, +} from "../utils/documentElements.js"; + +function handleSelectorClick() { + SELECTOR_DIV.classList.add(ELEMENT.CLASSNAME.ACTIVE); +} + +function handleAddHistoryButtonClick() { + MODAL_BACKGROUND.style.display = ELEMENT.STYLE.DISPLAY.BLOCK; + MODAL.style.bottom = 0; +} + +function handleCloseModalButtonClick() { + MODAL_BACKGROUND.style.display = ELEMENT.STYLE.DISPLAY.NONE; + MODAL.style.bottom = "-60%"; +} + +function handleSaveButtonClick() { + const transactionType = SELECT_TYPE_SPENDING.checked ? TRANSACTION_TYPE.SPENDING : TRANSACTION_TYPE.INCOME; + const money = parseInt(PRICE_INPUT.value.replace(/,/g, "")); + const content = CONTENT_INPUT.value; + const category = SELECTED_CATEGORY.innerText; + + if (!money || !content || category === MESSAGE.CATEGORY_UNSELECTED) { + alert(MESSAGE.EMPTY_FIELD); + resetField(); + } else { + HISTORY_LIST.push({ + id: HISTORY_LIST.length - 1, + type: transactionType, + category: category, + content: content, + money: money, + }); + renderHistoryList(); + renderAssetData(); + alert(MESSAGE.ADD_LIST_SUCCESS); + resetField(); + } +} + +function handlePriceInputFieldInput(e) { + if (isNaN(e.data)) { + alert(MESSAGE.PRICE_IS_NOT_NUMBER); + PRICE_INPUT.value = ""; + } +} + +function resetField() { + PRICE_INPUT.value = ""; + CONTENT_INPUT.value = ""; +} + +export function handleModal() { + SELECTOR.addEventListener("click", handleSelectorClick); + ADD_HISTORY_BUTTON.addEventListener("click", handleAddHistoryButtonClick); + CLOSE_MODAL_BUTTON.addEventListener("click", handleCloseModalButtonClick); + SAVE_BUTTON.addEventListener("click", handleSaveButtonClick); + PRICE_INPUT.addEventListener("input", handlePriceInputFieldInput); +} diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/TransactionFilter.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/TransactionFilter.js" new file mode 100644 index 0000000..89b1945 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/History/TransactionFilter.js" @@ -0,0 +1,28 @@ +import { TRANSACTION_TYPE, HISTORY_LIST } from "../utils/constants.js"; +import { INCOME_BUTTON, SPENDING_BUTTON } from "../utils/documentElements.js"; +import { renderHistoryList, resetData } from "./HistoryView.js"; + +INCOME_BUTTON.addEventListener("click", handleButtonClick); +SPENDING_BUTTON.addEventListener("click", handleButtonClick); + +function handleButtonClick() { + const isIncomeChecked = INCOME_BUTTON.checked; + const isSpendingChecked = SPENDING_BUTTON.checked; + + if (!isIncomeChecked && !isSpendingChecked) { + // 둘 다 체크 안된 경우 + resetData(); + } else { + const selectedTypes = []; + + isIncomeChecked && selectedTypes.push(TRANSACTION_TYPE.INCOME); + isSpendingChecked && selectedTypes.push(TRANSACTION_TYPE.SPENDING); + + const filteredHistoryList = filterHistoryList(selectedTypes); + renderHistoryList(filteredHistoryList); + } +} + +function filterHistoryList(types) { + return HISTORY_LIST.filter((history) => types.includes(history.type)); +} diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/constants.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/constants.js" new file mode 100644 index 0000000..b94388e --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/constants.js" @@ -0,0 +1,94 @@ +export const INIT_BALANCE = 0; +export const INIT_INCOME = 0; +export const INIT_SPENDING = 0; + +export const TRANSACTION_TYPE = { + SPENDING: 0, + INCOME: 1, +}; + +export const LOCAL_STORAGE = { + SPENDING: "categories-spending", + INCOME: "categories-income", +}; + +export const CATEGORY = { + SPENDING: + localStorage.getItem(LOCAL_STORAGE.SPENDING) !== null //로컬스토리지에 값이 있는지 체크 + ? JSON.parse(localStorage.getItem(LOCAL_STORAGE.SPENDING)) + : ["쇼핑", "교통"], + INCOME: + localStorage.getItem(LOCAL_STORAGE.INCOME) !== null + ? JSON.parse(localStorage.getItem(LOCAL_STORAGE.INCOME)) + : ["이체", "용돈"], +}; + +export const ELEMENT = { + HTMLTAG: { + TEXT: "p", + LIST: "li", + BUTTON: "button", + DIV: "div", + }, + CLASSNAME: { + CATEGORY: "category", + NAME: "name", + PRICE: "price", + SPENDING: "spending", + INCOME: "income", + DELETE: "delete", + MONEY: "money", + TYPE_INCOME: "type-income", + TYPE_SPENDING: "type-spending", + CATEGORY_TAG: "category-tag", + ACTIVE: "active", + }, + ATTRIBUTE: { + DATA_INDEX: "data-index", + }, + STYLE: { + DISPLAY: { + FLEX: "flex", + BLOCK: "block", + NONE: "none", + }, + }, +}; + +export const MESSAGE = { + EMPTY_FIELD: "모든 필드를 입력해주세요", + CATEGORY_UNSELECTED: "카테고리를 선택하세요", + ADD_LIST_SUCCESS: "내역이 추가되었어요", + PRICE_IS_NOT_NUMBER: "금액은 숫자여야 합니다", +}; + +export const HISTORY_LIST = [ + { + id: 0, + type: TRANSACTION_TYPE.INCOME, + category: CATEGORY.INCOME[0], + content: "생활비", + money: 1200000, + }, + { + id: 1, + type: TRANSACTION_TYPE.SPENDING, + category: CATEGORY.INCOME[0], + content: "티머니", + money: 6200, + }, + { + id: 2, + type: TRANSACTION_TYPE.SPENDING, + category: CATEGORY.SPENDING[1], + content: "쿠팡환불", + money: 27000, + }, + { + id: 3, + type: TRANSACTION_TYPE.INCOME, + category: CATEGORY.INCOME[1], + content: "홍길동", + money: 3000, + }, +]; diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/documentElements.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/documentElements.js" new file mode 100644 index 0000000..532f975 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/documentElements.js" @@ -0,0 +1,33 @@ +export const HISTORY_DIV = document.querySelector("#history ul"); + +export const INCOME_BUTTON = document.querySelector("#money-type #type-income"); +export const SPENDING_BUTTON = document.querySelector("#money-type #type-spending"); +export const HOME_BUTTON = document.querySelector("#go-home-button"); +export const ADD_HISTORY_BUTTON = document.querySelector("button#add"); +export const SAVE_BUTTON = document.querySelector("#save"); + +export const TOTAL_MONEY = document.querySelector("#asset #money"); +export const TODY_TOTAL_INCOME = document.querySelector("#today .income"); +export const TODY_TOTAL_SPENDING = document.querySelector("#today .spending"); + +export const MODAL_BACKGROUND = document.querySelector("#modal-background"); +export const MODAL_DELETE = document.querySelector("#delete-modal"); +export const CONFIRM_BUTTON = document.querySelector("button#confirm"); +export const CANCEL_BUTTON = document.querySelector("button#cancel"); + +export const SELECTOR_DIV = document.querySelector(".select-category"); +export const SELECTOR = document.querySelector(".selector"); +export const SELECTED_CATEGORY = document.querySelector(".selected-category"); +export const SELECT_TYPE_INCOME = document.querySelector("#select-income"); +export const SELECT_TYPE_SPENDING = document.querySelector("#select-spending"); + +export const MODAL = document.querySelector("#add-history-modal"); +export const DROP_DOWN_CATEGORIES = document.querySelector("ul.categories"); +export const CLOSE_MODAL_BUTTON = document.querySelector("#close"); +export const PRICE_INPUT = document.querySelector("#input-price"); +export const CONTENT_INPUT = document.querySelector("#input-content"); + +export const INCOME_CATEGORY_INPUT = document.querySelector("#input-income-category"); +export const SPENDING_CATEGORY_INPUT = document.querySelector("#input-spending-category"); +export const INCOME_CATEGORY_SECTION = document.querySelector("#income-category"); +export const SPENDING_CATEGORY_SECTION = document.querySelector("#spending-category"); diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/moneyFormatter.js" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/moneyFormatter.js" new file mode 100644 index 0000000..76ce4dc --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/js/utils/moneyFormatter.js" @@ -0,0 +1,17 @@ +export function changeFormat() { + const money = document.querySelectorAll(".money"); + money.forEach((text) => { + let changedText = text.innerHTML + .toString() + .replace(/\B(? { + let value = e.target.value; + value = Number(value.replaceAll(",", "")); + const formatValue = value.toLocaleString("ko-KR"); + input.value = formatValue; +}); diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/pages/category.html" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/pages/category.html" new file mode 100644 index 0000000..9c2c3b5 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/pages/category.html" @@ -0,0 +1,39 @@ + + + + + + + + + + 수빈 | 가계부 | 카테고리 관리 + + + +
+

카테고리 관리

+
+
+

수입 카테고리

+
+
+
+

카테고리 추가

+ +
+
+
+

지출 카테고리

+
+
+
+

카테고리 추가

+ +
+
+ + + + + \ No newline at end of file diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/styles/category.css" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/styles/category.css" new file mode 100644 index 0000000..a331bb8 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/styles/category.css" @@ -0,0 +1,67 @@ +@import "reset.css"; + +.category-manage-section { + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; + + padding: 20px; + + border-radius: 12px; + + background-color: #ffffff; +} + +.category-tag-wrapper { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.category-tag { + padding: 8px 16px; + + border-radius: 5px; + + background-color: #E1ECFC; + + color: #4880ee; +} + +.add-category { + display: flex; + justify-content: space-between; + + width: 100%; + + margin-top: 16px; +} + +.input-category { + width: 60%; + + padding-bottom: 5px; + + border: none; + border-bottom: 1px solid #f2f2f2; + outline: none; +} + +#go-home-button { + position: absolute; + bottom: 10px; + + width: calc(100% - 20px); + height: 44px; + + border: none; + border-radius: 6px; + + background-color: #4880ee; + + font-size: 16px; + line-height: 44px; + font-weight: 500; + color: #ffffff; +} \ No newline at end of file diff --git "a/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/styles/reset.css" "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/styles/reset.css" new file mode 100644 index 0000000..0fbdad1 --- /dev/null +++ "b/week2/assignment/\352\260\200\352\263\204\353\266\200 \360\237\222\270/styles/reset.css" @@ -0,0 +1,169 @@ +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-weight: 500; + 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; +} + +* { + margin: 0px; + padding: 0px; + font-family: Pretendard, sans-serif; + box-sizing: border-box; +} + +html { + background-color: #d9d9d9; +} + +body { + display: flex; + flex-direction: column; + gap: 10px; + width: 100vw; + min-height: 100vh; + margin: auto; + overflow: hidden; + padding: 10px; + background-color: #f8f8f8; +} + +button { + border: none; + cursor: pointer; +} + +header { + padding: 20px; + background-color: #ffffff; + border-radius: 10px; +} + +h1, +h2 { + font-size: 20px; +} \ No newline at end of file diff --git "a/week2/assignment/\354\203\235\352\260\201\352\263\274\354\240\234 \360\237\222\255/thinking.md" "b/week2/assignment/\354\203\235\352\260\201\352\263\274\354\240\234 \360\237\222\255/thinking.md" new file mode 100644 index 0000000..a4edaf6 --- /dev/null +++ "b/week2/assignment/\354\203\235\352\260\201\352\263\274\354\240\234 \360\237\222\255/thinking.md" @@ -0,0 +1,27 @@ +# 🫵🏻 명령형 프로그래밍 , ✋🏻 선언형 프로그래밍 + +## 🥊 명령형 프로그래밍 vs 선언형 프로그래밍 + + +### 🤔 명령형 프로그래밍과 선언형 프로그래밍은 무엇일까? + +명령형 프로그래밍은 컴퓨터에게 `어떻게 어떤 작업을 수행해야 하는지 세세하게 지시`하는 방식,
+프로그래머가 `프로그램 실행 순서`와 `데이터 상태`를 명시적으로 제어한다. + +선언형 프로그래밍은 어떤 작업을 어떻게 하는지에 대한 세부 사항을 명시하지 않고, `원하는 결과를 설명`하는 방식,
+프로그래머는 `무엇(What)`을 얻을 것인지만 명시하며, 시스템은 `어떻게(How)` 이루어져야 하는지 자동으로 결정한다. + +### 🗣️ 각각의 방식을 따르는 언어는 무엇이 있을까? + +명령형 프로그래밍 언어 : C, C++, Java 등
+선언형 프로그래밍 언어 : SQL, (HTML), CSS, 리액트 등 + + +### 🤷🏻 각각의 방식은 어떤 상황/유형에 쓰는 것이 적합할까? + +`목표에 대한 과정`(스텝 하나하나)이 명확히 명시돼어야 할때는 `명령형 언어`를 쓰는 것이 적합할 것 같다
+목표는 명확하지만 어떻게 할지는 중요하지 않은? (중요하지 않다기 보다는 ..) `결과 중심의 작업`을 할 때는 `선언형 언어`가 적합할 것이다 + +### 🍌 JavaScript 에서는 어떤 방식을 선택하는 것이 좋을까? + +자바스크립트에서는 선언형 프로그래밍을 통해 `가독성`이 좋고 `재사용성`성이 좋아지도록 하는 것이 좋을 것 같다 diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/font/Pretendard-Medium.otf" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/font/Pretendard-Medium.otf" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/font/Pretendard-Medium.otf" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/font/Pretendard-Medium.otf" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/beer-museum.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/beer-museum.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/beer-museum.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/beer-museum.jpg" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/biei.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/biei.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/biei.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/biei.jpg" diff --git "a/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/end.png" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/end.png" new file mode 100644 index 0000000..3a3ce73 Binary files /dev/null and "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/end.png" differ diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/favicon.ico" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/favicon.ico" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/favicon.ico" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/favicon.ico" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ferris.png" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ferris.png" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ferris.png" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ferris.png" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/japan.JPG" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/japan.JPG" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/japan.JPG" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/japan.JPG" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/jozankei.JPG" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/jozankei.JPG" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/jozankei.JPG" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/jozankei.JPG" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/nikka.png" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/nikka.png" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/nikka.png" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/nikka.png" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ningle-terrace.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ningle-terrace.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ningle-terrace.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ningle-terrace.jpg" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/odori.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/odori.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/odori.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/odori.jpg" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/otaru-canal.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/otaru-canal.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/otaru-canal.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/otaru-canal.jpg" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ramen2.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ramen2.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ramen2.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ramen2.jpg" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ryokan1.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ryokan1.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ryokan1.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ryokan1.jpg" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ryokan2.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ryokan2.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ryokan2.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ryokan2.jpg" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/sarutama.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/sarutama.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/sarutama.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/sarutama.jpg" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ski.jpg" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ski.jpg" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ski.jpg" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/ski.jpg" diff --git "a/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/start.png" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/start.png" new file mode 100644 index 0000000..0709b70 Binary files /dev/null and "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/start.png" differ diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/tako.JPG" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/tako.JPG" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/tako.JPG" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/tako.JPG" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/top-arrow.png" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/top-arrow.png" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/top-arrow.png" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/top-arrow.png" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/tv-tower.png" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/tv-tower.png" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/tv-tower.png" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/tv-tower.png" diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/vending.JPG" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/vending.JPG" similarity index 100% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/vending.JPG" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/img/vending.JPG" diff --git "a/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.html" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.html" new file mode 100644 index 0000000..e43bb6d --- /dev/null +++ "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.html" @@ -0,0 +1,146 @@ + + + + + + + + + + 수빈 | 삿포로 여행 계획 + + + +
+

🍣 🍶 🧤 🍡  삿포로 여행 계획  🍣 🍶 🧤 🍡

+
+
+ +
+ 비에이 + 자판기 + tv타워 + 니카상 + 료칸 + 오타루운하 + 닝구르테라스 + 스키장 + 사루야마온천 +
+ +
+ +
+
+

DAY 1️⃣

+
+
+
+
+

비에이

+

일본 특유의 겨울 감성을
느낄 수 있는 곳으로,
끝없이 펼쳐진 설경이
인상적인 여행지

+
+
+
+
+

오타루운하

+

낭만적인 경치를
볼 수 있는 곳

+
+
+
+
+

닝구르테라스

+

통나무집 위에 쌓인 눈들과
은은한 조명이 아름다운
숲속의 작은 요정 마을같이
동화같은 곳

+
+
+
+
+

테이네 스키장

+

예쁜 경치에서 즐기는
신나는 스키 모험

+
+
+
+
+

TV 타워

+

삿포로 중심의
랜드마크

+
+
+
+
+

사루야마온천

+

추위를 견디기 위해
온천을 즐기는 원숭이들을
볼 수 있는 원숭이 온천
족탕과 온천 시설도
마련되어 있다

+
+
+
+
+

맥주 박물관

+

삿포로 맥주의
역사를 한눈에

+
+
+
+
+

노리아 대관람차

+

삿포로의 야경을
즐길 수 있는 관람차

+
+
+
+
+

니카상

+

오사카에는 글리코상
삿포로에는 니카상

+
+
+
+
+

유엔 삿포로

+

환상적인 뷰가 인상적인
모던 료칸

+
+
+
+
+
+
+

DAY 2️⃣

+
+
+
+ 료칸 +
+
+ 조잔케이 온천 + 타코야끼 + 라멘 + 오도리공원 +
+
+
+
+
+

DAY 3️⃣

+
+
+
+
+
+
+
+
+
+ + +
+ 위쪽화살표 +
+ + + + + \ No newline at end of file diff --git "a/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.js" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.js" new file mode 100644 index 0000000..f642de9 --- /dev/null +++ "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/index.js" @@ -0,0 +1,68 @@ +/* 스크롤에 따라 탑버튼을 점점 선명하게 만드는 함수 */ +document.addEventListener("scroll", () => { + const topButton = document.querySelector("#top div"); + const opacity = scrollY / (document.body.scrollHeight - window.innerHeight); + topButton.style.opacity = Math.min(opacity, 1); //opacity의 최댓값을 1로 설정하기 위함 +}); + +const detailBox = document.querySelectorAll(".detail"); +const details = document.querySelectorAll(".detail p"); + +function createDetailButton() { + const detailButton = document.createElement("button"); + detailButton.className = "read_more"; + detailButton.innerHTML = "더보기"; + return detailButton; +} + +/* 디테일의 폰트크기와 높이를 이용하여 디테일버튼을 만들어야 할 지 결정하는 함수 */ +function shouldShowButton(detail) { + const detailHeight = window.getComputedStyle(detail).height.split("px")[0]; + const fontSize = window.getComputedStyle(detail).fontSize.split("px")[0]; + return detailHeight > fontSize * 3; //디테일이 세 줄 이상인지를 계산 +} + +function hideButton(button) { + button.style.display = "none"; +} + +function showDetail(detail) { + detail.style.display = "inline"; +} + +/* 조건에 따라 디테일 버튼을 만들고 디테일 버튼의 클릭이벤트를 처리하는 기능 */ +detailBox.forEach((box, index) => { + const detail = details[index]; + if (shouldShowButton(detail)) { + const detailButton = createDetailButton(); + box.appendChild(detailButton); + + detailButton.addEventListener("click", () => { + hideButton(detailButton); + showDetail(detail); + }); + } +}); + +/* preview 섹션 양쪽 끝으로 이동하는 기능 */ +const startButton = document.querySelector(".start"); +const endButton = document.querySelector(".end"); +const previewSection = document.querySelector("#preview .gallery"); + +startButton.addEventListener("click", () => { + const scrollOptions = { + left: 0, + behavior: "smooth", + }; + + previewSection.scrollTo(scrollOptions); +}); + +endButton.addEventListener("click", () => { + const scrollOptions = { + left: previewSection.scrollWidth, + behavior: "smooth", + }; + + previewSection.scrollTo(scrollOptions); +}); diff --git "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/style.css" "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/style.css" similarity index 59% rename from "week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/style.css" rename to "week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/style.css" index dafc601..49f1221 100644 --- "a/week1/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/style.css" +++ "b/week2/assignment/\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200 \360\237\223\270/style.css" @@ -16,6 +16,11 @@ html { a { text-decoration: none; + color: #000000; +} + +a:hover { + color: #5AB2FF; } p { @@ -41,32 +46,104 @@ h1 { font-weight: 500; } +h2 { + font-size: 20px; + font-weight: 500; +} + +h4 { + font-size: 20px; + font-weight: 500; +} + +button { + border: none; + cursor: pointer; +} + +nav { + display: flex; + align-items: center; + justify-content: center; + width: 1000px; + height: 80px; + margin: 10px auto 10px auto; + font-size: 20px; + background-color: #B7CAE2; + border-radius: 10px; +} + +li { + list-style: none; +} + #preview { display: flex; justify-content: space-between; + gap: 10px; + overflow-x: scroll; + + position: relative; + + width: 1000px; + + margin: 0 auto 10px auto; + padding-bottom: 10px; +} + +#preview .gallery { + display: flex; + justify-content: space-between; gap: 10px; + + overflow-x: scroll; + width: 1000px; + margin: 0 auto 10px auto; padding-bottom: 10px; } -#preview::-webkit-scrollbar { +#preview .gallery::-webkit-scrollbar { width: 10px; } -#preview::-webkit-scrollbar-thumb { - background: #86B1E5; +#preview .gallery::-webkit-scrollbar-thumb { border-radius: 10px; + + background: #86B1E5; } -#preview::-webkit-scrollbar-track { +#preview .gallery::-webkit-scrollbar-track { border-radius: 10px; + background-color: #B7CAE2; } +#preview button { + position: absolute; + top: calc(50% - 90px); + + height: 100px; + width: 50px; +} + +button.start { + left: 0; + + background: no-repeat center/cover url('./img/start.png'); +} + +button.end { + right: 0; + + background: no-repeat center/cover url('./img/end.png'); +} + #preview img { width: 350px; + border-radius: 10px; } @@ -78,12 +155,16 @@ nav { display: flex; align-items: center; justify-content: center; + width: 1000px; height: 80px; + + border-radius: 10px; + + background-color: #B7CAE2; + margin: 10px auto 10px auto; font-size: 20px; - background-color: #B7CAE2; - border-radius: 10px; } nav p { @@ -93,8 +174,8 @@ nav p { nav ul { display: flex; justify-content: space-between; + width: 240px; - list-style: none; } nav li { @@ -102,59 +183,152 @@ nav li { } nav li:hover { - cursor: pointer; + color: #5AB2FF; + text-decoration: underline; - color: #5AB2FF + + cursor: pointer; } .index { position: sticky; - z-index:1; top: 0; + z-index: 1; + width: 1000px; height: 60px; + margin: 10px auto; - text-align: center; - line-height: 60px; - background-color: #AAC2DD; + border-radius: 8px; -} -h2 { - font-size: 20px; - font-weight: 500; + background-color: #AAC2DD; + + text-align: center; + line-height: 60px; } #day1 .gallery { display: flex; justify-content: center; flex-wrap: wrap; - max-width: 1000px; - margin: 10px auto 0 auto; - padding: 0 140px 0 140px; gap: 10px; + + max-width: 1000px; + + margin: 10px auto 0; + padding: 0 140px; } -#day1 .gallery img { +#day1 .gallery .item { flex-grow: 1; + + position: relative; + width: 180px; height: 180px; + border-radius: 10px; + transition: transform 1s ease, padding 1s ease; } -#day1 .gallery img:hover { +#day1 .gallery .item:hover { transform: translate(0, -10px); } +#day1 .gallery .item:nth-child(1) { + background: no-repeat center/cover url('./img/biei.jpg'); +} + +#day1 .gallery .item:nth-child(2) { + background: no-repeat center/cover url('./img/otaru-canal.jpg'); +} + +#day1 .gallery .item:nth-child(3) { + background: no-repeat center/cover url('./img/ningle-terrace.jpg'); +} + +#day1 .gallery .item:nth-child(4) { + background: no-repeat center/cover url('./img/ski.jpg'); +} + +#day1 .gallery .item:nth-child(5) { + background: no-repeat center/cover url('./img/tv-tower.png'); +} + +#day1 .gallery .item:nth-child(6) { + background: no-repeat center/cover url('./img/sarutama.jpg'); +} + +#day1 .gallery .item:nth-child(7) { + background: no-repeat center/cover url('./img/beer-museum.jpg'); +} + +#day1 .gallery .item:nth-child(8) { + background: no-repeat center/cover url('./img/ferris.png'); +} + +#day1 .gallery .item:nth-child(9) { + background: no-repeat center/cover url('./img/nikka.png'); +} + +#day1 .gallery .item:nth-child(10) { + background: no-repeat center/cover url('./img/ryokan1.jpg'); +} + +#day1 .detail { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + + position: absolute; + + width: 100%; + height: 180px; + + border-radius: 10px; + text-align: center; + color: #FFFFFF; + + opacity: 0; + + transition: opacity 0.3s ease; +} + +#day1 .detail p { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + + overflow: hidden; + text-overflow: ellipsis; +} + +#day1 .detail button { + padding: 5px 10px; + + border-radius: 20px; +} + +#day1 .detail:hover { + background-color: rgba(0, 0, 0, 0.6); + + opacity: 1; +} + #day2 .gallery { display: flex; justify-content: space-between; flex-wrap: wrap; + gap: 10px; + max-width: 1000px; - margin: 10px auto 10px auto; + + margin: 10px auto; padding: 0 10%; - gap: 10px; } #day2 .gallery .left { @@ -165,16 +339,18 @@ h2 { } #day2 .gallery .right { - flex: 1; display: flex; + flex: 1; flex-basis: 50%; flex-wrap: wrap; - min-width: 400px; gap: 10px; + + min-width: 400px; } #day2 .gallery img { border-radius: 10px; + transition: transform 1s ease, padding 1s ease; } @@ -184,6 +360,7 @@ h2 { #day2 .gallery .left img { flex-grow: 1; + width: 400px; height: 420px; } @@ -191,6 +368,7 @@ h2 { #day2 .gallery .right img { flex-grow: 1; + width: 200px; height: 205px; } @@ -200,9 +378,11 @@ h2 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; + width: 1000px; height: 500px; - margin: 10px auto 0 auto; + + margin: 10px auto 0; } #day3 .gallery .item { @@ -212,30 +392,35 @@ h2 { #day3 .gallery .item:nth-child(1) { grid-column: span 2; grid-row: span 1; + background: no-repeat center/cover url('./img/nikka.png'); } #day3 .gallery .item:nth-child(2) { grid-column: span 2; grid-row: span 2; + background: no-repeat center/cover url('./img/ryokan1.jpg'); } #day3 .gallery .item:nth-child(3) { grid-column: span 2; grid-row: span 1; + background: no-repeat center/cover url('./img/beer-museum.jpg'); } #day3 .gallery .item:nth-child(4) { grid-column: span 3; grid-row: span 2; + background: no-repeat center/cover url('./img/ferris.png'); } #day3 .gallery .item:nth-child(5) { grid-column: span 1; grid-row: span 2; + background: no-repeat center/cover url('./img/vending.JPG'); } @@ -243,26 +428,37 @@ footer { display: flex; justify-content: center; align-items: center; + width: 1000px; height: 150px; + margin: 10px auto; + + border-radius: 10px; + + background-color: #86B1E5; + font-size: 24px; text-align: center; - background-color: #86B1E5; - border-radius: 10px; } #top div { display: flex; justify-content: center; align-items: center; + position: fixed; bottom: 30px; right: 30px; + width: 80px; height: 80px; - background-color: #FFFFFF; + border-radius: 100%; + + background-color: #FFFFFF; + + opacity: 0; } #top img { diff --git a/week2/practice/index.css b/week2/practice/index.css new file mode 100644 index 0000000..610f667 --- /dev/null +++ b/week2/practice/index.css @@ -0,0 +1,26 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + background-color: beige; +} + +h1 { + text-align: center; +} + +ul { + font-size: 20px; +} + +.count { + cursor: pointer; +} + +.red { + color: red; +} + +.blue { + color: blue; +} \ No newline at end of file diff --git a/week2/practice/index.html b/week2/practice/index.html new file mode 100644 index 0000000..f513a5a --- /dev/null +++ b/week2/practice/index.html @@ -0,0 +1,25 @@ + + + + + + + + 2차 세미나 실습 + + + +

my favorite fruit list

+ + + + + + + \ No newline at end of file diff --git a/week2/practice/index.js b/week2/practice/index.js new file mode 100644 index 0000000..f68a6bc --- /dev/null +++ b/week2/practice/index.js @@ -0,0 +1,23 @@ +const mango = document.createElement("li"); +const mangoText = document.createTextNode("mango"); // or mango.innerText = "mango" + +mango.appendChild(mangoText); +const fruitList = document.querySelector("ul"); +fruitList.appendChild(mango); + +const redFruit = document.querySelectorAll(".red"); +redFruit.forEach((fruit) => { + fruit.remove(); +}); + +const thirdFruit = document.querySelector("li:nth-child(3)"); +thirdFruit.classList.add("blue"); + +const lengthButton = document.querySelector("button.count"); +lengthButton.addEventListener("click", showLength); + +const allList = document.querySelectorAll("li"); + +function showLength() { + alert(`과일 개수는 ${allList.length}개 입니다`); +}