JavaScript와 CSS로 패딩을 제외한 요소 width, height 계산하기

시작하며

padding을 제외한 영역

웹 개발을 하다 보면 패딩을 제외한 순수 contents 영역의 width, height 계산이 필요한 경우가 있는데요. 이 글에서는 두 가지 방법을 통해 패딩을 제외한 요소의 너비를 계산하는 방법을 소개하려고 합니다.

 

JavaScript와 CSS로 패딩을 제외한 요소 width, height 계산하는 방법

1. clientWidth에서 padding 빼기

이 방법은 간단하게 요소의 clientWidth에서 패딩 값을 빼는 방식입니다. clientWidth는 요소의 내부 너비를 반환하지만, 패딩을 포함한 값이기 때문에 패딩을 제외한 너비를 계산하려면 패딩 값을 빼야 합니다.

예제 코드

const parent = document.querySelector('.parent');
const style = window.getComputedStyle(parent);
const paddingLeft = parseInt(style.paddingLeft);
const paddingRight = parseInt(style.paddingRight);
const actualWidth = parent.clientWidth - paddingLeft - paddingRight;

console.log('패딩을 제외한 너비:', actualWidth);

2. 자식 요소들을 감싸는 추가적인 div 만들기

이 방법은 자식 요소들을 감싸는 추가적인 wrapper 요소를 만들어 패딩의 영향을 받지 않도록 하는 방식입니다. 보통 패딩을 제외한 요소의 width, height가 궁금한 건 자식 요소가 여러 개라서 콘텐츠 영역을 특정하기 어려울 때 발생합니다. 그렇기 때문에 자식 요소들을 감싸는 추가적인 wrapper 요소를 만들어 준다면, 간단하게 패딩을 제외한 요소의 width, height를 알 수 있습니다. 다만 이 방법은 구조적으로 더 깔끔할 수 있지만, 추가적인 HTML 요소가 필요하기 때문에 하위 요소들의 속성이 변경될 수 있다는 점에 유의하셔야 합니다.

예제 코드

<div class="parent" style="padding: 20px;">
    <div class="wrapper">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

결론

두 가지 방법 모두 상황에 따라 유용하게 사용할 수 있습니다. 간단한 계산이 필요한 경우에는 첫 번째 방법을, 구조적으로 더 깔끔한 해결책이 필요한 경우에는 두 번째 방법을 사용하면 좋습니다. 여러분의 프로젝트에 맞는 방법을 선택하여 사용해 보세요!