프론트엔드 공부한 거 정리하기

scrollTo, scrollBy, scrollIntoView 스크롤 제어_ scrollBy : 현재 스크롤 위치를 기준으로 제어. (상대값) - scrollBy(10px, 20px) 현재 스크롤이 위치한 곳에서 가로로 10px, 세로로 20px만큼 스크롤 이동 scrollTo : 브라우저의 top, left를 기준으로 스크롤 제어 (절대값) - scrollBy(0, 20) 브라우저의 left, top에서 20px만큼 세로 스크롤 이동. - scrollBy(20, 0) 브라우저의 left, top에서 20px만큼 가로 스크롤 이동. scrollIntoView : 해당 요소가 보이는 위치로 스크롤 이동 인수로 받은 값이 true면 요소의 top을 기준, false면 요소의 bottom을 기준으로 이동 (기..

기하 프로퍼티 기하 프로퍼티는 픽셀(px) 단위로 측정. offset 요소 element의 거리 offsetParent : position이 설정되어 있는 조상 요소 반환. 없으면 body 반환 offsetTop : offsetParent 기준 top까지의 거리 offsetLeft : offsetParent 기준 left까지의 거리 요소의 크기 offsetWidth : width + padding + border + scrollbar offsetHeight : height + padding + border + scrollbar clientWidth : width + padding clientHeight : height + padding scrollTop : 세로로 스크롤되면서 가려진 영역의 높이를 반환 ..

event.clientX, Y 브라우저 기준 마우스 x, y 좌표 (스크롤 인식하지 않음) event.offsetX, Y 요소 기준 마우스 x, y 좌표 (스크롤 인식) event.pageX, Y 페이지 기준 마우스 x, y 좌표 (스크롤 인식) event.screenX, Y 디바이스 기준 마우스 x, y 좌표 (스크롤과 상관없음)

submit 이벤트와 메서드 정보를 검증 후 서버로 전송하기 때문에 클릭할 버튼에 적용 x 폼 요소에 적용 .submit() : 메서드. onsubmit : submit 속성 addEventListener('submit', 콜백함수) : submit 이벤트 속성 checkbox & radio 이벤트와 메서드 정보를 검증 후 서버로 전송하기 때문에 클릭할 버튼에 적용 x 폼 요소에 적용 'change' : 이벤트, 폼 요소 상태 변경이 끝날 때 (input, button, select) check 관련 속성 .checked : 체크 상태를 true, false로 반환 select 관련 속성 .selectedIndex : select option의 인덱스 번호 = 선택된 option의 인덱스 반환. .opt..

form 요소 탐색하기 form은 document.forms의 구성원으로 이름이나 순서를 지정해 탐색할 수 있다. document.forms[0] // 문서 내 첫 번째 폼 document.forms.[name속성] // 해당 name을 속성으로 가진 form 폼의 요소도 forms.elements로 탐색할 수 있다. const form = document.forms[0] // 문서의 첫번째 폼 탐색 const input = form.elements.[요소name] // 해당 name 속성을 가진 요소 탐색 radio 버튼은 name이 같아야하기 때문에 여러 개를 제어해야하는 상황이 생긴다. 탐색할 요소가 여러 개인 경우 유사 배열로 반환하는 성격을 이용해 작성할 수 있다. const form = doc..

객체가 원시데이터와 다른 점은 원시데이터는 값 그대로를 저장하고 복사하는 반면 객체는 참조에 의한 복사로 기존 객체에 저장된 값을 참조할 수 있는 값이 복사된다는 것이다. 예를 들어 변수를 복사할 때 메모리는 fruit라는 변수와 그에 대한 값 apple을 한 공간에 저장하고 복사된 변수 red와 값 apple 또한 메모리의 한 공간에 저장된다. 즉, 상자도 두개 내용물도 두개가 되는 것. apple이 담긴 fruit 상자 apple이 담긴 red 상자 하지만 객체는 다르다. 애초에 생성될 때 변수 fruit는 메모리의 어느 공간에 저장되고 name:apple이 되는 객체와 프로퍼티를 참조할 수 있는 값이 저장된다. 즉, 변수 자체에 객체가 담겨있는 게 아니라 변수는 단지 객체에 접근할 수 있는 권한과 ..

자바스크립트는 계속 발전하고 진화하는 언어로 기존에 없던 기능들이 계속 추가된다. 추가된 기능들은 분석을 거쳐 ECMAScript의 명세서에 등록되는데 먼저 새롭게 생겼다고 해서 먼저 등록되지는 않는다고 함. 바벨 명세서에 등록이 된 후에 재빠르게 새로운 기능을 활용하기 위해 코드를 작성한다 해도 모든 브라우저에서 지원하는 것은 아니기에 구현이 가능한 코드로 바꿔줘야 제대로 작동한다. 이 경우 사용하는 것을 바벨이라고 한다. 트랜스파일러 바벨은 코드를 번역해주는 트랜스파일러 프로그램으로 개발자의 컴퓨터에서 작동하며 작성한 코드를 구 표준을 준수하는 코드로 재작성해주는 역할을 한다. 웹팩(webpack) 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줌. 폴리필(po..

이벤트란? - 무언가 일어났다는 신호 시스템에서 일어나는 사건(action) 혹은 발생(occurrence) 표준 이벤트 모델 eventTarget.addEventListener() 대상 : Element, Document, Window, XMLHttpRequest ... .addEventListener('이벤트 이름', 콜백함수 event handler); 고전 이벤트 모델 .onclick(function(){}) onblur() onmouseenter... (on 접두어) .on('click', function(){}) .on('blur', function(){}) .on('mouseenter', function(){}) ... 인라인 이벤트 모델 DOMContentLoad 자바스크립트는 위에서 아래..

JS에서의 클래스 제어 js에서의 클래스 제어 버튼 텍스트1 텍스트2 텍스트3 .classList.add() : 클래스 속성 추가 document.body.classList.add('bg') const btn = document.querySelector('.btn') btn.classList.add('style') .classList.remove() : 클래스 속성 삭제 btn.classList.remove('style'); .classList.toggle() : add, remove의 반복 btn.addEventListener('click', () => btn.classList.toggle('style')) // btn을 클릭하면 style 추가 한번 더 클릭하면 style 제거 .classList.c..

HTML 표준 모델에서 data - 사용자 정의 이름 data-color, data-name, data-size ... JavaScript에서 .dataset 사용자 정의 속성에 접근 가능 .dataset.color, .dataset.name, .dataset.size, ...