HTML DOM clientWidth 속성 완벽 정리 – 요소의 실제 표시 너비 구하기

HTML DOM의 clientWidth 속성은 HTML 요소가 화면에 실제로 표시되는 너비(viewable width)를 반환하는 속성입니다. 이 값에는 패딩(padding)은 포함되지만, 테두리(border), 스크롤바(scrollbar), 마진(margin)은 제외됩니다.

또한 요소 내부의 콘텐츠가 넘쳐흐르더라도(overflow) 요소 자체의 너비만을 기준으로 값을 반환한다는 점도 기억해 두면 좋습니다.

clientWidth 속성 문법(Syntax)

clientWidth 속성의 기본 사용 문법은 다음과 같습니다.

element.clientWidth

clientWidth 예제 코드

HTML DOM clientWidth 속성을 활용한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
#divStyle {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 15px;
    border: 5px solid blue;
    background-color: lightgreen;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 div 요소의 너비를 확인할 수 있습니다.</p>
<button onclick="getWidth()">GET WIDTH</button>
<div id="divStyle">
<b>샘플 div 요소</b>
</div>
<p id="Sample"></p>
<script>
    function getWidth() {
        var x = document.getElementById("divStyle");
        var txt = "패딩을 포함한 너비: " + x.clientWidth + "px";
        document.getElementById("Sample").innerHTML = txt;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM clientWidth 속성 완벽 정리 – 요소의 실제 표시 너비 구하기

GET WIDTH 버튼을 클릭하면 아래와 같이 div 요소의 너비 값이 표시됩니다.

HTML DOM clientWidth 속성 완벽 정리 – 요소의 실제 표시 너비 구하기

예제 코드 상세 설명

위 예제에서 각 부분이 어떻게 동작하는지 단계별로 살펴보겠습니다.

1. CSS 스타일 정의

먼저 id가 “divStyle”인 div 요소를 만들고, 해당 id 선택자를 통해 스타일을 적용했습니다.

#divStyle {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 15px;
    border: 5px solid blue;
    background-color: lightgreen;
}

여기서 주목할 점은 패딩이 10px, 테두리가 5px, 마진이 15px로 설정되어 있다는 것입니다. clientWidth는 이 중 패딩만 포함하여 계산하기 때문에 결과값은 200px + 10px + 10px = 220px가 됩니다.

2. div 요소 생성

너비를 측정할 대상이 되는 div 요소입니다.

<div id="divStyle">
<b>샘플 div 요소</b>
</div>

3. GET WIDTH 버튼 생성

버튼을 클릭하면 getWidth() 함수가 실행되도록 onclick 이벤트 핸들러를 연결했습니다.

<button onclick="getWidth()">GET WIDTH</button>

4. getWidth() 함수 동작 원리

getWidth() 함수는 getElementById() 메서드를 사용해 <div> 요소를 가져와 변수 x에 할당합니다. 그다음 x에 clientWidth 속성을 적용해 요소의 너비를 구하고, 안내 문구를 덧붙여 변수 txt에 저장합니다. 마지막으로 innerHTML 속성을 이용해 txt 변수의 내용을 <p> 태그 안에 출력합니다.

function getWidth() {
    var x = document.getElementById("divStyle");
    var txt = "패딩을 포함한 너비: " + x.clientWidth + "px";
    document.getElementById("Sample").innerHTML = txt;
}

마무리 정리

clientWidth 속성은 반응형 레이아웃 작업이나 요소 크기에 따른 동적 UI 처리 시 매우 유용하게 활용됩니다. 비슷한 속성으로 offsetWidth(테두리 포함), scrollWidth(스크롤되는 전체 콘텐츠 너비) 등이 있으니, 상황에 맞게 적절한 속성을 선택해 사용하시기 바랍니다.