From 3df2d3a9120d390851ae5bad568fe2fcd94c77d5 Mon Sep 17 00:00:00 2001 From: loveytheb Date: Wed, 8 Nov 2023 11:29:34 +0900 Subject: [PATCH 1/4] test --- "1\353\262\210/1.md" | 1 + 1 file changed, 1 insertion(+) diff --git "a/1\353\262\210/1.md" "b/1\353\262\210/1.md" index d44b760..c335f53 100644 --- "a/1\353\262\210/1.md" +++ "b/1\353\262\210/1.md" @@ -1,3 +1,4 @@ ### console.log와 return의 차이가 무엇인가요? (여기에 작성) +sdsfdfdfsfsdf \ No newline at end of file From 10eb629c91bf602ae5ac40cea8a868a51206b10b Mon Sep 17 00:00:00 2001 From: loveytheb Date: Wed, 8 Nov 2023 11:33:27 +0900 Subject: [PATCH 2/4] test2 --- "1\353\262\210/1.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/1\353\262\210/1.md" "b/1\353\262\210/1.md" index c335f53..f02b1c4 100644 --- "a/1\353\262\210/1.md" +++ "b/1\353\262\210/1.md" @@ -1,4 +1,4 @@ ### console.log와 return의 차이가 무엇인가요? (여기에 작성) -sdsfdfdfsfsdf \ No newline at end of file +이건 테스트입니다. \ No newline at end of file From 5295a4cf1f13986b20698f6c61f97d439d20d45e Mon Sep 17 00:00:00 2001 From: loveytheb Date: Wed, 8 Nov 2023 11:36:46 +0900 Subject: [PATCH 3/4] test3 --- "1\353\262\210/1.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/1\353\262\210/1.md" "b/1\353\262\210/1.md" index f02b1c4..0394537 100644 --- "a/1\353\262\210/1.md" +++ "b/1\353\262\210/1.md" @@ -1,4 +1,4 @@ ### console.log와 return의 차이가 무엇인가요? (여기에 작성) -이건 테스트입니다. \ No newline at end of file +되는지 다시한번 확인 \ No newline at end of file From 71ffa3d7d8365621f3067b34f301ef57f5ffd26f Mon Sep 17 00:00:00 2001 From: loveytheb Date: Wed, 8 Nov 2023 16:34:55 +0900 Subject: [PATCH 4/4] =?UTF-8?q?2=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "1\353\262\210/1.md" | 6 +++++- "2\353\262\210/2.html" | 11 +++++++++++ "2\353\262\210/2.js" | 2 ++ "3\353\262\210/3.html" | 11 +++++++++++ "3\353\262\210/3.js" | 2 +- "4\353\262\210/4.html" | 11 +++++++++++ "4\353\262\210/4.js" | 3 ++- "5\353\262\210/5.html" | 4 ++-- "5\353\262\210/5.js" | 12 ++++++++++++ "6\353\262\210/6.html" | 2 +- "7\353\262\210/7.html" | 14 ++++++++++++++ "7\353\262\210/7.js" | 14 ++++++++++++++ "8\353\262\210/8.css" | 12 ++++++++++++ "8\353\262\210/8.html" | 14 ++++++++++++++ "8\353\262\210/8.js" | 19 +++++++++++++++++++ "9\353\262\210/9.md" | 4 ++++ 16 files changed, 135 insertions(+), 6 deletions(-) create mode 100644 "8\353\262\210/8.css" diff --git "a/1\353\262\210/1.md" "b/1\353\262\210/1.md" index 0394537..895c519 100644 --- "a/1\353\262\210/1.md" +++ "b/1\353\262\210/1.md" @@ -1,4 +1,8 @@ ### console.log와 return의 차이가 무엇인가요? (여기에 작성) -되는지 다시한번 확인 \ No newline at end of file +console.logs +- 값을 결과로 정의(저장)하지 않고 단순 결과 값을 콘솔에 단순 표시하는 것 + +return +- 다음의 결과로 함수의 값을 정의(저장)하고 함수를 종료하겠다는 의미 \ No newline at end of file diff --git "a/2\353\262\210/2.html" "b/2\353\262\210/2.html" index e69de29..b57cc38 100644 --- "a/2\353\262\210/2.html" +++ "b/2\353\262\210/2.html" @@ -0,0 +1,11 @@ + + + + + + 2주차 숙제 2번 + + + + + \ No newline at end of file diff --git "a/2\353\262\210/2.js" "b/2\353\262\210/2.js" index eed7eed..c4b163d 100644 --- "a/2\353\262\210/2.js" +++ "b/2\353\262\210/2.js" @@ -7,5 +7,7 @@ function 콘솔함수() { } const 리턴의결과 = 리턴함수(); // 리턴의결과에는 무슨 값이 들어가있을까요? 아래 주석처리 후 작성해보세요 +// 리턴함수하이 const 콘솔의결과 = 콘솔함수(); // 콘솔의결과에는 무슨 값이 들어가있을까요? 아래 주석처리 후 작성해보세요 +// undefined \ No newline at end of file diff --git "a/3\353\262\210/3.html" "b/3\353\262\210/3.html" index e69de29..108a7b4 100644 --- "a/3\353\262\210/3.html" +++ "b/3\353\262\210/3.html" @@ -0,0 +1,11 @@ + + + + + + 2주차 숙제 3번 + + + + + \ No newline at end of file diff --git "a/3\353\262\210/3.js" "b/3\353\262\210/3.js" index 2e3b731..97cc0df 100644 --- "a/3\353\262\210/3.js" +++ "b/3\353\262\210/3.js" @@ -7,4 +7,4 @@ function 나이말해주는함수(나이) { } // 콘솔로그에 어떻게 작성해야 할까요? -console.log(); // "안녕 철수야~ 반가워. 내 나이는 20살이야" +console.log(`${인사하는함수("철수")} 반가워. ${나이말해주는함수(20)}`); // "안녕 철수야~ 반가워. 내 나이는 20살이야" diff --git "a/4\353\262\210/4.html" "b/4\353\262\210/4.html" index e69de29..489441b 100644 --- "a/4\353\262\210/4.html" +++ "b/4\353\262\210/4.html" @@ -0,0 +1,11 @@ + + + + + + 2주차 숙제 4번 + + + + + \ No newline at end of file diff --git "a/4\353\262\210/4.js" "b/4\353\262\210/4.js" index 062ca1c..4a647f1 100644 --- "a/4\353\262\210/4.js" +++ "b/4\353\262\210/4.js" @@ -1,7 +1,8 @@ let 총합 = 0; // for문을 이용하여 숫자리스트의 숫자를 모두 더한 값을 총합 변수에 할당 후 console.log로 출력합니다. -for () { +for (let i = 0; i <= 10; i++) { + 총합 += i; } console.log(총합) // 결과: 55 \ No newline at end of file diff --git "a/5\353\262\210/5.html" "b/5\353\262\210/5.html" index 3d53d44..e2be2e6 100644 --- "a/5\353\262\210/5.html" +++ "b/5\353\262\210/5.html" @@ -4,14 +4,14 @@ - Document + 2주차 숙제 5번
1
2
3
- + \ No newline at end of file diff --git "a/5\353\262\210/5.js" "b/5\353\262\210/5.js" index e69de29..e4ca8b6 100644 --- "a/5\353\262\210/5.js" +++ "b/5\353\262\210/5.js" @@ -0,0 +1,12 @@ +const num = document.querySelectorAll(".number") + +for (let i = 0; i <= num.length; i++) { + // 1. 현재 숫자 값 가져오기 + const currentNum = parseInt(num[i].textContent, 10); + + // 2. 10을 더한 새로운 숫자 계산하기 + const newNum = currentNum + 10; + + // 3. 새로운 숫자로 텍스트 내용 업데이트하기 + num[i].textContent = newNum; +} \ No newline at end of file diff --git "a/6\353\262\210/6.html" "b/6\353\262\210/6.html" index 90f1f68..f0555a4 100644 --- "a/6\353\262\210/6.html" +++ "b/6\353\262\210/6.html" @@ -4,7 +4,7 @@ - Document + 2주차 숙제 6번 diff --git "a/7\353\262\210/7.html" "b/7\353\262\210/7.html" index e69de29..03edd53 100644 --- "a/7\353\262\210/7.html" +++ "b/7\353\262\210/7.html" @@ -0,0 +1,14 @@ + + + + + + 2주차 숙제 7번 + + +
+

+
+ + + \ No newline at end of file diff --git "a/7\353\262\210/7.js" "b/7\353\262\210/7.js" index e69de29..4117b1d 100644 --- "a/7\353\262\210/7.js" +++ "b/7\353\262\210/7.js" @@ -0,0 +1,14 @@ +const timeBox = document.querySelector(".timeBox"); +const timer = document.querySelector(".timer"); + +let count = Number(timer.textContent); + +const intervalId = setInterval(() => { + if (count < 10) { + count += 1; + timer.innerHTML = count; + } else { + timeBox.style.display = "none"; + clearInterval(intervalId); + } +}, 1000); \ No newline at end of file diff --git "a/8\353\262\210/8.css" "b/8\353\262\210/8.css" new file mode 100644 index 0000000..356474e --- /dev/null +++ "b/8\353\262\210/8.css" @@ -0,0 +1,12 @@ +body { + height: 200vh; + background-color: bisque; + } + +.upbtn { + position: fixed; + height: 40px; + width: 60px; + right: 10px; + bottom: 10px; +} \ No newline at end of file diff --git "a/8\353\262\210/8.html" "b/8\353\262\210/8.html" index e69de29..2624bb8 100644 --- "a/8\353\262\210/8.html" +++ "b/8\353\262\210/8.html" @@ -0,0 +1,14 @@ + + + + + + + 2주차 숙제 8번 + + +

2주차 숙제 8번 스크롤 이벤트 구현하기

+ + + + \ No newline at end of file diff --git "a/8\353\262\210/8.js" "b/8\353\262\210/8.js" index e69de29..7bd1fc8 100644 --- "a/8\353\262\210/8.js" +++ "b/8\353\262\210/8.js" @@ -0,0 +1,19 @@ +const upbtn = document.querySelector(".upbtn"); + +window.addEventListener("scroll", () => { + if (scrollY > 100) { + upbtn.style.display = "block"; + upbtn.classList.add("show"); + } else { + upbtn.style.display = "none"; + upbtn.classList.remove("show"); + } +}) + +upbtn.addEventListener("click", () => { + window.scrollTo({ + top: 0, + left: 0, + behavior: "smooth", + }); +}); \ No newline at end of file diff --git "a/9\353\262\210/9.md" "b/9\353\262\210/9.md" index b333037..3130ef5 100644 --- "a/9\353\262\210/9.md" +++ "b/9\353\262\210/9.md" @@ -1,3 +1,7 @@ ### 애니메이션 이벤트 구현하는 법을 4단계로 글로 작성해보세요. (여기에 작성) +1. 애니메이션 발생 전 모습 구현하기 +2. 애니메이션 발생 후 모습 구현하기 +3. css transition 적용하기 +4. 이벤트 등록하기 \ No newline at end of file