FEDev Story

요소의 위치를 생각할 때는 사실 조금 더 복잡해진다. 문서가 브라우저의 크기보다 큰 경우는 스크롤이 만들어지는데 스크롤에 따라서 위치의 값이 달라지기 때문이다. 이를 이해하기 위해서는 우선 viewport에 대한 이해가 선행되어야 한다.viewport의 좌표위의 그림처럼 뷰포트는 문서의 내용 중 사용자에게 보여주는 영역을 의미한다. 이에 따라서 문서의 좌표가 있고 뷰포트의 좌표가 있다. 위에서 살펴본 getBoundingClientRect는 viewport의 좌표를 사용한다. 아래 예제를 실행해보면 1초에 한번씩 getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 출력된다. (실행) Coding 이를 통해서 알 수 있는 것은 getBoundingClientRe..

우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. (실행) Coding 화면에 표시된 모습은 아래와 같다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect이다. 이를 콘솔에서 실행한 결과는 아래와 같다. 즉 엘리먼트의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 된다는 것을 알 수 있다. getBoundingClientRect의 width 값을 IE는 제공하지 않는다.만약 엘리먼트가 중첩되어 있다면 어떻게 될까? 위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBou..

텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작과 관련된 API들의 목록이다.appendData() - 텍스트 노드의 끝에 파라미터로 전달된 데이타를 추가한다.deleteData() - 텍스트 노드에서 첫번째 파라미터에서 시작해서 두번째 파라미터까지 텍스트를 선택해 삭제한다.insertData() - 텍스트 노드에서 첫번째 파라미터의 위치에 두번째 파라미터에 전달된 데이타를 삽입한다.replaceData() - 텍스트 노드에서 첫번째 파라미터에서 두번째 파라미터까지 텍스트를 선택해서 세번째 파라미터에 전달된 데이타로 교체한다.substringData() - 텍스트 노드에서 첫번째 파라미터에서 시작해서 두번째 파라미터까지 텍스트를 선택..