diff --git "a/1\353\262\210/1.md" "b/1\353\262\210/1.md" index d44b760..895c519 100644 --- "a/1\353\262\210/1.md" +++ "b/1\353\262\210/1.md" @@ -1,3 +1,8 @@ ### console.log와 return의 차이가 무엇인가요? (여기에 작성) +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