* 요소의 좌표를 계산하는 방법 첫번째 방법은 브라우저 좌측상단 꼭지점을 기준으로 좌표를 계산한다. 캡쳐화면에서는 해당 좌표를 clientX/clientY 로 표시하고 있다. 두번째 방법은 문서(document) 의 좌측상단 꼭지점을 기준으로 좌표를 계산한다. 캡쳐화면에서는 해당 좌표를 pageX/pageY로 표시하고 있다. 캡쳐화면에서 좌측그림은 스크롤로 페이지를 이동하기 전의 모습이다. 이때는 pageX 와 clientX 가 동일하고, pageY와 clientY 도 동일한 값이다. 왜냐하면 스크롤을 이동하기 전에 브라우저와 상단과 문서의 상단이 정확히 일치하기 때문이다. 하지만 우측그림과 같이 스크롤이 움직이면 문서가 이동하면서 문서 기준 좌표(pageY)는 스크롤을 이동하기 전과 동일하지만, 브라우..

* 브라우저 창의 너비와 높이 - 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 ); // 스크롤바가 차지하는 영역을 제외한 창 너비..

* 요소의 실제크기 확인하기 자바스크립트는 요소의 너비나 높이, 그리고 위치정보를 알 수 있는 기하정보 관련 API 함수를 제공한다. 해당 함수를 활용하여 요소의 위치를 변경하여 요소를 이동시키거나 요소의 크기를 알 수 있다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores vitae est temporibus mollitia consequatur adipisci at, laboriosam necessitatibus facere sit maxime, nemo placeat dolore consectetur suscipit dignissimos ullam, exercitationem quo! Dolorum ipsum libero il..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod provident dignissimos veritatis rem a dolores aperiam ex. Maiores obcaecati nulla, dolor unde praesentium repellat nemo magni temporibus? Et, esse? Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nobis, provident nam delectus vel ea odit, veniam ullam similique tenetur, magni dolore commodi possimus aliqu..

index.html 파일을 위와 같이 작성하자! body{ margin: 0; padding: 0; background-color: #0e1111; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .window{ width: 500px; height: 300px; background-color: wheat; transition: .5s; } .window:hover{ width: 100vw; height: 100%; } style.css 파일을 위와 같이 작성하자! 핵심은 슬라이드 이미지를 감싸고 있는 컨테이너인 body 요소에 플럭스박스를 적용하고 justify-content 와 alig..

연습과제 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)..

* while 반복문 while (condition) { // 코드 // '반복문 본문(body)'이라 불림 } 조건(condition) 이 truthy 이면 반복문 본문의 코드가 실행된다. 반복문 본문이 한번 실행되는 것을 반복(iternation)이라고 한다. let i = 0; while (i < 3) { // 0, 1, 2가 출력됩니다. alert( i ); i++; } 해당 반복문은 i 값을 1씩 증가시켜가면서 i < 3 의 조건을 만족하는 동안 i 값을 경고창에 출력한다. 해당 반복문은 세번의 이터레이션을 수행한다. let i = 3; while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥니다. alert( i ); i--; } 반복문 조건에는 모든 종류의 표현식이..

연습과제 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..

1 body{ margin: 0; height: 100vh; } .bar{ width: 50px; background-color: aqua; animation: grow 1s linear .5s forwards; position: absolute; bottom: 0; } @keyframes grow{ from{ height: 0; } to{ height: 100%; } }

body{ margin: 0; } .bg{ width: 100%; height: 100vh; background-image: url(bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; } .circle{ width: 300px; height: 300px; border-radius: 50%; background-color: gray; position: absolute; transform: translate(-50%, -50%); border: 3px solid #333; mix-blend-mode: multiply; cursor: zoom-in; filter: blur(10px); } .gray..