Mong dev blog

🤔 이번 시간에는 배열의 값에 접근할 수 있는 2가지 방법(index, array.at())에 대해 알아보았다! 1. index로 접근 배열에서 인덱스에 해당하는 값에 접근할 때는 arr[index]방식을 사용할 수 있다. const arr = ['apple', 'banana']; arr[1]; // 'banana' 만약 배열의 마지막 값에 접근하고 싶다면, arr.length() -1 을 사용해야 한다. const arr = ['apple', 'banana']; arr[arr.length - 1]; // 'banana' 그런데 매번 배열의 마지막 값을 접근할 때, arr.length - 1을 해야 한다니..조금 번거롭..

🤔 화면 크기나 특정 요소의 크기가 변할 때, 그 변화를 감지할 수 있을까? 이번 시간에는 화면과 요소의 크기 변화를 감지하는 방법을 알아보았다. 1. resize, 브라우저 크기에 반응 1) resize 이벤트란? window.addEventListener("resize", function() { // window resize시 처리 }) resize 이벤트는 브라우저의 크기가 변경될 때 발생한다. 만약, 브라우저 크기 변화에 따른 dom의 변경 크기를 구하려면 getBoundingClientRect(), getComputedStyle()를 사용해줘야한다. 2) 예시 아래 예시는 브라우저 크기를 변경한 뒤, div의 변화된 너비를 화면에 출력했다. See the Pen resize example by ..

😃 이번시간에는 JS로 요소의 스타일에 접근하는 방법인, window.getComputedStyle와 Element.style에 대해 알아보았다! 1. 스타일에 접근하는 방법 1) getComputedStyle()? (1) 형태 window.getComputedStyle(el[, pseudo-class]); getComputedStyle는 요소(el)의 모든 CSS 속성값을 객체 형태(CSSStyleDeclaration)로 반환해준다. 첫번째 인자로는 요소(el), 두번째 인자로는 의사요소(:checked, :first-child)을 넘길 수 있다. 두번째 인자는 옵션이며 기본값은 null이지만, 특정 브라우저(Firefox 4, SeaMonkey 2.1) 전에는 필수값이므로, 값을 꼭 넘겨줘야한다. (..