전체 글 (205) 썸네일형 리스트형 1.10 브라우저 창 사이즈와 스크롤 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info 브라우저 창이 차지하는 너비와 높이?스크롤 때문에 보이지 않는 영역을 포함하여 문서 전체가 차지하는 너비와 높이?document.documentElement 태그와 상응하는 요소로 다양한 메서드를 지원한다.브라우저 창의 너비와 높이document.documentElement 의 clientWidth 와 clientHeight window 객체가 아닌 document.documentElement 를 쓰는 이유window 객체 역시 innerWidth와 innerHeight 프로퍼티를 지원한다.스크롤바가 생기면 스.. 1.9 요소 사이즈와 스크롤 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info 자바스크립트는 요소의 너비나 높이 같은 기하 정보 관련 프로퍼티를 지원한다.→ 이런 프로퍼티는 요소를 움직이거나 특정 좌표에 위치시킬 때 사용할 수 있다.샘플 요소margin은 요소 자체에 포함되지 않고, 관련한 특수 자바스크립트 프로퍼티도 없어서 CSS 프로퍼티에 추가하지 않음 ...텍스트... 스크롤바요소에 스크롤바가 생기면 복잡한 상황이 생길 수 있다.몇몇 브라우저에서 콘텐츠 영역 너비(contents width) 일부를 빌려 스크롤 바를 위치시키기 때문샘플 예시에서 스크롤바가 없었다면 콘텐츠 영역 .. 1.8 스타일과 클래스 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info 요소에 스타일을 적용할 수 있는 방법CSS에 클래스를 만들고, 요소에 처럼 클래스 추가하기 처럼 프로퍼티를 style에 바로 쓰기자바스크립트를 사용하면 클래스와 style 프로퍼티 둘 다 수정할 수 있다.style은 클래스를 ‘다룰 수 없을 때’만 사용해야 한다.→ 유연성이 확보되어 유지보수가 쉬워진다.style은 자바스크립트를 사용해 요소의 좌표를 동적으로 계산하고, 계산한 좌표를 설정해주고자 할 때 사용하면 좋다.let top = /* 복잡한 계산식 */;let left = /* 복잡한 계산식 */;ele.. 1.7 문서 수정하기 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info DOM 조작: ‘생동감 있는’ 웹페이지 만드는 방법요소 생성하기DOM 노드를 만들 때 사용하는 메서드document.createElement(tag)태그 이름을 사용해 새로운 요소 노드를 만든다.let div = document.createElement('div');document.createTextNode(text)주어진 텍스트(text)를 사용해 새로운 텍스트 노드를 만든다.let textNode = document.createTextNode('안녕하세요.');메시지 생성// 1. 요소 만들기let div.. 1.6 속성과 프로퍼티 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info 브라우저는 웹페이지를 만나면 HTML을 읽어(파싱) DOM 객체를 생성한다.요소 노드(element node)에서 대부분의 표준 HTML 속성은 DOM 객체의 프로퍼티가 된다.아래와 같이 사용할 수 있다.body.id = “page”→ 하지만 항상 1대1로 매핑되지는 않는다.속성 – HTML 안에 쓰임프로퍼티 – DOM 객체 안에 쓰임DOM 프로퍼티DOM 프로퍼티는 내장 프로퍼티도 많지만 자신만의 프로퍼티도 만들 수 있다.DOM 노드는 자바스크립트 객체이다.document.body에 새로운 프로퍼티, 메서드 .. 1.5 주요 노드 프로퍼티 (2) 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info innerHTML로 내용 조작하기innerHTML 프로퍼티를 사용하면 요소 안의 HTML을 문자열 형태로 받아올 수 있다.요소 안 HTML을 수정할 수도 있다. innerHTML과 달리 outerHTML을 사용해서 HTML을 쓸 땐 요소 자체가 바뀌지 않음대신 outerHTML은 DOM안의 요소를 교체예시를 보면 div 태그는 바뀌지 않음Hello, world!바뀌지 않는 이유는?outerHTML에서 하는 할당 연산이 DOM 요소(div)를 수정하지 않기 때문이다.할당 연산은 요소를 DOM에서 제거하고 새로운 .. 1.5 주요 노드 프로퍼티 (1) 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info DOM 노드 클래스DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다.DOM 노드는 종류에 따라 대응하는 내장 클래스가 다르다.하지만 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만,모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원한다.DOM 노드 계층각 화살표는 상속을 나타낸다.EventTarget루트에 있는 ‘추상(abstract)’ 클래스이 클래스에 대응하는 객체는 실제로 만들어지지 않음모든 DOM 노드에서 ‘이벤트’를 사용할 수 있다.Node‘추상(abstract)’ 클래스.. 1.4 getElement*, querySelector*로 요소 검색하기 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info 웹 페이지 내에서 요소들이 가까이 붙어있지 않은 경우 원하는 요소 노드에 접근하는 방법document.getElementById 혹은 id를 사용해 요소 검색 Element id 값에 하이픈(-)이 있는 경우 Element id를 따서 만들어진 전역변수를 요소 접근 시 사용하지 말아라.id 에 대응하는 전역변수는 명세서의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작이다.브라우저는 스크립트의 네임스페이스와 DOM의 네임스페이스를 함께 사용할 수 있도록 한다.하지만 이름이 .. 이전 1 2 3 4 ··· 26 다음
