사전 세팅

<aside> 💡 1강에서 생성한 javascript_homework 폴더에서 진행하세요.

</aside>

1. main 브랜치로 이동 후 second 브랜치 생성
   • git switch main
   • git switch -c second
2. 과제 작성
3. 코드 저장 및 push
4. 해당 브랜치 github 링크 제출하기 (브랜치 확인하고 제출하세요)

<aside> 💡 제출 링크: https://airtable.com/apprK9JWlxv2U6gLf/shrTSBacYYHxkoeUu

</aside>

문제

<aside> ❗ 모르면 복습 & 검색하세요. 그래도 안되면 질문하세요.

</aside>

1. 클래스가 box인 div 태그 중 클릭된 div 태그에 clicked 클래스를 추가해보세요.

   • 아래의 index.html, style.css 코드를 활용하세요. (파일은 생성하세요.)
   • script.js 파일을 생성하여 연결하세요.
   • 🍯 hint: id가 container인 태그에 이벤트를 걸고, 이벤트 객체의 target 속성을 활용하세요.
   • index.html 파일
   • style.css 파일

2. 다음의 함수를 완성해보세요.

   • 1번 문제에서 생성한 script.js 파일의 하단에 코드 작성하시면 됩니다.

   function getSquare(number) {
     // number의 제곱을 계산하여 반환하는 함수를 작성하세요.
   }
   
   const result = getSquare(5);
   console.log(result); // 25 출력 (5의 제곱)
   

3. 현재 브라우저 스크롤 시 수직으로 얼마나 스크롤 됐는지 출력되도록 코드를 작성해보세요.

   • second.html, second.css, second.js 파일을 추가하여 작성하세요.
   • 1, 2번 문제에서 생성한 파일들은 삭제하지 말고 그대로 두세요.
   • 브라우저 크기보다 큰 클래스가 content인 태그에 스크롤 이벤트를 만들고 자바스크립트 코드를 작성합니다. (content에 거는 게 아니라 브라우저에 스크롤 이벤트 거는 겁니다..! 브라우저에서 수직으로 얼마나 떨어졌는지는 window로만 확인할 수 있어요…!!! 제가 애매하게 썼습니다 😭)

   (생략)
   
   <div class="content"></div>
   
   (생략)
   

   .content {
   	width: 100vw;
   	height: 300vh;
   	background-color: skyblue;
   }
   

4. 1부터 10까지 숫자를 for문을 활용하여 출력해보세요.

   • 3번 문제에서 생성한 second.js 파일의 하단에 코드를 작성하세요. (기존 코드 삭제 X)