From 90d0d6959bb191f3cc18948558ab096e3a241953 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Sun, 22 Sep 2024 17:33:48 +0900 Subject: [PATCH 01/20] =?UTF-8?q?gitignore=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..43583cb --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/web-dev-practice \ No newline at end of file From b4d953c552a126eceea628f169a8e27848f17a76 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Sun, 22 Sep 2024 22:51:59 +0900 Subject: [PATCH 02/20] =?UTF-8?q?keyword:=200=EC=A3=BC=EC=B0=A8=20keyword?= =?UTF-8?q?=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- keyword/chapter01/keyword.md | 0 keyword/chapter02/keyword.md | 392 +++++++++++++++++++++++++++++++++++ 2 files changed, 392 insertions(+) create mode 100644 keyword/chapter01/keyword.md create mode 100644 keyword/chapter02/keyword.md diff --git a/keyword/chapter01/keyword.md b/keyword/chapter01/keyword.md new file mode 100644 index 0000000..e69de29 diff --git a/keyword/chapter02/keyword.md b/keyword/chapter02/keyword.md new file mode 100644 index 0000000..13fa14c --- /dev/null +++ b/keyword/chapter02/keyword.md @@ -0,0 +1,392 @@ +- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  + + border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. + +- relative / absolute ๐Ÿ  + +```html + + + + + + + Document + + + + +
BOX
+

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

+ + + +``` + +- ์ •๋ ฌ์˜ ์ง„์ˆ˜ + - text-align + + ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • + + - margin + + ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • + + - flex + + ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ + + - translate + + ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ + + - grid + + ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ + +- ๋ฐ˜์‘ํ˜• background + - background-image + + ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • + + - background-repeat + + ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. + + - background-position + + background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • + + - background-size + + background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ + + - ์ถ•์•ฝํ˜• + + ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • + + - example + + ```html + background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); + ``` + +- transform ๐Ÿ  + + - translate + + ```html + + + + + + + Document + + + + +
BOX
+ + + + ``` + + - scale + + ```html + + + + + + Document + + + +
Normal
+
Scaled
+ + + ``` + + - rotate + + ```html + + + + + + Document + + + +
Normal
+
Rotated
+ + + + ``` + + - skew + + ```html + + + + + + Document + + + +
Normal
+
Skewed
+ + + ``` + + - matrix + + ```html + + + + + + Document + + + +
Normal
+
Changed
+ + + + ``` + +- transition + - transition-property + + transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. + + ```html + .target { + transition-property: background-color; + transition-duration: 1s; + background-color: #ccc; + } + + .target:hover, + .target:focus { + background-color: #eee; + } + ``` + + - transition-duration + + transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • + + - transition-timingfunction + + transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. + + - transition-delay + + animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • + + - transition-behavior + + display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. + + + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+
+
+ + + ``` + +- animation ๐Ÿ  + + - animation-name + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ + + - animation-duration + + ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • + + - animation-delay + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • + + - animation-direction + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • + + - animation-iteration-count + + ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • + + - animation-play-state + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ + + - animation-timing-function + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • + + - animation-fill-mode + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • + + - @keyframes + + ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • + + - ์ถ•์•ฝํ˜• + + ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+ + + ``` \ No newline at end of file From 9af2e2bacfbb6e4d94d3e0aa7ec394d99b72c6cb Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Sun, 22 Sep 2024 22:52:10 +0900 Subject: [PATCH 03/20] =?UTF-8?q?mission:=200=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission/chapter01/mission.md | 15 ++++++ mission/chapter02/mission1.html | 86 +++++++++++++++++++++++++++++++ mission/chapter02/mission2.html | 89 +++++++++++++++++++++++++++++++++ 3 files changed, 190 insertions(+) create mode 100644 mission/chapter01/mission.md create mode 100644 mission/chapter02/mission1.html create mode 100644 mission/chapter02/mission2.html diff --git a/mission/chapter01/mission.md b/mission/chapter01/mission.md new file mode 100644 index 0000000..9219b23 --- /dev/null +++ b/mission/chapter01/mission.md @@ -0,0 +1,15 @@ +- ๋ฉ”์ธ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/7a6e32d1-d6b7-46e1-a34c-94b41ae20952) + +- ํ”„๋กœ์ ํŠธ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/2c7bc851-bccc-4112-aee1-e0c42185807d) + +- ๋ฉค๋ฒ„ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/7da289e4-642e-4ddf-901c-27de051fe1d3) + +- NOTICE ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/17303bb0-7f96-462e-b52e-9b69153475d8) \ No newline at end of file diff --git a/mission/chapter02/mission1.html b/mission/chapter02/mission1.html new file mode 100644 index 0000000..a3c439f --- /dev/null +++ b/mission/chapter02/mission1.html @@ -0,0 +1,86 @@ + + + + + + Document + + + +
+
+ +
+ +
UMC
+
+ +
+
+ PROJECTS +
+
+ MEMBERS +
+
+ NOTICE +
+
+ +
+ +
+ + \ No newline at end of file diff --git a/mission/chapter02/mission2.html b/mission/chapter02/mission2.html new file mode 100644 index 0000000..5943a6b --- /dev/null +++ b/mission/chapter02/mission2.html @@ -0,0 +1,89 @@ + + + + + + + + +
+ +
+
HEADER
+
MENU
+
+ +
HERO
+ +
+
MAIN
+ + + +
+ +
BANNER
+
+ + \ No newline at end of file From ab5ca207591a64cb44fd015650aa9dd5f24fea1b Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Mon, 23 Sep 2024 18:07:56 +0900 Subject: [PATCH 04/20] =?UTF-8?q?week1=20=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- keyword/chapter00/{keyword.md => keyword0-0.md} | 0 .../keyword.md => chapter00/keyword0-1.md} | 0 .../keyword.md => chapter00/keyword0-2.md} | 0 mission/chapter00/mission.md | 16 +++++++++++++++- mission/{chapter02 => chapter00}/mission1.html | 0 mission/{chapter02 => chapter00}/mission2.html | 0 mission/chapter01/mission.md | 15 --------------- 7 files changed, 15 insertions(+), 16 deletions(-) rename keyword/chapter00/{keyword.md => keyword0-0.md} (100%) rename keyword/{chapter01/keyword.md => chapter00/keyword0-1.md} (100%) rename keyword/{chapter02/keyword.md => chapter00/keyword0-2.md} (100%) rename mission/{chapter02 => chapter00}/mission1.html (100%) rename mission/{chapter02 => chapter00}/mission2.html (100%) delete mode 100644 mission/chapter01/mission.md diff --git a/keyword/chapter00/keyword.md b/keyword/chapter00/keyword0-0.md similarity index 100% rename from keyword/chapter00/keyword.md rename to keyword/chapter00/keyword0-0.md diff --git a/keyword/chapter01/keyword.md b/keyword/chapter00/keyword0-1.md similarity index 100% rename from keyword/chapter01/keyword.md rename to keyword/chapter00/keyword0-1.md diff --git a/keyword/chapter02/keyword.md b/keyword/chapter00/keyword0-2.md similarity index 100% rename from keyword/chapter02/keyword.md rename to keyword/chapter00/keyword0-2.md diff --git a/mission/chapter00/mission.md b/mission/chapter00/mission.md index 224a23e..9219b23 100644 --- a/mission/chapter00/mission.md +++ b/mission/chapter00/mission.md @@ -1 +1,15 @@ -0์ฃผ ์ฐจ ๋ฏธ์…˜ ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค \ No newline at end of file +- ๋ฉ”์ธ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/7a6e32d1-d6b7-46e1-a34c-94b41ae20952) + +- ํ”„๋กœ์ ํŠธ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/2c7bc851-bccc-4112-aee1-e0c42185807d) + +- ๋ฉค๋ฒ„ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/7da289e4-642e-4ddf-901c-27de051fe1d3) + +- NOTICE ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/17303bb0-7f96-462e-b52e-9b69153475d8) \ No newline at end of file diff --git a/mission/chapter02/mission1.html b/mission/chapter00/mission1.html similarity index 100% rename from mission/chapter02/mission1.html rename to mission/chapter00/mission1.html diff --git a/mission/chapter02/mission2.html b/mission/chapter00/mission2.html similarity index 100% rename from mission/chapter02/mission2.html rename to mission/chapter00/mission2.html diff --git a/mission/chapter01/mission.md b/mission/chapter01/mission.md deleted file mode 100644 index 9219b23..0000000 --- a/mission/chapter01/mission.md +++ /dev/null @@ -1,15 +0,0 @@ -- ๋ฉ”์ธ ํŽ˜์ด์ง€ - -![image.png](https://github.com/user-attachments/assets/7a6e32d1-d6b7-46e1-a34c-94b41ae20952) - -- ํ”„๋กœ์ ํŠธ ํŽ˜์ด์ง€ - -![image.png](https://github.com/user-attachments/assets/2c7bc851-bccc-4112-aee1-e0c42185807d) - -- ๋ฉค๋ฒ„ ํŽ˜์ด์ง€ - -![image.png](https://github.com/user-attachments/assets/7da289e4-642e-4ddf-901c-27de051fe1d3) - -- NOTICE ํŽ˜์ด์ง€ - -![image.png](https://github.com/user-attachments/assets/17303bb0-7f96-462e-b52e-9b69153475d8) \ No newline at end of file From 670878b2c077f08a905bbcd0db56d4ff2f191b78 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Mon, 23 Sep 2024 18:07:56 +0900 Subject: [PATCH 05/20] =?UTF-8?q?week0=20=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- keyword/chapter00/{keyword.md => keyword0-0.md} | 0 .../keyword.md => chapter00/keyword0-1.md} | 0 .../keyword.md => chapter00/keyword0-2.md} | 0 mission/chapter00/mission.md | 16 +++++++++++++++- mission/{chapter02 => chapter00}/mission1.html | 0 mission/{chapter02 => chapter00}/mission2.html | 0 mission/chapter01/mission.md | 15 --------------- 7 files changed, 15 insertions(+), 16 deletions(-) rename keyword/chapter00/{keyword.md => keyword0-0.md} (100%) rename keyword/{chapter01/keyword.md => chapter00/keyword0-1.md} (100%) rename keyword/{chapter02/keyword.md => chapter00/keyword0-2.md} (100%) rename mission/{chapter02 => chapter00}/mission1.html (100%) rename mission/{chapter02 => chapter00}/mission2.html (100%) delete mode 100644 mission/chapter01/mission.md diff --git a/keyword/chapter00/keyword.md b/keyword/chapter00/keyword0-0.md similarity index 100% rename from keyword/chapter00/keyword.md rename to keyword/chapter00/keyword0-0.md diff --git a/keyword/chapter01/keyword.md b/keyword/chapter00/keyword0-1.md similarity index 100% rename from keyword/chapter01/keyword.md rename to keyword/chapter00/keyword0-1.md diff --git a/keyword/chapter02/keyword.md b/keyword/chapter00/keyword0-2.md similarity index 100% rename from keyword/chapter02/keyword.md rename to keyword/chapter00/keyword0-2.md diff --git a/mission/chapter00/mission.md b/mission/chapter00/mission.md index 224a23e..9219b23 100644 --- a/mission/chapter00/mission.md +++ b/mission/chapter00/mission.md @@ -1 +1,15 @@ -0์ฃผ ์ฐจ ๋ฏธ์…˜ ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค \ No newline at end of file +- ๋ฉ”์ธ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/7a6e32d1-d6b7-46e1-a34c-94b41ae20952) + +- ํ”„๋กœ์ ํŠธ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/2c7bc851-bccc-4112-aee1-e0c42185807d) + +- ๋ฉค๋ฒ„ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/7da289e4-642e-4ddf-901c-27de051fe1d3) + +- NOTICE ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/17303bb0-7f96-462e-b52e-9b69153475d8) \ No newline at end of file diff --git a/mission/chapter02/mission1.html b/mission/chapter00/mission1.html similarity index 100% rename from mission/chapter02/mission1.html rename to mission/chapter00/mission1.html diff --git a/mission/chapter02/mission2.html b/mission/chapter00/mission2.html similarity index 100% rename from mission/chapter02/mission2.html rename to mission/chapter00/mission2.html diff --git a/mission/chapter01/mission.md b/mission/chapter01/mission.md deleted file mode 100644 index 9219b23..0000000 --- a/mission/chapter01/mission.md +++ /dev/null @@ -1,15 +0,0 @@ -- ๋ฉ”์ธ ํŽ˜์ด์ง€ - -![image.png](https://github.com/user-attachments/assets/7a6e32d1-d6b7-46e1-a34c-94b41ae20952) - -- ํ”„๋กœ์ ํŠธ ํŽ˜์ด์ง€ - -![image.png](https://github.com/user-attachments/assets/2c7bc851-bccc-4112-aee1-e0c42185807d) - -- ๋ฉค๋ฒ„ ํŽ˜์ด์ง€ - -![image.png](https://github.com/user-attachments/assets/7da289e4-642e-4ddf-901c-27de051fe1d3) - -- NOTICE ํŽ˜์ด์ง€ - -![image.png](https://github.com/user-attachments/assets/17303bb0-7f96-462e-b52e-9b69153475d8) \ No newline at end of file From b807abcbb458e6f8c23f6cee0e19a3ab9ba06405 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:30:51 +0900 Subject: [PATCH 06/20] =?UTF-8?q?md=20=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- keyword/chapter00/css.md | 392 ++++++++++++++++++++++++++++++++++++++ keyword/chapter00/html.md | 0 2 files changed, 392 insertions(+) create mode 100644 keyword/chapter00/css.md create mode 100644 keyword/chapter00/html.md diff --git a/keyword/chapter00/css.md b/keyword/chapter00/css.md new file mode 100644 index 0000000..13fa14c --- /dev/null +++ b/keyword/chapter00/css.md @@ -0,0 +1,392 @@ +- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  + + border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. + +- relative / absolute ๐Ÿ  + +```html + + + + + + + Document + + + + +
BOX
+

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

+ + + +``` + +- ์ •๋ ฌ์˜ ์ง„์ˆ˜ + - text-align + + ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • + + - margin + + ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • + + - flex + + ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ + + - translate + + ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ + + - grid + + ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ + +- ๋ฐ˜์‘ํ˜• background + - background-image + + ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • + + - background-repeat + + ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. + + - background-position + + background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • + + - background-size + + background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ + + - ์ถ•์•ฝํ˜• + + ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • + + - example + + ```html + background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); + ``` + +- transform ๐Ÿ  + + - translate + + ```html + + + + + + + Document + + + + +
BOX
+ + + + ``` + + - scale + + ```html + + + + + + Document + + + +
Normal
+
Scaled
+ + + ``` + + - rotate + + ```html + + + + + + Document + + + +
Normal
+
Rotated
+ + + + ``` + + - skew + + ```html + + + + + + Document + + + +
Normal
+
Skewed
+ + + ``` + + - matrix + + ```html + + + + + + Document + + + +
Normal
+
Changed
+ + + + ``` + +- transition + - transition-property + + transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. + + ```html + .target { + transition-property: background-color; + transition-duration: 1s; + background-color: #ccc; + } + + .target:hover, + .target:focus { + background-color: #eee; + } + ``` + + - transition-duration + + transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • + + - transition-timingfunction + + transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. + + - transition-delay + + animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • + + - transition-behavior + + display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. + + + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+
+
+ + + ``` + +- animation ๐Ÿ  + + - animation-name + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ + + - animation-duration + + ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • + + - animation-delay + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • + + - animation-direction + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • + + - animation-iteration-count + + ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • + + - animation-play-state + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ + + - animation-timing-function + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • + + - animation-fill-mode + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • + + - @keyframes + + ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • + + - ์ถ•์•ฝํ˜• + + ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+ + + ``` \ No newline at end of file diff --git a/keyword/chapter00/html.md b/keyword/chapter00/html.md new file mode 100644 index 0000000..e69de29 From 276ebc3460dab4627d6342e3b2a59f6f5dc00981 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:34:19 +0900 Subject: [PATCH 07/20] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- keyword/chapter00/keyword0-1.md | 0 keyword/chapter00/keyword0-2.md | 392 -------------------------------- 2 files changed, 392 deletions(-) delete mode 100644 keyword/chapter00/keyword0-1.md delete mode 100644 keyword/chapter00/keyword0-2.md diff --git a/keyword/chapter00/keyword0-1.md b/keyword/chapter00/keyword0-1.md deleted file mode 100644 index e69de29..0000000 diff --git a/keyword/chapter00/keyword0-2.md b/keyword/chapter00/keyword0-2.md deleted file mode 100644 index 13fa14c..0000000 --- a/keyword/chapter00/keyword0-2.md +++ /dev/null @@ -1,392 +0,0 @@ -- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  - - border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. - -- relative / absolute ๐Ÿ  - -```html - - - - - - - Document - - - - -
BOX
-

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

- - - -``` - -- ์ •๋ ฌ์˜ ์ง„์ˆ˜ - - text-align - - ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • - - - margin - - ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • - - - flex - - ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ - - - translate - - ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ - - - grid - - ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ - -- ๋ฐ˜์‘ํ˜• background - - background-image - - ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • - - - background-repeat - - ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. - - - background-position - - background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • - - - background-size - - background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ - - - ์ถ•์•ฝํ˜• - - ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • - - - example - - ```html - background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); - ``` - -- transform ๐Ÿ  - - - translate - - ```html - - - - - - - Document - - - - -
BOX
- - - - ``` - - - scale - - ```html - - - - - - Document - - - -
Normal
-
Scaled
- - - ``` - - - rotate - - ```html - - - - - - Document - - - -
Normal
-
Rotated
- - - - ``` - - - skew - - ```html - - - - - - Document - - - -
Normal
-
Skewed
- - - ``` - - - matrix - - ```html - - - - - - Document - - - -
Normal
-
Changed
- - - - ``` - -- transition - - transition-property - - transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. - - ```html - .target { - transition-property: background-color; - transition-duration: 1s; - background-color: #ccc; - } - - .target:hover, - .target:focus { - background-color: #eee; - } - ``` - - - transition-duration - - transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • - - - transition-timingfunction - - transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. - - - transition-delay - - animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • - - - transition-behavior - - display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. - - - - - ์‹ค์Šต - ```html - - - - - - Document - - - -
-
-
- - - ``` - -- animation ๐Ÿ  - - - animation-name - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ - - - animation-duration - - ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • - - - animation-delay - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • - - - animation-direction - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • - - - animation-iteration-count - - ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • - - - animation-play-state - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ - - - animation-timing-function - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • - - - animation-fill-mode - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • - - - @keyframes - - ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • - - - ์ถ•์•ฝํ˜• - - ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ - - - ์‹ค์Šต - ```html - - - - - - Document - - - -
- - - ``` \ No newline at end of file From 7a4536b8d4cf5d994b4e3b910330959297734104 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:34:40 +0900 Subject: [PATCH 08/20] =?UTF-8?q?keyword:=201=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=ED=82=A4=EC=9B=8C=EB=93=9C=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission/chapter01/mimssion.html | 44 +++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 mission/chapter01/mimssion.html diff --git a/mission/chapter01/mimssion.html b/mission/chapter01/mimssion.html new file mode 100644 index 0000000..e2dcba4 --- /dev/null +++ b/mission/chapter01/mimssion.html @@ -0,0 +1,44 @@ + + + + + + Document + + + + +
+
+

UMC Study Plan

+
+ +
+ + +
+ +
+

ํ•ด์•ผ ํ•  ์ผ

+ +
+ +
+
+ +
+

ํ•ด๋‚ธ ์ผ

+ +
+ +
+
+ +
+
+ +
+ + + + \ No newline at end of file From 715ce5e163dc34e8e60f75c227ae87e83de62216 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:34:48 +0900 Subject: [PATCH 09/20] =?UTF-8?q?mission:=201=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- keyword/chapter01/js.md | 295 ++++++++++++++++++++++++++++++++++++ mission/chapter01/script.js | 39 +++++ mission/chapter01/style.css | 79 ++++++++++ 3 files changed, 413 insertions(+) create mode 100644 keyword/chapter01/js.md create mode 100644 mission/chapter01/script.js create mode 100644 mission/chapter01/style.css diff --git a/keyword/chapter01/js.md b/keyword/chapter01/js.md new file mode 100644 index 0000000..31c154c --- /dev/null +++ b/keyword/chapter01/js.md @@ -0,0 +1,295 @@ +- JS์—์„œ ์‚ฌ์น™์—ฐ์‚ฐ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. + - ๋”ํ•˜๊ธฐ + + ```jsx + console.log(2+3); + ``` + + - ๋นผ๊ธฐ + + ```jsx + console.log(2-3); + ``` + + - ๊ณฑํ•˜๊ธฐ + + ```jsx + console.log(2*3); + ``` + + - ๋‚˜๋ˆ„๊ธฐ + + ```jsx + console.log(2/3); + ``` + + - ๋‚˜๋จธ์ง€ ๊ตฌํ•˜๊ธฐ + + ```jsx + console.log(2%3); + ``` + + - ๊ฑฐ๋“ญ ์ œ๊ณฑ + + ```jsx + console.log(2**3); + console.log(Math.pow(2,3)); + ``` + +- JS์—์„œ ๋น„๊ต ์—ฐ์‚ฐ์„ ํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์กฐ์‚ฌํ•˜์—ฌ ์ •๋ฆฌํ•ด์ฃผ์„ธ์š”. + + ```jsx + a == b //์ผ์น˜ ์—ฐ์‚ฐ์ž + a != b //๋ถˆ์ผ์น˜ + a <= b //ํฌ๊ธฐ ๋น„๊ต + a === b //strict ์ผ์น˜ ์—ฐ์‚ฐ์ž (ํƒ€์ž…๋„ ๋น„๊ต) + a !== b //strict ๋ถˆ์ผ์น˜ + ``` + +- JS์—์„œ ์ฆ๊ฐ€/๊ฐ์†Œ ์—ฐ์‚ฐ์„ ํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์กฐ์‚ฌํ•˜์—ฌ ์ •๋ฆฌํ•ด์ฃผ์„ธ์š”. + + ```jsx + a++; + //์ฆ๊ฐ€ ์ „ ๊ฐ’ return + ++a; + //์ฆ๊ฐ€ ํ›„ ๊ฐ’ return + a--; + --a; + a +=1; // equal a = a + 1; + ``` + +- ์—ฐ์‚ฐ์ž ์šฐ์„ ์ˆœ์œ„์— ๋Œ€ํ•ด ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. + 1. ์‰ผํ‘œ/์‹œํ€ธ์Šค + 2. yield, ํ• ๋‹น ( +=, -= โ€ฆ.) + - yield - generator ํ•จ์ˆ˜๋ฅผ ์ค‘์ง€ํ•˜๊ฑฐ๋‚˜ ์žฌ๊ฐœ ์‹œ ์‚ฌ์šฉ + 3. ์‚ผํ•ญ์—ฐ์‚ฐ์ž + 4. ๋…ผ๋ฆฌ์—ฐ์‚ฐ์ž + 5. ๋น„๊ต์—ฐ์‚ฐ์ž + 6. ๋น„ํŠธ์—ฐ์‚ฐ์ž + 7. ์‚ฌ์น™์—ฐ์‚ฐ + 8. ์ „์œ„์ฆ๊ฐ€, ๋…ผ๋ฆฌ/๋น„ํŠธ NOT + 9. ํ›„์œ„์ฆ๊ฐ€ + 10. ๊ทธ ์™ธโ€ฆ + + +### string + + + +### bigint + + + +### Array + +- sort + - ๋ฌธ์ž์—ด์„ ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ๋‚˜์—ด. ์ˆซ์ž๋ฅผ sort ์‹œ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ ํ›„ sortํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฃผ์˜ ์š”ํ•จ + + ```jsx + const months = ['March', 'Jan', 'Feb', 'Dec']; + months.sort(); + console.log(months); + // Expected output: Array ["Dec", "Feb", "Jan", "March"] + ``` + +- join + - ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ง€์ •๋œ ๊ตฌ๋ถ„ ๋ฌธ์ž์—ด๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ์ƒˆ ๋ฌธ์ž์—ด return + + ```jsx + const elements = ['Fire', 'Air', 'Water']; + + console.log(elements.join()); + // Expected output: "Fire,Air,Water" + + console.log(elements.join('')); + // Expected output: "FireAirWater" + + console.log(elements.join('-')); + // Expected output: "Fire-Air-Water" + + ``` + +- reverse + - ๋ฐฐ์—ด์˜ ์ˆœ์„œ๋ฅผ ๋ฐ˜์ „ + + ```jsx + const array1 = ['one', 'two', 'three']; + console.log('array1:', array1); + // Expected output: "array1:" Array ["one", "two", "three"] + + const reversed = array1.reverse(); + console.log('reversed:', reversed); + // Expected output: "reversed:" Array ["three", "two", "one"] + ``` + +- splice + - ๊ธฐ์กด ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ๊ต์ฒด, ์ถ”๊ฐ€ + + ```jsx + const months = ['Jan', 'March', 'April', 'June']; + months.splice(1, 0, 'Feb'); + // Inserts at index 1 + console.log(months); + // Expected output: Array ["Jan", "Feb", "March", "April", "June"] + + months.splice(4, 1, 'May'); + // Replaces 1 element at index 4 + console.log(months); + // Expected output: Array ["Jan", "Feb", "March", "April", "May"] + ``` + +- slice + - begin๋ถ€ํ„ฐ end - 1๊นŒ์ง€ shallow copy๋ฅผ returnํ•œ๋‹ค + + ```jsx + const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; + + console.log(animals.slice(2)); + // Expected output: Array ["camel", "duck", "elephant"] + + console.log(animals.slice(2, 4)); + // Expected output: Array ["camel", "duck"] + ``` + +- find + - ์ œ๊ณต๋œ ๋ฐฐ์—ด์—์„œ ํ…Œ์ŠคํŠธ ํ•จ์ˆ˜์˜ return์ด true์ธ ์ฒซ๋ฒˆ์งธ ์š”์†Œ๋ฅผ return + + ```jsx + const array1 = [5, 12, 8, 130, 44]; + + const found = array1.find((element) => element > 10); + + console.log(found); + // Expected output: 12 + + ``` + +- filter + - ์ฃผ์–ด์ง„ ๋ฐฐ์—ด์˜ shallow copy๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ•จ์ˆ˜์˜ true ๊ฐ’๋“ค๋กœ๋งŒ ํ•„ํ„ฐ๋ง + + ```jsx + const words = ['spray', 'elite', 'exuberant', 'destruction', 'present']; + + const result = words.filter((word) => word.length > 6); + + console.log(result); + // Expected output: Array ["exuberant", "destruction", "present"] + + ``` + +- map + - ๋ฐฐ์—ด ๋‚ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœํ•œ ๊ฒฐ๊ณผ๋ฅผ return + + ```jsx + const array1 = [1, 4, 9, 16]; + + // Pass a function to map + const map1 = array1.map((x) => x * 2); + + console.log(map1); + // Expected output: Array [2, 8, 18, 32] + + ``` + +- reduce + - ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด reducer ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๊ณ , ๊ฒฐ๊ณผ๊ฐ’ return + + ```jsx + const array1 = [1, 2, 3, 4]; + + // 0 + 1 + 2 + 3 + 4 + const initialValue = 0; + const sumWithInitial = array1.reduce( + (accumulator, currentValue) => accumulator + currentValue, + initialValue, + ); + + console.log(sumWithInitial); + // Expected output: 10 + + ``` + +- some + - ๋ฐฐ์—ด ์•ˆ์˜ ์–ด๋–ค ์š”์†Œ๋ผ๋„ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ์ ์–ด๋„ ํ•˜๋‚˜๋ผ๋„ ํ†ต๊ณผํ•˜๋Š”์ง€ ํ™•์ธ. ํ†ต๊ณผํ•˜๋ฉด true ๋ฐ˜ํ™˜ + + ```jsx + const array = [1, 2, 3, 4, 5]; + + // Checks whether an element is even + const even = (element) => element % 2 === 0; + + console.log(array.some(even)); + // Expected output: true + + ``` + +- every + - ๋ฐฐ์—ด ์•ˆ์˜ ๋ชจ๋“  ์š”์†Œ๊ฐ€ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ํ†ต๊ณผํ•˜๋Š”์ง€ ํ™•์ธ. ๋ชจ๋‘ ํ†ต๊ณผํ•˜๋ฉด true ๋ฐ˜ํ™˜ + + ```jsx + const isBelowThreshold = (currentValue) => currentValue < 40; + + const array1 = [1, 30, 39, 29, 10, 13]; + + console.log(array1.every(isBelowThreshold)); + // Expected output: true + + ``` + +- forEach + - ๋ฐฐ์—ด ์š”์†Œ์— ๋Œ€ํ•ด ์ œ๊ณต๋œ ํ•จ์ˆ˜๋ฅผ ํ•œ๋ฒˆ์”ฉ ์‹คํ–‰ + + ```jsx + const array1 = ['a', 'b', 'c']; + + array1.forEach((element) => console.log(element)); + + // Expected output: "a" + // Expected output: "b" + // Expected output: "c" + + ``` + +### Dom ์กฐ์ž‘ + +- ํƒœ๊ทธ ๊ฐ€์ ธ์˜ค๊ธฐ + - getElementById(โ€id๋ช…โ€) + - getElementByClassName(โ€class๋ช…โ€) + - getElementByTagName(โ€ํƒœ๊ทธ๋ช…โ€) + - querySelector(์„ ํƒ์ž), querySelectorAll(์„ ํƒ์ž or ํƒœ๊ทธ) +- ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์ถ”๊ฐ€ํ•˜๊ธฐ + - element.addEventListener(type, listener, options); +- ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์ œ๊ฑฐํ•˜๊ธฐ + - element.removeEventListener(type, listener, options); +- ํ‚ค๋ณด๋“œ์™€ ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ + - ํ‚ค๋ณด๋“œ + - addEventListener(โ€keydownโ€, (event) โ‡’ {}); + - ๋งˆ์šฐ์Šค + - addEventListner(โ€clickโ€,(event) โ‡’ {}); +- ํƒœ๊ทธ ์†์„ฑ ๋‹ค๋ฃจ๊ธฐ + - ์†์„ฑ ์ ‘๊ทผ + - element.getAttribute(โ€์†์„ฑโ€); + - ์†์„ฑ ์ถ”๊ฐ€ + - element.getAttribute(โ€์†์„ฑโ€,โ€๊ฐ’โ€); + - ์†์„ฑ ์‚ญ์ œ + - element.removeAttribute(โ€์†์„ฑโ€); +- ๋ถ€๋ชจ์™€ ์ž์‹ ํƒœ๊ทธ ์ฐพ๊ธฐ + - ๋ถ€๋ชจ ๋…ธ๋“œ ํƒ์ƒ‰ + - element.parentNode; + - ์ž์‹ ๋…ธ๋“œ ํƒ์ƒ‰ + - element.childNodes; + - element.firstChild; + - element.lastChild; +- ์ƒˆ๋กœ์šด ํƒœ๊ทธ ๋งŒ๋“ค๊ธฐ + - element.createElement(โ€ํƒœ๊ทธโ€); + - element.appendChild(element); +- ํƒœ๊ทธ ๋ณต์ œํ•˜๊ธฐ + - element.cloneNode(deep); + - deep(optional) + - ํ•˜์œ„ ๋ณต์ œ ์—ฌ๋ถ€ \ No newline at end of file diff --git a/mission/chapter01/script.js b/mission/chapter01/script.js new file mode 100644 index 0000000..295353b --- /dev/null +++ b/mission/chapter01/script.js @@ -0,0 +1,39 @@ +const input = document.querySelector(".input"); +const todolist = document.querySelector(".content-list-container"); +const donelist = document.querySelector(".done-list-container"); + +function handleEnterKey(e) { + if (e.key === "Enter" && e.target.value.trim()) { + appendTodoItem(e.target.value.trim()); + e.target.value = ""; + } +} + +function createItem(text, buttonText, clickHandler) { + const container = document.createElement("div"); + container.className = "content-box"; + container.innerHTML = ` +

${text}

+ + `; + container.querySelector("button").addEventListener("click", clickHandler); + return container; +} + +function appendTodoItem(text) { + const todoItem = createItem(text, "์™„๋ฃŒ", () => moveToDone(todoItem, text)); + todolist.appendChild(todoItem); +} + +function appendDoneItem(text) { + const doneItem = createItem(text, "์‚ญ์ œ", (e) => e.target.parentElement.remove()); + donelist.appendChild(doneItem); +} + +function moveToDone(todoItem, text) { + appendDoneItem(text); + todoItem.remove(); +} + +// Event listeners +input.addEventListener("keypress", handleEnterKey); diff --git a/mission/chapter01/style.css b/mission/chapter01/style.css new file mode 100644 index 0000000..84bfb48 --- /dev/null +++ b/mission/chapter01/style.css @@ -0,0 +1,79 @@ +:root{ + --primary-color: #A9BCF5; +} + +body{ + background-color: rgb(210, 247, 247); + margin:0; +} + +.container{ + margin:0 5rem; +} + +.title-container{ + display: flex; + justify-content: center; + align-items: center; + padding: 4rem 0; + border-bottom: 1px solid gray; + width:100%; +} + +.study-dashboard-container{ + padding: 0 4rem; + display: flex; + justify-content: space-between; + align-items: stretch; + flex-direction: column; +} + + +.input{ + height:32px; + margin: 1rem 4rem; +} + +input:focus { + outline:3px solid var(--primary-color); +} + +.list-container{ + display: flex; + justify-content: center; +} + +.todo-title{ + border-bottom: 1px solid var(--primary-color); + padding-bottom: .5rem; +} + +.todo-container{ + flex:1; + margin: 0 1rem; + display: flex; + flex-direction: column; + align-items: center; + +} + +.content-list-container{ + display:flex; + flex-direction: column; + align-items: stretch; + width:100%; +} + +.content-box{ + display:flex; + justify-content:space-between; + border-bottom: 1px solid var(--primary-color); + margin: .5rem 4rem; +} + +.content-button{ + background-color: var(--primary-color); + margin: .5rem 1rem; + border: none; + padding: .5rem 1rem; +} \ No newline at end of file From e60160b97c15e6869d3b91b91dd84f98dec5218d Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:40:17 +0900 Subject: [PATCH 10/20] =?UTF-8?q?Revert=20"=ED=8C=8C=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 276ebc3460dab4627d6342e3b2a59f6f5dc00981. --- keyword/chapter00/keyword0-1.md | 0 keyword/chapter00/keyword0-2.md | 392 ++++++++++++++++++++++++++++++++ 2 files changed, 392 insertions(+) create mode 100644 keyword/chapter00/keyword0-1.md create mode 100644 keyword/chapter00/keyword0-2.md diff --git a/keyword/chapter00/keyword0-1.md b/keyword/chapter00/keyword0-1.md new file mode 100644 index 0000000..e69de29 diff --git a/keyword/chapter00/keyword0-2.md b/keyword/chapter00/keyword0-2.md new file mode 100644 index 0000000..13fa14c --- /dev/null +++ b/keyword/chapter00/keyword0-2.md @@ -0,0 +1,392 @@ +- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  + + border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. + +- relative / absolute ๐Ÿ  + +```html + + + + + + + Document + + + + +
BOX
+

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

+ + + +``` + +- ์ •๋ ฌ์˜ ์ง„์ˆ˜ + - text-align + + ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • + + - margin + + ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • + + - flex + + ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ + + - translate + + ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ + + - grid + + ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ + +- ๋ฐ˜์‘ํ˜• background + - background-image + + ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • + + - background-repeat + + ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. + + - background-position + + background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • + + - background-size + + background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ + + - ์ถ•์•ฝํ˜• + + ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • + + - example + + ```html + background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); + ``` + +- transform ๐Ÿ  + + - translate + + ```html + + + + + + + Document + + + + +
BOX
+ + + + ``` + + - scale + + ```html + + + + + + Document + + + +
Normal
+
Scaled
+ + + ``` + + - rotate + + ```html + + + + + + Document + + + +
Normal
+
Rotated
+ + + + ``` + + - skew + + ```html + + + + + + Document + + + +
Normal
+
Skewed
+ + + ``` + + - matrix + + ```html + + + + + + Document + + + +
Normal
+
Changed
+ + + + ``` + +- transition + - transition-property + + transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. + + ```html + .target { + transition-property: background-color; + transition-duration: 1s; + background-color: #ccc; + } + + .target:hover, + .target:focus { + background-color: #eee; + } + ``` + + - transition-duration + + transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • + + - transition-timingfunction + + transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. + + - transition-delay + + animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • + + - transition-behavior + + display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. + + + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+
+
+ + + ``` + +- animation ๐Ÿ  + + - animation-name + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ + + - animation-duration + + ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • + + - animation-delay + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • + + - animation-direction + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • + + - animation-iteration-count + + ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • + + - animation-play-state + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ + + - animation-timing-function + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • + + - animation-fill-mode + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • + + - @keyframes + + ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • + + - ์ถ•์•ฝํ˜• + + ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+ + + ``` \ No newline at end of file From c9ae540b10c700b4c24a0792fc9931ebf73822cf Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:40:34 +0900 Subject: [PATCH 11/20] =?UTF-8?q?Revert=20"Revert=20"=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95""?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit e60160b97c15e6869d3b91b91dd84f98dec5218d. --- keyword/chapter00/keyword0-1.md | 0 keyword/chapter00/keyword0-2.md | 392 -------------------------------- 2 files changed, 392 deletions(-) delete mode 100644 keyword/chapter00/keyword0-1.md delete mode 100644 keyword/chapter00/keyword0-2.md diff --git a/keyword/chapter00/keyword0-1.md b/keyword/chapter00/keyword0-1.md deleted file mode 100644 index e69de29..0000000 diff --git a/keyword/chapter00/keyword0-2.md b/keyword/chapter00/keyword0-2.md deleted file mode 100644 index 13fa14c..0000000 --- a/keyword/chapter00/keyword0-2.md +++ /dev/null @@ -1,392 +0,0 @@ -- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  - - border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. - -- relative / absolute ๐Ÿ  - -```html - - - - - - - Document - - - - -
BOX
-

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

- - - -``` - -- ์ •๋ ฌ์˜ ์ง„์ˆ˜ - - text-align - - ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • - - - margin - - ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • - - - flex - - ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ - - - translate - - ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ - - - grid - - ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ - -- ๋ฐ˜์‘ํ˜• background - - background-image - - ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • - - - background-repeat - - ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. - - - background-position - - background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • - - - background-size - - background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ - - - ์ถ•์•ฝํ˜• - - ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • - - - example - - ```html - background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); - ``` - -- transform ๐Ÿ  - - - translate - - ```html - - - - - - - Document - - - - -
BOX
- - - - ``` - - - scale - - ```html - - - - - - Document - - - -
Normal
-
Scaled
- - - ``` - - - rotate - - ```html - - - - - - Document - - - -
Normal
-
Rotated
- - - - ``` - - - skew - - ```html - - - - - - Document - - - -
Normal
-
Skewed
- - - ``` - - - matrix - - ```html - - - - - - Document - - - -
Normal
-
Changed
- - - - ``` - -- transition - - transition-property - - transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. - - ```html - .target { - transition-property: background-color; - transition-duration: 1s; - background-color: #ccc; - } - - .target:hover, - .target:focus { - background-color: #eee; - } - ``` - - - transition-duration - - transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • - - - transition-timingfunction - - transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. - - - transition-delay - - animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • - - - transition-behavior - - display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. - - - - - ์‹ค์Šต - ```html - - - - - - Document - - - -
-
-
- - - ``` - -- animation ๐Ÿ  - - - animation-name - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ - - - animation-duration - - ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • - - - animation-delay - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • - - - animation-direction - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • - - - animation-iteration-count - - ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • - - - animation-play-state - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ - - - animation-timing-function - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • - - - animation-fill-mode - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • - - - @keyframes - - ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • - - - ์ถ•์•ฝํ˜• - - ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ - - - ์‹ค์Šต - ```html - - - - - - Document - - - -
- - - ``` \ No newline at end of file From 88fabe1b97dd8af88fdba60f85a5636aaf8a40a9 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:41:20 +0900 Subject: [PATCH 12/20] =?UTF-8?q?Revert=20"=ED=8C=8C=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 276ebc3460dab4627d6342e3b2a59f6f5dc00981. --- keyword/chapter00/keyword0-1.md | 0 keyword/chapter00/keyword0-2.md | 392 ++++++++++++++++++++++++++++++++ 2 files changed, 392 insertions(+) create mode 100644 keyword/chapter00/keyword0-1.md create mode 100644 keyword/chapter00/keyword0-2.md diff --git a/keyword/chapter00/keyword0-1.md b/keyword/chapter00/keyword0-1.md new file mode 100644 index 0000000..e69de29 diff --git a/keyword/chapter00/keyword0-2.md b/keyword/chapter00/keyword0-2.md new file mode 100644 index 0000000..13fa14c --- /dev/null +++ b/keyword/chapter00/keyword0-2.md @@ -0,0 +1,392 @@ +- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  + + border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. + +- relative / absolute ๐Ÿ  + +```html + + + + + + + Document + + + + +
BOX
+

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

+ + + +``` + +- ์ •๋ ฌ์˜ ์ง„์ˆ˜ + - text-align + + ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • + + - margin + + ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • + + - flex + + ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ + + - translate + + ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ + + - grid + + ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ + +- ๋ฐ˜์‘ํ˜• background + - background-image + + ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • + + - background-repeat + + ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. + + - background-position + + background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • + + - background-size + + background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ + + - ์ถ•์•ฝํ˜• + + ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • + + - example + + ```html + background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); + ``` + +- transform ๐Ÿ  + + - translate + + ```html + + + + + + + Document + + + + +
BOX
+ + + + ``` + + - scale + + ```html + + + + + + Document + + + +
Normal
+
Scaled
+ + + ``` + + - rotate + + ```html + + + + + + Document + + + +
Normal
+
Rotated
+ + + + ``` + + - skew + + ```html + + + + + + Document + + + +
Normal
+
Skewed
+ + + ``` + + - matrix + + ```html + + + + + + Document + + + +
Normal
+
Changed
+ + + + ``` + +- transition + - transition-property + + transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. + + ```html + .target { + transition-property: background-color; + transition-duration: 1s; + background-color: #ccc; + } + + .target:hover, + .target:focus { + background-color: #eee; + } + ``` + + - transition-duration + + transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • + + - transition-timingfunction + + transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. + + - transition-delay + + animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • + + - transition-behavior + + display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. + + + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+
+
+ + + ``` + +- animation ๐Ÿ  + + - animation-name + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ + + - animation-duration + + ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • + + - animation-delay + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • + + - animation-direction + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • + + - animation-iteration-count + + ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • + + - animation-play-state + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ + + - animation-timing-function + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • + + - animation-fill-mode + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • + + - @keyframes + + ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • + + - ์ถ•์•ฝํ˜• + + ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+ + + ``` \ No newline at end of file From 6186381ecab5e72857a5699d53ffe7ed98ccf1ef Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:42:15 +0900 Subject: [PATCH 13/20] =?UTF-8?q?Revert=20"Revert=20"=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95""?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 88fabe1b97dd8af88fdba60f85a5636aaf8a40a9. --- keyword/chapter00/keyword0-1.md | 0 keyword/chapter00/keyword0-2.md | 392 -------------------------------- 2 files changed, 392 deletions(-) delete mode 100644 keyword/chapter00/keyword0-1.md delete mode 100644 keyword/chapter00/keyword0-2.md diff --git a/keyword/chapter00/keyword0-1.md b/keyword/chapter00/keyword0-1.md deleted file mode 100644 index e69de29..0000000 diff --git a/keyword/chapter00/keyword0-2.md b/keyword/chapter00/keyword0-2.md deleted file mode 100644 index 13fa14c..0000000 --- a/keyword/chapter00/keyword0-2.md +++ /dev/null @@ -1,392 +0,0 @@ -- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  - - border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. - -- relative / absolute ๐Ÿ  - -```html - - - - - - - Document - - - - -
BOX
-

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

- - - -``` - -- ์ •๋ ฌ์˜ ์ง„์ˆ˜ - - text-align - - ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • - - - margin - - ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • - - - flex - - ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ - - - translate - - ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ - - - grid - - ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ - -- ๋ฐ˜์‘ํ˜• background - - background-image - - ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • - - - background-repeat - - ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. - - - background-position - - background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • - - - background-size - - background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ - - - ์ถ•์•ฝํ˜• - - ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • - - - example - - ```html - background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); - ``` - -- transform ๐Ÿ  - - - translate - - ```html - - - - - - - Document - - - - -
BOX
- - - - ``` - - - scale - - ```html - - - - - - Document - - - -
Normal
-
Scaled
- - - ``` - - - rotate - - ```html - - - - - - Document - - - -
Normal
-
Rotated
- - - - ``` - - - skew - - ```html - - - - - - Document - - - -
Normal
-
Skewed
- - - ``` - - - matrix - - ```html - - - - - - Document - - - -
Normal
-
Changed
- - - - ``` - -- transition - - transition-property - - transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. - - ```html - .target { - transition-property: background-color; - transition-duration: 1s; - background-color: #ccc; - } - - .target:hover, - .target:focus { - background-color: #eee; - } - ``` - - - transition-duration - - transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • - - - transition-timingfunction - - transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. - - - transition-delay - - animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • - - - transition-behavior - - display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. - - - - - ์‹ค์Šต - ```html - - - - - - Document - - - -
-
-
- - - ``` - -- animation ๐Ÿ  - - - animation-name - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ - - - animation-duration - - ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • - - - animation-delay - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • - - - animation-direction - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • - - - animation-iteration-count - - ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • - - - animation-play-state - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ - - - animation-timing-function - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • - - - animation-fill-mode - - ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • - - - @keyframes - - ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • - - - ์ถ•์•ฝํ˜• - - ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ - - - ์‹ค์Šต - ```html - - - - - - Document - - - -
- - - ``` \ No newline at end of file From be65c2b072d501623a26e0bf174584ebc806a9c9 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:42:34 +0900 Subject: [PATCH 14/20] =?UTF-8?q?Revert=20"Revert=20"Revert=20"=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95"""?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit c9ae540b10c700b4c24a0792fc9931ebf73822cf. --- keyword/chapter00/keyword0-1.md | 0 keyword/chapter00/keyword0-2.md | 392 ++++++++++++++++++++++++++++++++ keyword/chapter01/js.md | 295 ++++++++++++++++++++++++ mission/chapter01/mimssion.html | 44 ++++ mission/chapter01/script.js | 39 ++++ mission/chapter01/style.css | 79 +++++++ 6 files changed, 849 insertions(+) create mode 100644 keyword/chapter00/keyword0-1.md create mode 100644 keyword/chapter00/keyword0-2.md create mode 100644 keyword/chapter01/js.md create mode 100644 mission/chapter01/mimssion.html create mode 100644 mission/chapter01/script.js create mode 100644 mission/chapter01/style.css diff --git a/keyword/chapter00/keyword0-1.md b/keyword/chapter00/keyword0-1.md new file mode 100644 index 0000000..e69de29 diff --git a/keyword/chapter00/keyword0-2.md b/keyword/chapter00/keyword0-2.md new file mode 100644 index 0000000..13fa14c --- /dev/null +++ b/keyword/chapter00/keyword0-2.md @@ -0,0 +1,392 @@ +- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  + + border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. + +- relative / absolute ๐Ÿ  + +```html + + + + + + + Document + + + + +
BOX
+

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

+ + + +``` + +- ์ •๋ ฌ์˜ ์ง„์ˆ˜ + - text-align + + ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • + + - margin + + ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • + + - flex + + ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ + + - translate + + ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ + + - grid + + ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ + +- ๋ฐ˜์‘ํ˜• background + - background-image + + ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • + + - background-repeat + + ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. + + - background-position + + background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • + + - background-size + + background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ + + - ์ถ•์•ฝํ˜• + + ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • + + - example + + ```html + background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); + ``` + +- transform ๐Ÿ  + + - translate + + ```html + + + + + + + Document + + + + +
BOX
+ + + + ``` + + - scale + + ```html + + + + + + Document + + + +
Normal
+
Scaled
+ + + ``` + + - rotate + + ```html + + + + + + Document + + + +
Normal
+
Rotated
+ + + + ``` + + - skew + + ```html + + + + + + Document + + + +
Normal
+
Skewed
+ + + ``` + + - matrix + + ```html + + + + + + Document + + + +
Normal
+
Changed
+ + + + ``` + +- transition + - transition-property + + transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. + + ```html + .target { + transition-property: background-color; + transition-duration: 1s; + background-color: #ccc; + } + + .target:hover, + .target:focus { + background-color: #eee; + } + ``` + + - transition-duration + + transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • + + - transition-timingfunction + + transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. + + - transition-delay + + animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • + + - transition-behavior + + display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. + + + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+
+
+ + + ``` + +- animation ๐Ÿ  + + - animation-name + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ + + - animation-duration + + ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • + + - animation-delay + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • + + - animation-direction + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • + + - animation-iteration-count + + ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • + + - animation-play-state + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ + + - animation-timing-function + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • + + - animation-fill-mode + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • + + - @keyframes + + ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • + + - ์ถ•์•ฝํ˜• + + ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+ + + ``` \ No newline at end of file diff --git a/keyword/chapter01/js.md b/keyword/chapter01/js.md new file mode 100644 index 0000000..31c154c --- /dev/null +++ b/keyword/chapter01/js.md @@ -0,0 +1,295 @@ +- JS์—์„œ ์‚ฌ์น™์—ฐ์‚ฐ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. + - ๋”ํ•˜๊ธฐ + + ```jsx + console.log(2+3); + ``` + + - ๋นผ๊ธฐ + + ```jsx + console.log(2-3); + ``` + + - ๊ณฑํ•˜๊ธฐ + + ```jsx + console.log(2*3); + ``` + + - ๋‚˜๋ˆ„๊ธฐ + + ```jsx + console.log(2/3); + ``` + + - ๋‚˜๋จธ์ง€ ๊ตฌํ•˜๊ธฐ + + ```jsx + console.log(2%3); + ``` + + - ๊ฑฐ๋“ญ ์ œ๊ณฑ + + ```jsx + console.log(2**3); + console.log(Math.pow(2,3)); + ``` + +- JS์—์„œ ๋น„๊ต ์—ฐ์‚ฐ์„ ํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์กฐ์‚ฌํ•˜์—ฌ ์ •๋ฆฌํ•ด์ฃผ์„ธ์š”. + + ```jsx + a == b //์ผ์น˜ ์—ฐ์‚ฐ์ž + a != b //๋ถˆ์ผ์น˜ + a <= b //ํฌ๊ธฐ ๋น„๊ต + a === b //strict ์ผ์น˜ ์—ฐ์‚ฐ์ž (ํƒ€์ž…๋„ ๋น„๊ต) + a !== b //strict ๋ถˆ์ผ์น˜ + ``` + +- JS์—์„œ ์ฆ๊ฐ€/๊ฐ์†Œ ์—ฐ์‚ฐ์„ ํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์กฐ์‚ฌํ•˜์—ฌ ์ •๋ฆฌํ•ด์ฃผ์„ธ์š”. + + ```jsx + a++; + //์ฆ๊ฐ€ ์ „ ๊ฐ’ return + ++a; + //์ฆ๊ฐ€ ํ›„ ๊ฐ’ return + a--; + --a; + a +=1; // equal a = a + 1; + ``` + +- ์—ฐ์‚ฐ์ž ์šฐ์„ ์ˆœ์œ„์— ๋Œ€ํ•ด ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. + 1. ์‰ผํ‘œ/์‹œํ€ธ์Šค + 2. yield, ํ• ๋‹น ( +=, -= โ€ฆ.) + - yield - generator ํ•จ์ˆ˜๋ฅผ ์ค‘์ง€ํ•˜๊ฑฐ๋‚˜ ์žฌ๊ฐœ ์‹œ ์‚ฌ์šฉ + 3. ์‚ผํ•ญ์—ฐ์‚ฐ์ž + 4. ๋…ผ๋ฆฌ์—ฐ์‚ฐ์ž + 5. ๋น„๊ต์—ฐ์‚ฐ์ž + 6. ๋น„ํŠธ์—ฐ์‚ฐ์ž + 7. ์‚ฌ์น™์—ฐ์‚ฐ + 8. ์ „์œ„์ฆ๊ฐ€, ๋…ผ๋ฆฌ/๋น„ํŠธ NOT + 9. ํ›„์œ„์ฆ๊ฐ€ + 10. ๊ทธ ์™ธโ€ฆ + + +### string + + + +### bigint + + + +### Array + +- sort + - ๋ฌธ์ž์—ด์„ ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ๋‚˜์—ด. ์ˆซ์ž๋ฅผ sort ์‹œ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ ํ›„ sortํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฃผ์˜ ์š”ํ•จ + + ```jsx + const months = ['March', 'Jan', 'Feb', 'Dec']; + months.sort(); + console.log(months); + // Expected output: Array ["Dec", "Feb", "Jan", "March"] + ``` + +- join + - ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ง€์ •๋œ ๊ตฌ๋ถ„ ๋ฌธ์ž์—ด๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ์ƒˆ ๋ฌธ์ž์—ด return + + ```jsx + const elements = ['Fire', 'Air', 'Water']; + + console.log(elements.join()); + // Expected output: "Fire,Air,Water" + + console.log(elements.join('')); + // Expected output: "FireAirWater" + + console.log(elements.join('-')); + // Expected output: "Fire-Air-Water" + + ``` + +- reverse + - ๋ฐฐ์—ด์˜ ์ˆœ์„œ๋ฅผ ๋ฐ˜์ „ + + ```jsx + const array1 = ['one', 'two', 'three']; + console.log('array1:', array1); + // Expected output: "array1:" Array ["one", "two", "three"] + + const reversed = array1.reverse(); + console.log('reversed:', reversed); + // Expected output: "reversed:" Array ["three", "two", "one"] + ``` + +- splice + - ๊ธฐ์กด ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ๊ต์ฒด, ์ถ”๊ฐ€ + + ```jsx + const months = ['Jan', 'March', 'April', 'June']; + months.splice(1, 0, 'Feb'); + // Inserts at index 1 + console.log(months); + // Expected output: Array ["Jan", "Feb", "March", "April", "June"] + + months.splice(4, 1, 'May'); + // Replaces 1 element at index 4 + console.log(months); + // Expected output: Array ["Jan", "Feb", "March", "April", "May"] + ``` + +- slice + - begin๋ถ€ํ„ฐ end - 1๊นŒ์ง€ shallow copy๋ฅผ returnํ•œ๋‹ค + + ```jsx + const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; + + console.log(animals.slice(2)); + // Expected output: Array ["camel", "duck", "elephant"] + + console.log(animals.slice(2, 4)); + // Expected output: Array ["camel", "duck"] + ``` + +- find + - ์ œ๊ณต๋œ ๋ฐฐ์—ด์—์„œ ํ…Œ์ŠคํŠธ ํ•จ์ˆ˜์˜ return์ด true์ธ ์ฒซ๋ฒˆ์งธ ์š”์†Œ๋ฅผ return + + ```jsx + const array1 = [5, 12, 8, 130, 44]; + + const found = array1.find((element) => element > 10); + + console.log(found); + // Expected output: 12 + + ``` + +- filter + - ์ฃผ์–ด์ง„ ๋ฐฐ์—ด์˜ shallow copy๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ•จ์ˆ˜์˜ true ๊ฐ’๋“ค๋กœ๋งŒ ํ•„ํ„ฐ๋ง + + ```jsx + const words = ['spray', 'elite', 'exuberant', 'destruction', 'present']; + + const result = words.filter((word) => word.length > 6); + + console.log(result); + // Expected output: Array ["exuberant", "destruction", "present"] + + ``` + +- map + - ๋ฐฐ์—ด ๋‚ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœํ•œ ๊ฒฐ๊ณผ๋ฅผ return + + ```jsx + const array1 = [1, 4, 9, 16]; + + // Pass a function to map + const map1 = array1.map((x) => x * 2); + + console.log(map1); + // Expected output: Array [2, 8, 18, 32] + + ``` + +- reduce + - ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด reducer ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๊ณ , ๊ฒฐ๊ณผ๊ฐ’ return + + ```jsx + const array1 = [1, 2, 3, 4]; + + // 0 + 1 + 2 + 3 + 4 + const initialValue = 0; + const sumWithInitial = array1.reduce( + (accumulator, currentValue) => accumulator + currentValue, + initialValue, + ); + + console.log(sumWithInitial); + // Expected output: 10 + + ``` + +- some + - ๋ฐฐ์—ด ์•ˆ์˜ ์–ด๋–ค ์š”์†Œ๋ผ๋„ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ์ ์–ด๋„ ํ•˜๋‚˜๋ผ๋„ ํ†ต๊ณผํ•˜๋Š”์ง€ ํ™•์ธ. ํ†ต๊ณผํ•˜๋ฉด true ๋ฐ˜ํ™˜ + + ```jsx + const array = [1, 2, 3, 4, 5]; + + // Checks whether an element is even + const even = (element) => element % 2 === 0; + + console.log(array.some(even)); + // Expected output: true + + ``` + +- every + - ๋ฐฐ์—ด ์•ˆ์˜ ๋ชจ๋“  ์š”์†Œ๊ฐ€ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ํ†ต๊ณผํ•˜๋Š”์ง€ ํ™•์ธ. ๋ชจ๋‘ ํ†ต๊ณผํ•˜๋ฉด true ๋ฐ˜ํ™˜ + + ```jsx + const isBelowThreshold = (currentValue) => currentValue < 40; + + const array1 = [1, 30, 39, 29, 10, 13]; + + console.log(array1.every(isBelowThreshold)); + // Expected output: true + + ``` + +- forEach + - ๋ฐฐ์—ด ์š”์†Œ์— ๋Œ€ํ•ด ์ œ๊ณต๋œ ํ•จ์ˆ˜๋ฅผ ํ•œ๋ฒˆ์”ฉ ์‹คํ–‰ + + ```jsx + const array1 = ['a', 'b', 'c']; + + array1.forEach((element) => console.log(element)); + + // Expected output: "a" + // Expected output: "b" + // Expected output: "c" + + ``` + +### Dom ์กฐ์ž‘ + +- ํƒœ๊ทธ ๊ฐ€์ ธ์˜ค๊ธฐ + - getElementById(โ€id๋ช…โ€) + - getElementByClassName(โ€class๋ช…โ€) + - getElementByTagName(โ€ํƒœ๊ทธ๋ช…โ€) + - querySelector(์„ ํƒ์ž), querySelectorAll(์„ ํƒ์ž or ํƒœ๊ทธ) +- ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์ถ”๊ฐ€ํ•˜๊ธฐ + - element.addEventListener(type, listener, options); +- ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์ œ๊ฑฐํ•˜๊ธฐ + - element.removeEventListener(type, listener, options); +- ํ‚ค๋ณด๋“œ์™€ ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ + - ํ‚ค๋ณด๋“œ + - addEventListener(โ€keydownโ€, (event) โ‡’ {}); + - ๋งˆ์šฐ์Šค + - addEventListner(โ€clickโ€,(event) โ‡’ {}); +- ํƒœ๊ทธ ์†์„ฑ ๋‹ค๋ฃจ๊ธฐ + - ์†์„ฑ ์ ‘๊ทผ + - element.getAttribute(โ€์†์„ฑโ€); + - ์†์„ฑ ์ถ”๊ฐ€ + - element.getAttribute(โ€์†์„ฑโ€,โ€๊ฐ’โ€); + - ์†์„ฑ ์‚ญ์ œ + - element.removeAttribute(โ€์†์„ฑโ€); +- ๋ถ€๋ชจ์™€ ์ž์‹ ํƒœ๊ทธ ์ฐพ๊ธฐ + - ๋ถ€๋ชจ ๋…ธ๋“œ ํƒ์ƒ‰ + - element.parentNode; + - ์ž์‹ ๋…ธ๋“œ ํƒ์ƒ‰ + - element.childNodes; + - element.firstChild; + - element.lastChild; +- ์ƒˆ๋กœ์šด ํƒœ๊ทธ ๋งŒ๋“ค๊ธฐ + - element.createElement(โ€ํƒœ๊ทธโ€); + - element.appendChild(element); +- ํƒœ๊ทธ ๋ณต์ œํ•˜๊ธฐ + - element.cloneNode(deep); + - deep(optional) + - ํ•˜์œ„ ๋ณต์ œ ์—ฌ๋ถ€ \ No newline at end of file diff --git a/mission/chapter01/mimssion.html b/mission/chapter01/mimssion.html new file mode 100644 index 0000000..e2dcba4 --- /dev/null +++ b/mission/chapter01/mimssion.html @@ -0,0 +1,44 @@ + + + + + + Document + + + + +
+
+

UMC Study Plan

+
+ +
+ + +
+ +
+

ํ•ด์•ผ ํ•  ์ผ

+ +
+ +
+
+ +
+

ํ•ด๋‚ธ ์ผ

+ +
+ +
+
+ +
+
+ +
+ + + + \ No newline at end of file diff --git a/mission/chapter01/script.js b/mission/chapter01/script.js new file mode 100644 index 0000000..295353b --- /dev/null +++ b/mission/chapter01/script.js @@ -0,0 +1,39 @@ +const input = document.querySelector(".input"); +const todolist = document.querySelector(".content-list-container"); +const donelist = document.querySelector(".done-list-container"); + +function handleEnterKey(e) { + if (e.key === "Enter" && e.target.value.trim()) { + appendTodoItem(e.target.value.trim()); + e.target.value = ""; + } +} + +function createItem(text, buttonText, clickHandler) { + const container = document.createElement("div"); + container.className = "content-box"; + container.innerHTML = ` +

${text}

+ + `; + container.querySelector("button").addEventListener("click", clickHandler); + return container; +} + +function appendTodoItem(text) { + const todoItem = createItem(text, "์™„๋ฃŒ", () => moveToDone(todoItem, text)); + todolist.appendChild(todoItem); +} + +function appendDoneItem(text) { + const doneItem = createItem(text, "์‚ญ์ œ", (e) => e.target.parentElement.remove()); + donelist.appendChild(doneItem); +} + +function moveToDone(todoItem, text) { + appendDoneItem(text); + todoItem.remove(); +} + +// Event listeners +input.addEventListener("keypress", handleEnterKey); diff --git a/mission/chapter01/style.css b/mission/chapter01/style.css new file mode 100644 index 0000000..84bfb48 --- /dev/null +++ b/mission/chapter01/style.css @@ -0,0 +1,79 @@ +:root{ + --primary-color: #A9BCF5; +} + +body{ + background-color: rgb(210, 247, 247); + margin:0; +} + +.container{ + margin:0 5rem; +} + +.title-container{ + display: flex; + justify-content: center; + align-items: center; + padding: 4rem 0; + border-bottom: 1px solid gray; + width:100%; +} + +.study-dashboard-container{ + padding: 0 4rem; + display: flex; + justify-content: space-between; + align-items: stretch; + flex-direction: column; +} + + +.input{ + height:32px; + margin: 1rem 4rem; +} + +input:focus { + outline:3px solid var(--primary-color); +} + +.list-container{ + display: flex; + justify-content: center; +} + +.todo-title{ + border-bottom: 1px solid var(--primary-color); + padding-bottom: .5rem; +} + +.todo-container{ + flex:1; + margin: 0 1rem; + display: flex; + flex-direction: column; + align-items: center; + +} + +.content-list-container{ + display:flex; + flex-direction: column; + align-items: stretch; + width:100%; +} + +.content-box{ + display:flex; + justify-content:space-between; + border-bottom: 1px solid var(--primary-color); + margin: .5rem 4rem; +} + +.content-button{ + background-color: var(--primary-color); + margin: .5rem 1rem; + border: none; + padding: .5rem 1rem; +} \ No newline at end of file From 5553227cd24f34b475971cc520e28ba68dcfbe95 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:50:29 +0900 Subject: [PATCH 15/20] =?UTF-8?q?git=20ignore=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..43583cb --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/web-dev-practice \ No newline at end of file From 73e057c748f2d0a2e968d51525354ced30eefe30 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:52:10 +0900 Subject: [PATCH 16/20] =?UTF-8?q?keyword:=200=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=ED=82=A4=EC=9B=8C=EB=93=9C=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- keyword/chapter00/css.md | 392 ++++++++++++++++++++++++++++++++ keyword/chapter00/html.md | 0 keyword/chapter00/keyword0-0.md | 1 + 3 files changed, 393 insertions(+) create mode 100644 keyword/chapter00/css.md create mode 100644 keyword/chapter00/html.md create mode 100644 keyword/chapter00/keyword0-0.md diff --git a/keyword/chapter00/css.md b/keyword/chapter00/css.md new file mode 100644 index 0000000..13fa14c --- /dev/null +++ b/keyword/chapter00/css.md @@ -0,0 +1,392 @@ +- border vs outline์˜ ์ฐจ์ด์  ๐Ÿ  + + border-box์˜ ๊ฒฝ์šฐ ์ •ํ•ด์ง„ ํฌ๊ธฐ ์•ˆ์— ์„ ์ด ์ƒ๊ธฐ๋Š” ๋ฐ˜๋ฉด, outline์„ ์ ์šฉํ•œ ๋ฐ•์Šค์—๋Š” ์ •ํ•ด์ง„ ํฌ๊ธฐ ์™ธ๋ถ€์— ์„ ์ด ์ƒ๊ธด๋‹ค. + +- relative / absolute ๐Ÿ  + +```html + + + + + + + Document + + + + +
BOX
+

๊ณ ๊ตฌ๋งˆ ์ƒ์ž

+ + + +``` + +- ์ •๋ ฌ์˜ ์ง„์ˆ˜ + - text-align + + ๋ธ”๋ก ์š”์†Œ๋‚˜ ํ‘œ์˜ ์นธ ์ƒ์ž์˜ ๊ฐ€๋กœ ์ •๋ ฌ์„ ์„ค์ • + + - margin + + ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅย ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ • + + - flex + + ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ + + - translate + + ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ€๊ฒฝ + + - grid + + ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ๋“ค์„ ํ–‰๊ณผ ์—ด๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฉ์ž ํ˜•ํƒœ๋กœ ๋ฐฐ์น˜ + +- ๋ฐ˜์‘ํ˜• background + - background-image + + ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ • + + - background-repeat + + ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต ๋ฐฉ๋ฒ•์„ ์ง€์ •. ๊ฐ€๋กœ์ถ• ๋ฐ ์„ธ๋กœ์ถ•์„ ๋”ฐ๋ผ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ๊ณ , ์•„์˜ˆ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. + + - background-position + + background-image์˜ ์ดˆ๊ธฐ ์œ„์น˜๋ฅผ ์„ค์ • + + - background-size + + background-image ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •. ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์ด์ฆˆ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜, ๊ณต๊ฐ„์— ๋งž์ถฐ ์กฐ์ ˆ ๊ฐ€๋Šฅ + + - ์ถ•์•ฝํ˜• + + ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ • + + - example + + ```html + background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); + ``` + +- transform ๐Ÿ  + + - translate + + ```html + + + + + + + Document + + + + +
BOX
+ + + + ``` + + - scale + + ```html + + + + + + Document + + + +
Normal
+
Scaled
+ + + ``` + + - rotate + + ```html + + + + + + Document + + + +
Normal
+
Rotated
+ + + + ``` + + - skew + + ```html + + + + + + Document + + + +
Normal
+
Skewed
+ + + ``` + + - matrix + + ```html + + + + + + Document + + + +
Normal
+
Changed
+ + + + ``` + +- transition + - transition-property + + transition effect๋ฅผ ์ฃผ๋Š” ์†์„ฑ๋“ค. ์˜ˆ์ œ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์žˆ๋‹ค. + + ```html + .target { + transition-property: background-color; + transition-duration: 1s; + background-color: #ccc; + } + + .target:hover, + .target:focus { + background-color: #eee; + } + ``` + + - transition-duration + + transition ์™„๋ฃŒ ์‹œ๊นŒ์ง€์˜ ์‹œ๊ฐ„์„ ์„ค์ • + + - transition-timingfunction + + transition effect์— ์˜ํ–ฅ์„ ์ค„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†์„ฑ์„ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. + + - transition-delay + + animation์„ ์ ์šฉํ•  ๋•Œ ์˜ํ–ฅ์„ ์ค„ delay์„ค์ • + + - transition-behavior + + display, visibility ๋“ฑ discret ์†์„ฑ์— ๋Œ€ํ•ด transition์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. + + + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+
+
+ + + ``` + +- animation ๐Ÿ  + + - animation-name + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ •. ์ •ํ•ด์ง„ ์•ก์…˜์„ ์ˆ˜ํ–‰ํ•จ + + - animation-duration + + ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„๋ฃŒํ•˜๋Š”๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„ ์„ค์ • + + - animation-delay + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์„ค์ • + + - animation-direction + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐฉํ–ฅ ์„ค์ • + + - animation-iteration-count + + ๋ฐ˜๋ณต ํšŸ์ˆ˜ ์„ค์ • + + - animation-play-state + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ์„ค์ •. ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์‹คํ–‰ + + - animation-timing-function + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„ ๊ณก์„  ์„ค์ • + + - animation-fill-mode + + ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์ „ํ›„์˜ ์Šคํƒ€์ผ์„ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€ ์ง€์ • + + - @keyframes + + ํ”„๋ ˆ์ž„ ๋‹จ์œ„๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์ • + + - ์ถ•์•ฝํ˜• + + ์ด๋ฆ„, ์ง€์†์‹œ๊ฐ„, ๋”œ๋ ˆ์ด ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•จ + + - ์‹ค์Šต + ```html + + + + + + Document + + + +
+ + + ``` \ No newline at end of file diff --git a/keyword/chapter00/html.md b/keyword/chapter00/html.md new file mode 100644 index 0000000..e69de29 diff --git a/keyword/chapter00/keyword0-0.md b/keyword/chapter00/keyword0-0.md new file mode 100644 index 0000000..78b5da3 --- /dev/null +++ b/keyword/chapter00/keyword0-0.md @@ -0,0 +1 @@ +0์ฃผ ์ฐจ ํ‚ค์›Œ๋“œ ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค \ No newline at end of file From a141a12955115ea1ec9005313160dd684ef9c780 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:52:28 +0900 Subject: [PATCH 17/20] =?UTF-8?q?mission:=200=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission/chapter00/mission1.html | 86 +++++++++++++++++++++++++++++++ mission/chapter00/mission2.html | 89 +++++++++++++++++++++++++++++++++ 2 files changed, 175 insertions(+) create mode 100644 mission/chapter00/mission1.html create mode 100644 mission/chapter00/mission2.html diff --git a/mission/chapter00/mission1.html b/mission/chapter00/mission1.html new file mode 100644 index 0000000..a3c439f --- /dev/null +++ b/mission/chapter00/mission1.html @@ -0,0 +1,86 @@ + + + + + + Document + + + +
+
+ +
+ +
UMC
+
+ +
+
+ PROJECTS +
+
+ MEMBERS +
+
+ NOTICE +
+
+ +
+ +
+ + \ No newline at end of file diff --git a/mission/chapter00/mission2.html b/mission/chapter00/mission2.html new file mode 100644 index 0000000..5943a6b --- /dev/null +++ b/mission/chapter00/mission2.html @@ -0,0 +1,89 @@ + + + + + + + + +
+ +
+
HEADER
+
MENU
+
+ +
HERO
+ +
+
MAIN
+ + + +
+ +
BANNER
+
+ + \ No newline at end of file From 8a2ddc8d021862f336719bd9875d66356cf310d3 Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:52:47 +0900 Subject: [PATCH 18/20] =?UTF-8?q?keyword:=201=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=ED=82=A4=EC=9B=8C=EB=93=9C=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- keyword/chapter01/js.md | 295 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 295 insertions(+) create mode 100644 keyword/chapter01/js.md diff --git a/keyword/chapter01/js.md b/keyword/chapter01/js.md new file mode 100644 index 0000000..31c154c --- /dev/null +++ b/keyword/chapter01/js.md @@ -0,0 +1,295 @@ +- JS์—์„œ ์‚ฌ์น™์—ฐ์‚ฐ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. + - ๋”ํ•˜๊ธฐ + + ```jsx + console.log(2+3); + ``` + + - ๋นผ๊ธฐ + + ```jsx + console.log(2-3); + ``` + + - ๊ณฑํ•˜๊ธฐ + + ```jsx + console.log(2*3); + ``` + + - ๋‚˜๋ˆ„๊ธฐ + + ```jsx + console.log(2/3); + ``` + + - ๋‚˜๋จธ์ง€ ๊ตฌํ•˜๊ธฐ + + ```jsx + console.log(2%3); + ``` + + - ๊ฑฐ๋“ญ ์ œ๊ณฑ + + ```jsx + console.log(2**3); + console.log(Math.pow(2,3)); + ``` + +- JS์—์„œ ๋น„๊ต ์—ฐ์‚ฐ์„ ํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์กฐ์‚ฌํ•˜์—ฌ ์ •๋ฆฌํ•ด์ฃผ์„ธ์š”. + + ```jsx + a == b //์ผ์น˜ ์—ฐ์‚ฐ์ž + a != b //๋ถˆ์ผ์น˜ + a <= b //ํฌ๊ธฐ ๋น„๊ต + a === b //strict ์ผ์น˜ ์—ฐ์‚ฐ์ž (ํƒ€์ž…๋„ ๋น„๊ต) + a !== b //strict ๋ถˆ์ผ์น˜ + ``` + +- JS์—์„œ ์ฆ๊ฐ€/๊ฐ์†Œ ์—ฐ์‚ฐ์„ ํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์กฐ์‚ฌํ•˜์—ฌ ์ •๋ฆฌํ•ด์ฃผ์„ธ์š”. + + ```jsx + a++; + //์ฆ๊ฐ€ ์ „ ๊ฐ’ return + ++a; + //์ฆ๊ฐ€ ํ›„ ๊ฐ’ return + a--; + --a; + a +=1; // equal a = a + 1; + ``` + +- ์—ฐ์‚ฐ์ž ์šฐ์„ ์ˆœ์œ„์— ๋Œ€ํ•ด ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. + 1. ์‰ผํ‘œ/์‹œํ€ธ์Šค + 2. yield, ํ• ๋‹น ( +=, -= โ€ฆ.) + - yield - generator ํ•จ์ˆ˜๋ฅผ ์ค‘์ง€ํ•˜๊ฑฐ๋‚˜ ์žฌ๊ฐœ ์‹œ ์‚ฌ์šฉ + 3. ์‚ผํ•ญ์—ฐ์‚ฐ์ž + 4. ๋…ผ๋ฆฌ์—ฐ์‚ฐ์ž + 5. ๋น„๊ต์—ฐ์‚ฐ์ž + 6. ๋น„ํŠธ์—ฐ์‚ฐ์ž + 7. ์‚ฌ์น™์—ฐ์‚ฐ + 8. ์ „์œ„์ฆ๊ฐ€, ๋…ผ๋ฆฌ/๋น„ํŠธ NOT + 9. ํ›„์œ„์ฆ๊ฐ€ + 10. ๊ทธ ์™ธโ€ฆ + + +### string + + + +### bigint + + + +### Array + +- sort + - ๋ฌธ์ž์—ด์„ ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ๋‚˜์—ด. ์ˆซ์ž๋ฅผ sort ์‹œ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ ํ›„ sortํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฃผ์˜ ์š”ํ•จ + + ```jsx + const months = ['March', 'Jan', 'Feb', 'Dec']; + months.sort(); + console.log(months); + // Expected output: Array ["Dec", "Feb", "Jan", "March"] + ``` + +- join + - ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ง€์ •๋œ ๊ตฌ๋ถ„ ๋ฌธ์ž์—ด๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ์ƒˆ ๋ฌธ์ž์—ด return + + ```jsx + const elements = ['Fire', 'Air', 'Water']; + + console.log(elements.join()); + // Expected output: "Fire,Air,Water" + + console.log(elements.join('')); + // Expected output: "FireAirWater" + + console.log(elements.join('-')); + // Expected output: "Fire-Air-Water" + + ``` + +- reverse + - ๋ฐฐ์—ด์˜ ์ˆœ์„œ๋ฅผ ๋ฐ˜์ „ + + ```jsx + const array1 = ['one', 'two', 'three']; + console.log('array1:', array1); + // Expected output: "array1:" Array ["one", "two", "three"] + + const reversed = array1.reverse(); + console.log('reversed:', reversed); + // Expected output: "reversed:" Array ["three", "two", "one"] + ``` + +- splice + - ๊ธฐ์กด ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ๊ต์ฒด, ์ถ”๊ฐ€ + + ```jsx + const months = ['Jan', 'March', 'April', 'June']; + months.splice(1, 0, 'Feb'); + // Inserts at index 1 + console.log(months); + // Expected output: Array ["Jan", "Feb", "March", "April", "June"] + + months.splice(4, 1, 'May'); + // Replaces 1 element at index 4 + console.log(months); + // Expected output: Array ["Jan", "Feb", "March", "April", "May"] + ``` + +- slice + - begin๋ถ€ํ„ฐ end - 1๊นŒ์ง€ shallow copy๋ฅผ returnํ•œ๋‹ค + + ```jsx + const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; + + console.log(animals.slice(2)); + // Expected output: Array ["camel", "duck", "elephant"] + + console.log(animals.slice(2, 4)); + // Expected output: Array ["camel", "duck"] + ``` + +- find + - ์ œ๊ณต๋œ ๋ฐฐ์—ด์—์„œ ํ…Œ์ŠคํŠธ ํ•จ์ˆ˜์˜ return์ด true์ธ ์ฒซ๋ฒˆ์งธ ์š”์†Œ๋ฅผ return + + ```jsx + const array1 = [5, 12, 8, 130, 44]; + + const found = array1.find((element) => element > 10); + + console.log(found); + // Expected output: 12 + + ``` + +- filter + - ์ฃผ์–ด์ง„ ๋ฐฐ์—ด์˜ shallow copy๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ•จ์ˆ˜์˜ true ๊ฐ’๋“ค๋กœ๋งŒ ํ•„ํ„ฐ๋ง + + ```jsx + const words = ['spray', 'elite', 'exuberant', 'destruction', 'present']; + + const result = words.filter((word) => word.length > 6); + + console.log(result); + // Expected output: Array ["exuberant", "destruction", "present"] + + ``` + +- map + - ๋ฐฐ์—ด ๋‚ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœํ•œ ๊ฒฐ๊ณผ๋ฅผ return + + ```jsx + const array1 = [1, 4, 9, 16]; + + // Pass a function to map + const map1 = array1.map((x) => x * 2); + + console.log(map1); + // Expected output: Array [2, 8, 18, 32] + + ``` + +- reduce + - ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด reducer ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๊ณ , ๊ฒฐ๊ณผ๊ฐ’ return + + ```jsx + const array1 = [1, 2, 3, 4]; + + // 0 + 1 + 2 + 3 + 4 + const initialValue = 0; + const sumWithInitial = array1.reduce( + (accumulator, currentValue) => accumulator + currentValue, + initialValue, + ); + + console.log(sumWithInitial); + // Expected output: 10 + + ``` + +- some + - ๋ฐฐ์—ด ์•ˆ์˜ ์–ด๋–ค ์š”์†Œ๋ผ๋„ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ์ ์–ด๋„ ํ•˜๋‚˜๋ผ๋„ ํ†ต๊ณผํ•˜๋Š”์ง€ ํ™•์ธ. ํ†ต๊ณผํ•˜๋ฉด true ๋ฐ˜ํ™˜ + + ```jsx + const array = [1, 2, 3, 4, 5]; + + // Checks whether an element is even + const even = (element) => element % 2 === 0; + + console.log(array.some(even)); + // Expected output: true + + ``` + +- every + - ๋ฐฐ์—ด ์•ˆ์˜ ๋ชจ๋“  ์š”์†Œ๊ฐ€ ํŒ๋ณ„ ํ•จ์ˆ˜๋ฅผ ํ†ต๊ณผํ•˜๋Š”์ง€ ํ™•์ธ. ๋ชจ๋‘ ํ†ต๊ณผํ•˜๋ฉด true ๋ฐ˜ํ™˜ + + ```jsx + const isBelowThreshold = (currentValue) => currentValue < 40; + + const array1 = [1, 30, 39, 29, 10, 13]; + + console.log(array1.every(isBelowThreshold)); + // Expected output: true + + ``` + +- forEach + - ๋ฐฐ์—ด ์š”์†Œ์— ๋Œ€ํ•ด ์ œ๊ณต๋œ ํ•จ์ˆ˜๋ฅผ ํ•œ๋ฒˆ์”ฉ ์‹คํ–‰ + + ```jsx + const array1 = ['a', 'b', 'c']; + + array1.forEach((element) => console.log(element)); + + // Expected output: "a" + // Expected output: "b" + // Expected output: "c" + + ``` + +### Dom ์กฐ์ž‘ + +- ํƒœ๊ทธ ๊ฐ€์ ธ์˜ค๊ธฐ + - getElementById(โ€id๋ช…โ€) + - getElementByClassName(โ€class๋ช…โ€) + - getElementByTagName(โ€ํƒœ๊ทธ๋ช…โ€) + - querySelector(์„ ํƒ์ž), querySelectorAll(์„ ํƒ์ž or ํƒœ๊ทธ) +- ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์ถ”๊ฐ€ํ•˜๊ธฐ + - element.addEventListener(type, listener, options); +- ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์ œ๊ฑฐํ•˜๊ธฐ + - element.removeEventListener(type, listener, options); +- ํ‚ค๋ณด๋“œ์™€ ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ + - ํ‚ค๋ณด๋“œ + - addEventListener(โ€keydownโ€, (event) โ‡’ {}); + - ๋งˆ์šฐ์Šค + - addEventListner(โ€clickโ€,(event) โ‡’ {}); +- ํƒœ๊ทธ ์†์„ฑ ๋‹ค๋ฃจ๊ธฐ + - ์†์„ฑ ์ ‘๊ทผ + - element.getAttribute(โ€์†์„ฑโ€); + - ์†์„ฑ ์ถ”๊ฐ€ + - element.getAttribute(โ€์†์„ฑโ€,โ€๊ฐ’โ€); + - ์†์„ฑ ์‚ญ์ œ + - element.removeAttribute(โ€์†์„ฑโ€); +- ๋ถ€๋ชจ์™€ ์ž์‹ ํƒœ๊ทธ ์ฐพ๊ธฐ + - ๋ถ€๋ชจ ๋…ธ๋“œ ํƒ์ƒ‰ + - element.parentNode; + - ์ž์‹ ๋…ธ๋“œ ํƒ์ƒ‰ + - element.childNodes; + - element.firstChild; + - element.lastChild; +- ์ƒˆ๋กœ์šด ํƒœ๊ทธ ๋งŒ๋“ค๊ธฐ + - element.createElement(โ€ํƒœ๊ทธโ€); + - element.appendChild(element); +- ํƒœ๊ทธ ๋ณต์ œํ•˜๊ธฐ + - element.cloneNode(deep); + - deep(optional) + - ํ•˜์œ„ ๋ณต์ œ ์—ฌ๋ถ€ \ No newline at end of file From a39c634993084118abd053438ace42237a6f81ea Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:53:03 +0900 Subject: [PATCH 19/20] =?UTF-8?q?mission:=200=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission/chapter00/mission.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/mission/chapter00/mission.md b/mission/chapter00/mission.md index 224a23e..9219b23 100644 --- a/mission/chapter00/mission.md +++ b/mission/chapter00/mission.md @@ -1 +1,15 @@ -0์ฃผ ์ฐจ ๋ฏธ์…˜ ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค \ No newline at end of file +- ๋ฉ”์ธ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/7a6e32d1-d6b7-46e1-a34c-94b41ae20952) + +- ํ”„๋กœ์ ํŠธ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/2c7bc851-bccc-4112-aee1-e0c42185807d) + +- ๋ฉค๋ฒ„ ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/7da289e4-642e-4ddf-901c-27de051fe1d3) + +- NOTICE ํŽ˜์ด์ง€ + +![image.png](https://github.com/user-attachments/assets/17303bb0-7f96-462e-b52e-9b69153475d8) \ No newline at end of file From 4c72eda4c6a9f205538b0bdb77dd5e2baa1ed8cc Mon Sep 17 00:00:00 2001 From: YoungCheon Kim Date: Thu, 26 Sep 2024 02:53:11 +0900 Subject: [PATCH 20/20] =?UTF-8?q?mission:=201=EC=A3=BC=EC=B0=A8=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20=EC=88=98=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission/chapter01/mimssion.html | 44 ++++++++++++++++++ mission/chapter01/script.js | 39 ++++++++++++++++ mission/chapter01/style.css | 79 +++++++++++++++++++++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 mission/chapter01/mimssion.html create mode 100644 mission/chapter01/script.js create mode 100644 mission/chapter01/style.css diff --git a/mission/chapter01/mimssion.html b/mission/chapter01/mimssion.html new file mode 100644 index 0000000..e2dcba4 --- /dev/null +++ b/mission/chapter01/mimssion.html @@ -0,0 +1,44 @@ + + + + + + Document + + + + +
+
+

UMC Study Plan

+
+ +
+ + +
+ +
+

ํ•ด์•ผ ํ•  ์ผ

+ +
+ +
+
+ +
+

ํ•ด๋‚ธ ์ผ

+ +
+ +
+
+ +
+
+ +
+ + + + \ No newline at end of file diff --git a/mission/chapter01/script.js b/mission/chapter01/script.js new file mode 100644 index 0000000..295353b --- /dev/null +++ b/mission/chapter01/script.js @@ -0,0 +1,39 @@ +const input = document.querySelector(".input"); +const todolist = document.querySelector(".content-list-container"); +const donelist = document.querySelector(".done-list-container"); + +function handleEnterKey(e) { + if (e.key === "Enter" && e.target.value.trim()) { + appendTodoItem(e.target.value.trim()); + e.target.value = ""; + } +} + +function createItem(text, buttonText, clickHandler) { + const container = document.createElement("div"); + container.className = "content-box"; + container.innerHTML = ` +

${text}

+ + `; + container.querySelector("button").addEventListener("click", clickHandler); + return container; +} + +function appendTodoItem(text) { + const todoItem = createItem(text, "์™„๋ฃŒ", () => moveToDone(todoItem, text)); + todolist.appendChild(todoItem); +} + +function appendDoneItem(text) { + const doneItem = createItem(text, "์‚ญ์ œ", (e) => e.target.parentElement.remove()); + donelist.appendChild(doneItem); +} + +function moveToDone(todoItem, text) { + appendDoneItem(text); + todoItem.remove(); +} + +// Event listeners +input.addEventListener("keypress", handleEnterKey); diff --git a/mission/chapter01/style.css b/mission/chapter01/style.css new file mode 100644 index 0000000..84bfb48 --- /dev/null +++ b/mission/chapter01/style.css @@ -0,0 +1,79 @@ +:root{ + --primary-color: #A9BCF5; +} + +body{ + background-color: rgb(210, 247, 247); + margin:0; +} + +.container{ + margin:0 5rem; +} + +.title-container{ + display: flex; + justify-content: center; + align-items: center; + padding: 4rem 0; + border-bottom: 1px solid gray; + width:100%; +} + +.study-dashboard-container{ + padding: 0 4rem; + display: flex; + justify-content: space-between; + align-items: stretch; + flex-direction: column; +} + + +.input{ + height:32px; + margin: 1rem 4rem; +} + +input:focus { + outline:3px solid var(--primary-color); +} + +.list-container{ + display: flex; + justify-content: center; +} + +.todo-title{ + border-bottom: 1px solid var(--primary-color); + padding-bottom: .5rem; +} + +.todo-container{ + flex:1; + margin: 0 1rem; + display: flex; + flex-direction: column; + align-items: center; + +} + +.content-list-container{ + display:flex; + flex-direction: column; + align-items: stretch; + width:100%; +} + +.content-box{ + display:flex; + justify-content:space-between; + border-bottom: 1px solid var(--primary-color); + margin: .5rem 4rem; +} + +.content-button{ + background-color: var(--primary-color); + margin: .5rem 1rem; + border: none; + padding: .5rem 1rem; +} \ No newline at end of file