offset offset은 원하는 요소의 위치값을 반환하는 메서드이다. offsetTop, offsetLeft, offsetRight, offsetBottom으로 나누어 졌으며 각각 위,아래,왼쪽,오른쪽으로 부터의 위치를 의ㅣ한다. 이때 기준이 가까운 부모의 기준으로 상대경로을 반환하기에 컨텐츠의 높이가 유연하게 움직일 경우나, 부모 요소중에 relative 스타일을 갖는다면 정확하지 않은 값을 가져올 수 있기에 주의가 필요하다. const d = document.getElementById("div1"); const topPos = d.offsetTop;//id가 div1의 좌표정보 할당 offsetWidth/Height offsetWidth/Height는 margin을 제외한, padding값, bor..
DOM
DOM이란? JavaScript로 HTML을 조작할 수 있게 하는 모델. DOM을 사용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 할 수 있다. DOM 트리구조로 되어 있으며, 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복된다. JS에서 요소를 생성,제거,변경,조회(CRUD)등을 할 때는 document 객체의 메서드를 사용한다. HTML에 JavaScript를 적용하기 HTML에 createElement html에 새로운 요소를 만드는 document 객체의 메서드 그 자체로 사용할 수도 있지만, 생성된 요소를 제어하기 편리하도록 변수에 할당하여 선언한다. 후술 할 append 같은 메서드로 위치를 조정하지 않으면, 아무것도 연결이 되어있지 않은 상태가 된다. co..
더보기 오늘은 JavaScript Koans에서 알게된 것을 심화 학습할 것이다. 주요 내용으로는 arguments this문 spread의 객체 적용 순서와 중첩 객체의 사용을 다루어 볼 것이다. 이 문서는 추후 개별 문서로 분리될 예정이다 arguments JS는 다른 언어와 다르게 유연한 부분이 많다. 그 중 하나가 함수에 전달한 인자의 갯수와 매개변수가 서로 불일치 해도 된다는 것이다. 매개변수의 범위를 초과한 인자들은 무시하고, 인자의 수가 매개변수보다 작을 때는 undefined로 표시된다. 더보기 call(a,b,c){}일때 1,2,3,4,5,6을 주면 1,2,3까지만 받고 나머지는 무시, 1,2만주면 a,b는 1,2을 받고 c는 undefined 즉, 인자의 수에 따라 함수가 작동되는 것이..
더보기 ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다. 뒤에 숫자는 버전을 뜻하고 ES5는 2009년 ES6는 2015년에 출시되었다. ES6에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었는데 let,const 템플릿 리터럴 등 모두 ES6이후의 문법이다. 오늘은 실제 많이 쓰이는 ES6문법인 spread/rest문법,destructing, 화살표 함수에 대해 알아본다. 1. spread/rest 문법 spread: 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용. 배열 앞에 ...붙여서 사용. 배열끼리 합치거나 복사할 때 사용가능. 객체도 이용가능. const numbers1 = [1, 2, 3]; c..