프론트엔드/Javascript 연습과제 해답
-
요소의 좌표 계산하기 연습과제 해답프론트엔드/Javascript 연습과제 해답 2024. 2. 28. 07:39
연습과제 1 body{ margin: 0; padding: 0; height: 300vh; display: flex; justify-content: center; align-items: center; } .bg{ width: 50vw; height: 30vw; background: url(https://image-cdn.hypb.st/https%3A%2F%2Fkr.hypebeast.com%2Ffiles%2F2023%2F09%2Fstudio-ghibli-to-be-acquired-by-nippon-television-holdings-details-info-01.jpg?cbr=1&q=90) no-repeat center; background-size: cover; transition: 1s ease-in-o..
-
브라우저 창 사이즈와 스크롤 연습과제 해답프론트엔드/Javascript 연습과제 해답 2024. 2. 27. 18:41
연습과제 1 1 2 3 4 5 6 7 8 9 10 prev next *{ box-sizing: border-box; } body{ margin: 0; padding: 0; width: 100%; min-height: 500vh; background: url(https://blog.kakaocdn.net/dn/ciUuSF/btrwA63osUr/qK4zOZpkmz3A8U9rMtkzO1/img.jpg) no-repeat center; background-size: cover; } .container{ width: 60%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin: auto; margin-top..
-
요소 사이즈와 스크롤 연습과제 해답프론트엔드/Javascript 연습과제 해답 2024. 2. 26. 20:56
연습과제 1 const page = document.querySelector('.document') const agreeBtn = document.querySelector('button') function checkTheBottomOfScrolling(){ // 구현하기 if(page.scrollHeight - page.clientHeight === page.scrollTop){ console.log('문서 다 읽음') agreeBtn.disabled = false } } page.addEventListener('scroll', checkTheBottomOfScrolling) 연습과제 2 this 는 스크롤 이벤트가 발생한 page 요소를 가리킨다. const pages = document.querySe..
-
브라우저 창 사이즈와 스크롤프론트엔드/Javascript 연습과제 해답 2024. 2. 25. 21:17
* 브라우저 창의 너비와 높이 - document.documentElement.clientWidth, document.documentElement.clientHeight console.log(document.documentElement.clientHeight) console.log(document.documentElement.clientWidth) 현재 브라우저의 너비와 높이를 조회할 수 있다. * window 객체가 아닌 document.documentElement 를 사용하는 이유 console.log( window.innerWidth ); // 전체 창 너비 console.log( document.documentElement.clientWidth ); // 스크롤바가 차지하는 영역을 제외한 창 너비..
-
반복문(최신) 연습과제 해답프론트엔드/Javascript 연습과제 해답 2024. 2. 17. 16:26
연습과제 1 1 연습과제 2 let i = 0 i++ if(i < 5) alert(i) i++ if(i < 5) alert(i) i++ if(i < 5) alert(i) i++ if(i < 5) alert(i) i++ if(i < 5) alert(i) 연습과제 3 let i = 0 if(i < 5){ i++ alert(i) } if(i < 5){ i++ alert(i) } if(i < 5){ i++ alert(i) } if(i < 5){ i++ alert(i) } if(i < 5){ i++ alert(i) } 연습과제 4 let i = 0 if(i < 5){ alert( i ) i++ } if(i < 5){ alert( i ) i++ } if(i < 5){ alert( i ) i++ } if(i < 5)..
-
조건문 연습과제 해답프론트엔드/Javascript 연습과제 해답 2024. 2. 17. 11:09
연습과제 1 let score = +prompt('평점을 입력해주세요!', 0) if(score === 0){ console.log('☆☆☆☆☆') }else if(score === 1){ console.log('★☆☆☆☆') }else if(score === 2){ console.log('★★☆☆☆') }else if(score === 3){ console.log('★★★☆☆') }else if(score === 4){ console.log('★★★★☆') }else if(score === 5){ console.log('★★★★★') }else{ alert('잘못된 평점입니다.') } 연습과제 2 let score = +prompt('평점을 입력해주세요!', 0) switch (score) { case..
-
반복문 연습과제 해답프론트엔드/Javascript 연습과제 해답 2023. 6. 29. 15:22
https://learnjs.vlpt.us/basics/08-loop.html 08. 반복문 · GitBook 반복문은 특정 작업을 반복적으로 할 때 사용할 수 있는 구문입니다. for 문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복합니다. 한번 learnjs.vlpt.us 아래와 같이 조건을 주면 맨 처음 i 값이 0 이므로 numbers[i] 는 1 이 된다. 그러므로 numbers[i] > 3 이 거짓이 된다. 그러므로 while 문 내부는 실행되지 않는다. function biggerThanThree(numbers) { const filteredNumbers = [] let i = 0 while(i < numbers.length && numb..
-
자바스크립트 문법 13 - 함수(function)의 활용 해답프론트엔드/Javascript 연습과제 해답 2022. 1. 26. 17:04
* 연습과제 1 해답 1 const fruit = 'apple' let printB = null function printA(){ const fruit = 'banana' printB = function(){ console.log(fruit) } printB() } printA() // banana printB() // banana 해답 2 const fruit = 'apple' let printB = null function printA() { const fruit = 'banana' function printB() { console.log(fruit) } printB() return printB } printB = printA() // banana printB() // banana * 연습과제 2 f..