오늘도 디벅잉

🐣 브라우저의 크기 측정 // 모니터 크기 가로, 세로 window.screen.width, window.screen.height // 브라우저 창 전체 폭, 높이 window.outerWidth, window.outerHeight // 브라우저 창 내부 폭, 높이 (작업표시줄 제외됨) window.innerWidth, window.innerHeight // 브라우저 창 내부 폭, 높이 (작업표시줄, 스크롤 부분 제외됨, 실제 눈에 보이는 부분만 측정) document.documentElement.clientWidth, document.documentElement.clientHeight 브라우저의 좌표 다루기 clientX/Y: 브라우저 창 내부 보이는 부분 기준으로 측정 pageX/Y: 스크롤이 여부랑..

🎯 addEventListener 메서드 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 대상으로는 Element, Document, Window 등이 있다. 대상.addEventListener(type, function () {}); type은 반응할 이벤트 유형이다. 주요 이벤트 유형 "click", "focus", "resize", "scroll", "wheel", "mousemove" 등이 있다. addEventListener 함수의 콜백 함수의 this addEventListener 함수의 콜백 함수에 화살표 함수를 정의하면 화살표 함수 내부의 this가 Window를 가리킨다. 콜백 함수 내에서 대상과 관련한 프로그래밍을 위해 this를 사용할 경우, funciton 키워드를 사..

🐣 Web APIs란? 브라우저에 필요한 복잡한 기능들을 쉽게 사용할 수 있도록 만들어 놓은 것이다. 분류 1) Browser APIs: 브라우저에 내장되어 있는 API 2) Third-party APIs: 내장되어 있지 않은 API, 카카오 로그인 API 등이 해당 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction Introduction to web APIs - Learn web development | MDN At this point, you should have a good idea of what APIs are, how they work, and what you can do with ..

🐣 Window.scrollY Window 인터페이스의 scrollY 속성값으로 현재 스크롤 위치의 상단 값을 알 수 있다. let y = window.scrollY offsetWidth vs getBoundingClientRect() HTML 요소가 transform 되었을 경우 offsetWidth 는 transform된 사이즈를 반환하고 getBoundingClientRect()는 transform 되기 전의 사이즈를 반환한다. https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

🐣 background vs background-image CSS 속성중 background와 background-image가 헷갈렸는데 background는 background-image, background-position, background-size 등을 모두 아우르는 shorthand 개념이었다! background: center / cover url("./images/css.png"); = background-position: center; background-size: cover; background-image: url("./images/css.png"); pointer-events 클릭이벤트를 발생시키면 안되는 HTML 요소는 pointer-events 속성값을 none으로 지정한다. po..

CSS 텍스트 회전 1. display 속성값을 inline-block 으로 설정한다(inline 요소는 회전 불가능). 2. transform 속성값으로 rotate 값을 대입한다(rotate === rotateZ). span { display: inline-block; transform: rotate(180deg); } CSS 문제 해결 1. Error: 화면 높이 🆖 현황 - height 속성을 100%로 맞추었지만 해당 요소의 컨테이너 밖으로 넘치게 되었음 🔑 해결방안 - header의 높이만큼 padding-bottom 속성값을 부여 .window { background-color: white; width: 80%; height: 80%; border-radius: 8px; padding-bot..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 3. 문자열(String) 3-1. length 프로퍼티 'Hello'.length; // -> 5 '안녕하세요!'.length; // -> 6 3-2. chartAt 메서드 const str = 'Hello!'; for (let i = 0; i < str.length; i++) { console.log(str.charAt[i]); // H e l l o } 3-3. slice 메서드 - 대상 문자열 변경 X const str = 'hello world'; // 0번째 인덱스부터 5번째 인덱스까지 반환 (5번째 인덱스는 미포함) str.slice(0, 5);..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 2. 정규표현식(RegExp) *정규표현식의 표현 방법 - /정규표현식/플래그 (ex. /[a-z]/g) 2-1. 플래그 i(Ignore case) - 대소문자를 구별하지 않고 한 번만 검색 (전체 검색시 g와 같이 사용 - /ig) g(Global) - 대소문자를 구별하여 전체를 검색 (대소문자 구별하지 않으려면 i와 같이 사용 - /ig) 2-2. 반복검색 - {} const target = 'A AA BB Aa Bb AAA'; // 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다. const regExp = /A{1,2}/g; // 매칭..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 1. 배열(Array) 1-1. 순회 for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 1-2. 삭제 const arr1 = [1, 2]; let result = arr1.pop(); console.log(result); // 2 console.log(arr1); // [1] // pop 메서드는 원본 배열을 변경함 const arr2 = [1, 2, 3, 4, 5]; arr2.splice(1, 2); console.log(arr2); // [1, 4, 5] console.log(arr2.lengt..

목차 객체란? 객체 리터럴에 의한 객체 생성 Object 생성자 함수에 의한 객체 생성 생성자 함수에 의한 객체 생성 Object.create 메서드에 의한 객체 생성 객체(Object)란? 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합 프로퍼티(property) - 데이터 값 메소드(method) - 데이터를 참조하고 조작하는 동작(behavior), 프로퍼티 값이 함수인 경우 프로퍼티 ⊃ 메소드 객체 리터럴에 의한 객체 생성 ※ 리터럴 - 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법 var person = { name: 'Park', sayHello: function() { console.log(`Hello! My ..