jQuery - Dimensions
jQuery를 사용하면 요소와 브라우저 창의 크기(dimensions, 치수)에 대해 쉽게 작업할 수 있습니다.

jQuery에는 크기에 대한 작업을 위한 몇 가지 중요한 방법이 있습니다.

• width()
• height()
• innerHeight()
• outerWidth()
• outerHeight()

width() 메서드는 요소의 너비를 설정하거나 반환합니다 (padding, border 및 margin 제외).

height() 메서드는 요소의 높이를 설정하거나 반환합니다 (padding, border 및 margin 제외).

다음 예제는 지정된 <div> 요소의 너비와 높이를 반환합니다.

    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "Width of div: " + $("#div1").width() + "<br>";
        txt += "Height of div: " + $("#div1").height();
        $("#div1").html(txt);
      });
    });

innerWidth() 메서드는 요소의 너비를 반환합니다(padding 포함).

innerHeight() 메서드는 요소의 높이를 반환합니다(padding 포함).

다음 예제는 지정된 <div> 요소의 내부 너비/높이(inner-width/height)를 반환합니다.

    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "Width of div: " + $("#div1").width() + "</br>";
        txt += "Height of div: " + $("#div1").height() + "</br>";
        txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
        txt += "Inner height of div: " + $("#div1").innerHeight();
        $("#div1").html(txt);
      });
    });

outerWidth() 메서드는 요소의 너비를 반환합니다 (padding 및 border 포함).

outerHeight() 메서드는 요소의 높이를 반환합니다 (padding 및 border 포함).

다음 예제는 지정된 <div> 요소의 외부 너비 / 높이를 반환합니다.

    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "Width of div: " + $("#div1").width() + "</br>";
        txt += "Height of div: " + $("#div1").height() + "</br>";
        txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";
        txt += "Outer height of div: " + $("#div1").outerHeight();
        $("#div1").html(txt);
      });
    });

outerWidth(true) 메서드는 요소의 너비 (padding, border 및 margin 포함)를 반환합니다.

outerHeight(true) 메서드는 요소의 높이 (padding, border 및 margin 포함)를 반환합니다.

    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "Width of div: " + $("#div1").width() + "</br>";
        txt += "Height of div: " + $("#div1").height() + "</br>";
        txt += "Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
        txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true);
        $("#div1").html(txt);
      });
    });

다음 예제는 문서(HTML 문서)와 창(브라우저 viewport)의 너비와 높이를 반환합니다.

  $(document).ready(function () {
    $("button").click(function () {
      var txt = "";
      txt += "Document width/height: " + $(document).width();
      txt += "x" + $(document).height() + "\n";
      txt += "Window width/height: " + $(window).width();
      txt += "x" + $(window).height();
      alert(txt);
    });
  });

다음 예제는 지정된 <div> 요소의 너비와 높이를 설정합니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").width(500).height(500);
      });
    });

모든 jQuery HTML 메서드에 대한 전체 개요를 보려면, jQuery HTML/CSS Reference로 이동하십시오.