웹 요소의 width 속성 완벽 가이드(offsetWidth, clientWidth, scrollWidth)

728x90

시작하며

웹 개발을 하다 보면 요소의 크기를 측정해야 하는 경우가 많습니다. 자주 사용되는 속성으로는 offsetWidth, clientWidth, scrollWidth가 있습니다.

이 글에서는 이 세 가지 속성의 차이점과 사용 방법에 대해 알아보겠습니다.

추가로 앞서 컨텐츠에서는 react에서 요소의 width와 height 정보를 얻는 방법을 다루었는데요. 궁금한 분들은 아래 컨텐츠들 참고 부탁드립니다.

2024.05.19 - [JavaScript/React] - react에서 요소의 width와 height 구하기

2024.05.19 - [JavaScript/React] - React에서 요소에 접근하는 방법, useRef vs getElementById

1. offsetWidth

offsetWidth는 요소의 전체 너비를 나타냅니다. 여기에는 요소의 패딩, 보더, 스크롤바(있는 경우)가 포함됩니다. 마진은 포함되지 않습니다. 주로 요소의 전체적인 크기를 알고 싶을 때 사용합니다.

const element = document.getElementById('myElement');

console.log(element.offsetWidth);

2. clientWidth

clientWidth는 요소의 내부 너비를 나타냅니다. 여기에는 패딩은 포함되지만, 보더와 스크롤바는 포함되지 않습니다. 마진도 포함되지 않습니다. 주로 콘텐츠가 표시되는 영역의 크기를 알고 싶을 때 사용합니다.

const element = document.getElementById('myElement');

console.log(element.clientWidth);

3. scrollWidth

scrollWidth는 스크롤 가능하지 않은 경우, clientWidth와 동일하게 동작합니다. 즉, 패딩은 포함되지만 보더, 스크롤바, 마진은 너비에 포함되지 않습니다. 하지만 요소가 스크롤 가능할 경우, 스크롤 가능한 영역과 패딩을 포함한 전체 콘텐츠의 너비를 의미합니다. 주로 콘텐츠가 요소의 크기를 초과할 때 사용합니다.

const element = document.getElementById('myElement');

console.log(element.scrollWidth);

결론

속성	포함 항목	제외 항목
offsetWidth	패딩, 보더, 스크롤바	마진
clientWidth	패딩	보더, 스크롤바, 마진
scrollWidth	패딩, 전체 컨텐츠 너비(스크롤 가능 영역)	보더, 스크롤바, 마진

offsetWidth, clientWidth, scrollWidth는 각각 다른 용도로 사용되며, 요소의 크기를 측정할 때 어떤 정보를 필요로 하는지에 따라 적절한 속성을 선택해야 합니다. 이 세 가지 속성을 잘 이해하고 활용하면, 웹 개발에서 요소의 크기를 보다 정확하게 다룰 수 있습니다.