[JS] 브라우저 요소 사이즈 확인하기

📌 offsetHight / offsetWidth: 요소의 전체 크기

• offsetHeight: 요소의 전체 높이를 반환한다. 패딩과 보더를 포함한 높이로, 스크롤 바와 마진은 제외된다.
• offsetWidth: 요소의 전체 너비를 반환한다. 마찬가지로 패딩과 보더를 포함한 너비로, 스크롤 바와 마진은 제외된다.

 

✅ 예시

const element = document.getElementById('target');
console.log(element.offsetHeight); // 요소의 전체 높이 (패딩, 보더 포함)
console.log(element.offsetWidth);  // 요소의 전체 너비 (패딩, 보더 포함)

 

활용 예시

1. 전체 크기 계산 후 레이아웃 조정: 페이지 내에서 특정 요소의 전체 크기를 계산하고, 이를 기준으로 다른 요소의 위치나 크기를 동적으로 조정할 수 있다. 예를 들어, 고정된 높이로 동작하는 헤더의 높이를 구하고, 그 아래에 위치한 컨텐츠의 크기를 조정할 수 있다.
2. 반응형 레이아웃: 요소가 화면 크기에 따라 반응하도록 만들 때, offsetHeight 와 offsetWidth 값을 기반으로 다른 요소들의 크기를 동적으로 변경할 수 있다. 예를 들어, 두 개의 컬럼을 화면 크기에 맞춰 자동으로 크기를 변경할 수 있다.

 

---

📌 clientHeight / clientWidth: 스크롤 바를 제외한 내부 크기

• clientHeight: 요소의 내부 컨텐츠 높이와 패딩만을 포함한다. 보더, 스크롤 바, 마진은 제외된다.
• clientWidth: 요소의 내부 컨텐츠 너비와 패딩만을 포함한다. 마찬가지로 보더, 스크롤 바, 마진은 제외된다.

 

✅ 예시

const element = document.getElementById('target');
console.log(element.clientHeight); // 요소의 내부 높이 (패딩 포함)
console.log(element.clientWidth);  // 요소의 내부 너비 (패딩 포함)

보더부분은 제외됨

 

활용 예시

1. 스크롤 영역 조정: 컨텐츠가 길어져서 스크롤이 필요한 경우, clientHeight 를 사용하여 스크롤이 가능한 영역을 정확하게 계산할 수 있다. 예를 들어, 특정 요소의 컨텐츠가 스크롤될 때, 그 크기를 동적으로 계산하여 스크롤을 조작할 수 있다.
2. 내부 콘텐츠 크기 계산: 내부 텍스트나 이미지를 기준으로 레이아웃을 맞출 때 활용할 수 있다.

 

---

📌 getBoundingClientRect(): 화면 기준 위치와 크기

getBoundingClientRect()는 요소의 정확한 위치와 크기를 화면을 기준으로 제공하는 메서드이다. 이 메서드는 요소의 위치와 크기를 포함한 객체를 반환한다.

 

✅ 예시

const element = document.getElementById('target');
const rect = element.getBoundingClientRect();

console.log(rect.top);     // 화면에서 요소의 위쪽 좌표
console.log(rect.left);    // 화면에서 요소의 왼쪽 좌표
console.log(rect.width);   // 요소의 너비
console.log(rect.height);  // 요소의 높이

 

활용 예시

1. 애니메이션 트리거: 스크롤 시 특정 요소가 화면에 보일 때 애니메이션을 실행하고 싶을 때 유용하다. getBoundingClientRect()로 요소의 위치를 확인하고, 화면 내에 보일 때만 애니메이션을 트리거할 수 있다.
2. 사용자 인터페이스 조정: 페이지 레이아웃을 동적으로 조정할 때, 특정 요소의 위치와 크기를 정확하게 파악하고 이에 맞게 다른 요소들의 위치나 크기를 계산할 수 있다. 예를 들어, 마우스를 올렸을 때 위치에 맞는 툴팁을 표시할 때 활용할 수 있다.

 

---

🚀 예제: 페이지 내 스크롤 이벤트와 크기 조정

document.addEventListener('scroll', () => {
    const target = document.querySelector('.target');
    const rect = target.getBoundingClientRect();
    
    // 요소가 화면에 보일 때 배경색 변경
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
        target.style.backgroundColor = 'lightblue';
    } else {
        target.style.backgroundColor = 'transparent';
    }
});

이 예제는 페이지 내에서 특정 요소가 화면에 보일 때 배경색이 변경되는 동작을 구현한 것이다. getBoundingClientRect()와 clientHeight를 활용하여 요소가 화면에 보이는지 여부를 판단한다.

• 스크롤 이벤트를 target 요소가 화면에 보일 때 배경색을 lightblue로 변경한다.
• getBoundingClientRect() 로 요소의 화면 위치를 확인하고, 요소가 화면에 완전히 보일 때, 배경색이 바뀌도록 설정한다.

 

---

📖 정리

속성	포함되는 요소	제외되는 요소	특징
offsetHeight	패딩, 보더	스크롤 바, 마진	전체 높이 계산
offsetWidth	패딩, 보더	스크롤 바, 마진	전체 너비 계산
clientHeight	패딩	보더, 스크롤 바, 마진	콘텐츠 영역 계산, 스크롤바와 구분된 높이
clientWidth	패딩	보더, 스크롤 바, 마진	콘텐츠 영역 계산, 레이아웃 조정
getBoundingClientRect()	패딩, 보더, 스크롤바, 마진	없음	화면 내 위치와 크기 정보 제공

 

---

💡 참고 자료

https://developer.mozilla.org/ko/docs/Web/API

Web API | MDN