제이쿼리 크기

제이쿼리 크기 관련 메소드는 웹 요소(DOM)의 너비와 높이를 간단히 읽거나 설정할 때 사용합니다. 콘텐츠 크기부터 패딩, 테두리, 마진까지 포함된 크기 정보를 정확히 알 수 있어, 레이아웃을 동적으로 조정하는 데 매우 유용합니다.

---

🔹 요소 크기 구성 개념

웹 요소의 크기는 다음과 같은 영역으로 구분됩니다.

• 콘텐츠(Content): 순수 콘텐츠의 너비와 높이
• 패딩(Padding): 콘텐츠와 테두리 사이의 간격
• 테두리(Border): 요소의 경계선
• 마진(Margin): 주변 요소와의 여백

제이쿼리 메소드는 이 영역을 기준으로 크기 정보를 반환합니다.

---

📌 주요 메소드 비교표

메소드	반환값 (포함 항목)	크기 설정 가능 여부
.width()	콘텐츠	✅ 가능
.height()	콘텐츠	✅ 가능
.innerWidth()	콘텐츠 + 패딩	❌ 불가능
.innerHeight()	콘텐츠 + 패딩	❌ 불가능
.outerWidth()	콘텐츠 + 패딩 + 테두리	❌ 불가능
.outerHeight()	콘텐츠 + 패딩 + 테두리	❌ 불가능
.outerWidth(true)	콘텐츠 + 패딩 + 테두리 + 마진	❌ 불가능
.outerHeight(true)	콘텐츠 + 패딩 + 테두리 + 마진	❌ 불가능

---

🚀 크기 메소드 실전 예제

🔸 1) 기본 크기 확인하기(width·height)

콘텐츠 영역의 크기만 반환합니다.

$("button").on("click", function() {
    var width = $("#divBox").width();
    var height = $("#divBox").height();

    $("#text").html(`크기: ${width}px × ${height}px`);
});

---

🔸 2) 패딩·테두리·마진 포함 크기 확인

다양한 메소드로 영역별 크기 정보를 얻습니다.

$("button").on("click", function() {
    const $box = $("#divBox");
    let str = `
        콘텐츠 크기: ${$box.width()} × ${$box.height()}<br>
        패딩 포함: ${$box.innerWidth()} × ${$box.innerHeight()}<br>
        테두리 포함: ${$box.outerWidth()} × ${$box.outerHeight()}<br>
        마진 포함: ${$box.outerWidth(true)} × ${$box.outerHeight(true)}
    `;

    $("#text").html(str);
});

---

🔸 3) 요소 크기 변경하기

.width()와 .height() 메소드로 크기를 직접 설정합니다.

$("button").on("click", function() {
    $("#divBox").width(400).height(200);
});

---

🔸 4) 브라우저 창·문서 전체 크기 얻기

브라우저와 문서의 크기를 손쉽게 확인합니다.

$("button").on("click", function() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    var docWidth = $(document).width();
    var docHeight = $(document).height();

    $("#text").html(`
        브라우저 뷰포트 크기: ${viewportWidth}px × ${viewportHeight}px<br>
        HTML 문서 전체 크기: ${docWidth}px × ${docHeight}px
    `);
});

---

🔖 메소드 활용 팁

• 정확한 렌더링 크기 측정

  실제 화면에 표시된 요소 크기 확인은 .outerWidth() 및 .outerHeight()로 확인합니다.

• 크기 변경 시 주의점

  .width()와 .height()는 콘텐츠 크기만 조정하므로 CSS box-sizing 속성에 따라 결과가 달라질 수 있습니다.

• 애니메이션 구현

  요소 크기 변경을 애니메이션화 할 때, .animate({width: "300px"}) 같은 jQuery의 .animate() 메소드를 활용하면 부드러운 효과를 얻을 수 있습니다.

---

🔍 질문 정리

질문	답변
innerWidth()나 outerWidth()로 크기 설정 가능한가요?	아닙니다. .width()와 .height()만 크기 설정이 가능합니다.
.width()로 % 단위 설정 가능한가요?	네. 문자열로 전달하면 가능합니다. 예: .width("50%").
마진 포함 크기가 실제로 필요한 경우는?	요소 간 정확한 간격이 중요할 때, 레이아웃 디버깅이나 위치 계산에 유용합니다.
outerWidth(true)의 true는 어떤 의미인가요?	true는 마진을 포함하여 계산하라는 의미입니다.
왜 .width()로 설정한 값이 실제와 다르죠?	CSS의 box-sizing이 border-box인 경우, 패딩과 테두리를 포함한 값으로 설정됩니다.