---
title: DOMRect
slug: Web/API/DOMRect
tags:
  - API
  - DOM
  - DOM Reference
  - DOMRect
  - Geometry
  - Geometry Interfaces
  - Interface
  - Rectangle
  - Reference
browser-compat: api.DOMRect
---
<p>{{draft}}{{APIRef("Geometry Interfaces")}}</p>

<p><strong><code>DOMRect</code></strong>는 사각형의 크기와 위치를 나타냅니다.</p>

<p><code>DOMRect</code>가 표현하는 박스의 타입은 이를 반환한 메서드나 속성에 의해 정해집니다. 예를 들어, WebVR API의 {{domxref("VREyeParameters.renderRect")}}는 렌더링되어야 할 헤드 마운트 디스플레이의 한쪽 눈에 대한 비주얼을 <a href="/ko/docs/Web/API/HTMLCanvasElement">canvas</a>의 뷰포트로 지정합니다.</p>

<p>부모인 {{domxref("DOMRectReadOnly")}}로부터 상속받습니다.</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Constructor">생성자</h2>

<dl>
 <dt>{{domxref("DOMRect.DOMRect","DOMRect()")}}</dt>
 <dd>새로운 <code>DOMRect</code> 객체를 생성합니다.</dd>
</dl>

<h2 id="Properties">속성</h2>

<p><em><code>DOMRect</code>는 부모인 {{domxref("DOMRectReadOnly")}}로부터 상속받습니다. 차이점은 DomRect가 더 이상 읽기 전용이 아니라는 것입니다.</em></p>

<dl>
 <dt>{{domxref("DOMRectReadOnly.x")}}</dt>
 <dd><code>DOMRect</code>의 오리진(보통 사각형의 왼쪽 상단 코너) x 좌표.</dd>
 <dt>{{domxref("DOMRectReadOnly.y")}}</dt>
 <dd><code>DOMRect</code>의 오리진(보통 사각형의 왼쪽 상단 코너) y 좌표.</dd>
 <dt>{{domxref("DOMRectReadOnly.width")}}</dt>
 <dd><code>DOMRect</code>의 너비.</dd>
 <dt>{{domxref("DOMRectReadOnly.height")}}</dt>
 <dd><code>DOMRect</code>의 높이.</dd>
 <dt>{{domxref("DOMRectReadOnly.top")}}</dt>
 <dd><code>DOMRect</code>의 상단 좌표를 반환합니다(<code>height</code>가 음수라면 <code>y</code>, 또는 <code>y + height</code>와 같은 값을 갖습니다).</dd>
 <dt>{{domxref("DOMRectReadOnly.right")}}</dt>
 <dd><code>DOMRect</code>의 오른쪽 좌표를 반환합니다(<code>width</code>가 음수라면 <code>x + width</code>, 또는 <code>x</code>와 같은 값을 갖습니다).</dd>
 <dt>{{domxref("DOMRectReadOnly.bottom")}}</dt>
 <dd><code>DOMRect</code>의 하단 좌표를 반환합니다(<code>height</code>가 음수라면 <code>y + height</code>, 또는 <code>y</code>와 같은 값을 갖습니다).</dd>
 <dt>{{domxref("DOMRectReadOnly.left")}}</dt>
 <dd><code>DOMRect</code>의 왼쪽 좌표를 반환합니다(<code>width</code>가 음수라면 <code>x</code>, 또는 <code>x + width</code>와 같은 값을 갖습니다).</dd>
</dl>

<h2 id="Methods">메서드</h2>

<p><em><code>DOMRect</code>는 부모인 {{domxref("DOMRectReadOnly")}}로부터 메서드를 상속받습니다.</em></p>

<h2 id="Static_methods">정적 메서드</h2>

<dl>
 <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt>
 <dd>주어진 위치와 면적을 갖는 새로운 <code>DOMRect</code> 객체를 생성합니다.</dd>
</dl>

<h2 id="Specifications">명세</h2>

{{Specifications}}

<h2 id="Browser_compatibility">브라우저 호환성</h2>

<p>{{Compat}}</p>

<h2 id="See_also">같이 보기</h2>

<ul>
 <li>{{domxref("DOMPoint")}}</li>
</ul>