HTML DOM getBoundingClientRect() 메서드 – 뷰포트 기준 요소의 위치와 크기 구하기

getBoundingClientRect() 메서드는 HTML DOM에서 특정 요소의 크기와 위치를 뷰포트(viewport)를 기준으로 반환하는 데 사용됩니다. 이 메서드는 DOMRect 객체를 반환하며, 이 객체는 left, top, right, bottom, x, y, width, height 총 여덟 개의 속성을 포함하고 있습니다. 특히 반환되는 경계 사각형(bounding rectangle)의 좌표는 스크롤 위치가 변경되면 함께 변한다는 점을 기억해야 합니다.

문법(Syntax)

getBoundingClientRect() 메서드의 기본 문법은 다음과 같습니다.

element.getBoundingClientRect()

메서드를 호출하면 별도의 매개변수 없이 해당 요소의 경계 정보를 담은 DOMRect 객체가 즉시 반환됩니다.

예제(Example)

이제 getBoundingClientRect() 메서드의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function RectInfo() {
        document.getElementById("Sample").innerHTML="";
        var d = document.getElementById("DIV1");
        var Rect = d.getBoundingClientRect();
        rl = Rect.left;
        rt = Rect.top;
        rw = Rect.width;
        rh = Rect.height;
        document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
    }
</script>
<style>
    #DIV1{
        width:350px;
        height:250px;
        border:2px solid blue;
        color:red;
    }
</style>
</head>
<body>
<h1>getBoundingClientRect() example</h1>
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<br>
<button onclick="RectInfo()">GET INFO</button>
<p id="Sample"></p>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM getBoundingClientRect() 메서드 – 뷰포트 기준 요소의 위치와 크기 구하기

여기서 GET INFO 버튼을 클릭하면 아래와 같이 요소의 위치와 크기 정보가 표시됩니다.

HTML DOM getBoundingClientRect() 메서드 – 뷰포트 기준 요소의 위치와 크기 구하기

코드 상세 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

1. 컨테이너 div 생성

먼저 높이 200px, 너비 300px로 지정된 외부 div를 만들었습니다. 이 div에는 overflow 속성이 auto로 설정되어 있어, 내부 콘텐츠가 div 영역을 초과하면 스크롤바가 자동으로 생성됩니다. 그리고 그 안에는 id가 "DIV1"인 또 다른 div가 포함되어 있으며, 이 요소에는 다음과 같은 스타일이 적용되어 있습니다.

#DIV1{
    width:350px;
    height:250px;
    border:2px solid blue;
    color:red;
}
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>

내부 DIV1의 크기(350px × 250px)가 외부 컨테이너(300px × 200px)보다 크기 때문에 스크롤바가 나타나며, 스크롤에 따라 getBoundingClientRect() 값이 어떻게 달라지는지 확인할 수 있는 좋은 예제입니다.

2. 버튼 클릭 이벤트

다음으로 사용자가 클릭하면 RectInfo() 함수를 실행하는 GET INFO 버튼을 생성했습니다.

<button onclick="RectInfo()">GET INFO</button>

3. RectInfo() 함수의 동작

RectInfo() 함수는 getElementById() 메서드를 사용해 <div> 요소를 가져와 변수 d에 할당합니다. 이후 변수 d에 getBoundingClientRect() 메서드를 호출하여 해당 div 요소의 정보를 담고 있는 DOMRect 객체를 반환받고, 그 결과를 변수 Rect에 저장합니다.

그다음 DOMRect 객체의 left, top, width, height 속성을 활용해 뷰포트를 기준으로 한 요소의 위치와 크기를 계산합니다. 최종적으로 이 정보는 innerHTML 속성을 통해 id가 "Sample"인 <p> 태그에 출력됩니다.

function RectInfo() {
    document.getElementById("Sample").innerHTML="";
    var d = document.getElementById("DIV1");
    var Rect = d.getBoundingClientRect();
    rl = Rect.left;
    rt = Rect.top;
    rw = Rect.width;
    rh = Rect.height;
    document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
}

정리

getBoundingClientRect() 메서드는 요소의 실제 화면상 위치와 크기를 파악할 때 매우 유용한 도구입니다. 특히 무한 스크롤 구현, 요소가 화면에 보이는지 감지하는 스크롤 애니메이션, 드래그 앤 드롭 기능 등 다양한 웹 개발 시나리오에서 폭넓게 활용되므로, DOMRect 객체의 각 속성이 의미하는 바를 정확히 이해해 두는 것이 좋습니다.