https://kelly-chui.github.io/tags/bom/Recent content in BOM on Kelly DevHugoen-usFri, 06 Jun 2025 00:00:00 +0000https://kelly-chui.github.io/posts/javascript-basics-06-browser-and-document-object/Fri, 06 Jun 2025 00:00:00 +0000https://kelly-chui.github.io/posts/javascript-basics-06-browser-and-document-object/<h2 id="브라우저-객체-모델">브라우저 객체 모델</h2> <ul> <li>웹 브라우저와 관련된 객체의 집합</li> <li>대표적인 브라우저 객체 모델 <ul> <li>window, location, navigator, history, screen, document…</li> </ul> </li> </ul> <img alt="Screenshot 2025-06-06 at 12.30.02\u202fPM.png" loading="lazy" src="https://kelly-chui.github.io/posts/javascript-basics-06-browser-and-document-object/image-001-optimized-image.webp"><h3 id="window-객체"><code>window</code> 객체</h3> <p>브라우저 기반 자바스크립트의 최상위 객체</p> <ul> <li><code>alert()</code>, <code>prompt()</code>함수 모두 window 객체의 메소드</li> <li><code>open(URL, name, features, replace)</code>메소드를 통해서 window 객체 생성 가능 <ul> <li><code>URL</code>: 열고자 하는 HTML 페이지의 URL</li> <li><code>name</code>: 윈도우 간 통신하는 데 사용하는 윈도우 이름</li> <li><code>features</code>: 윈도우 출력 모양을 지정하는 옵션 <ul> <li><code>height</code>: 새 윈도우의 높이</li> <li><code>width</code>: 새 윈도우의 너비</li> </ul> </li> <li><code>replace</code>: URL이 새로운 것인가, 기존의 문서를 대체할 것인가를 나타내는 부울리언 값</li> </ul> </li> <li>window 객체는 자신의 형태와 위치를 변경할 수 있도록 메소드 제공 <ul> <li><code>moveBy(x, y)</code>: 윈도우의 위치를 상대적으로 이동합니다.</li> <li><code>moveTo(x, y)</code>: 윈도우의 위치를 절대적으로 이동합니다.</li> <li><code>resizeBy(x, y)</code>: 윈도우의 크기를 상대적으로 지정합니다.</li> <li><code>resizeTo(x, y)</code>: 윈도우의 크기를 절대적으로 지정합니다.</li> <li><code>close()</code>: 윈도우를 닫습니다.</li> </ul> </li> </ul> <h3 id="screen-객체"><code>screen</code> 객체</h3> <p>웹 브라우저의 화면이 아닌 운영체제 화면의 속성을 가치는 객체</p>