DEVLOG

body태그나 특정 요소의 크기를 확인해야하는 경우 상황에 따라 쓰일 수 있는 세 가지의 값이 있다. document.body.offsetWidth; document.querySelector('.classNameSomething').offsetWidth; ● offsetWidth(Height) document.querySelector('.classNameSomething').offsetWidth; document.querySelector('.classNameSomething').offsetHeight; margin을 제외한 padding값, border값까지 계산한 값 제일 많이 사용! ● offsetTop document.querySelector('.classNameSomething').offsetTo..

window 콘솔창에 window객체를 찍어보면 다양한 정보들이 찍히는데 여기에서 innerWidth, innerHeight / outerWidth, outerHeight에 대한 정보도 확인할 수 있다. 전체 창의 크기(보라색테두리)를 나타내는 outerHeight, outerWidth는 위 메뉴와 콘솔창을 포함한 전체 창의 크기를 나타낸다. 반면 실제 웹페이지가 보이는 크기(빨간색테두리)를 나타내는 innerHeight, innerWidth의 경우에는 콘솔창, 위 메뉴들을 제외하고 실제 보이는 웹페이지의 크기를 나타낸다. outerWidth보다는 innerWidth를 활용해야하는 일들이 많을것으로 생각되니 innerWidth를 기억해두쟈~

window인터페이스를 사용하여 현재 스크롤값의 위치를 확인하려면 다음과 같이 두가지의 방법이 있다. pageYOffset scrollY 두 메소드 모두 수직방향으로 스크롤된 거리를 픽셀단위로 반환하며, 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아니다. 정숫값이 필요하면 Math.round()를 사용해 반올림할 수 있다. 두 메소드는 동일한 일을 하는 친구들이지만 차이점이 있다면 구버전 환경에서 지원이 되느냐 안되느냐이다. 예를들어 IE..IE......IE................... scrollY var y = window.scrollY pageYOffset yOffset = window.pageYOffset; 일부 오래된 브라우저는 scrollY 대신 pa..

Javascript 변수선언방식인 var, let, const는 크게 다음과 같은 차이점을 갖고 있다. 재선언 재할당 스코프 var O O 함수블록단위 let X O 블록단위 const X X 블록단위 재선언 :변수를 다시 선언하는 것 var abc; let abc2; const abc3; var O, let X, const X let, const와 달리 var는 변수 재선언이 가능하기때문에 선언을 여러 번해도 에러없이 각기 다른 값이 출력할 수 있다. 이는 필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수 도 있지만, 같은 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다고 할 수 있다. 재선언이 불가능한 let과 const의 경우 변수 재선언이 이루어질 경우..