======jQuery - Dimensions======
<WRAP left notice 70%>
  * description : jQuery - Dimensions
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-19
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/jquery/jquery_dimensions.asp|jQuery - Dimensions]]
\\
%%jQuery%%를 사용하면 요소와 브라우저 창의 크기(dimensions, 치수)에 대해 쉽게 작업할 수 있습니다.\\

=====jQuery Dimension Methods=====
%%jQuery%%에는 크기에 대한 작업을 위한 몇 가지 중요한 방법이 있습니다.\\
  * ''%%width()%%''
  * ''%%height()%%''
  * ''%%innerHeight()%%''
  * ''%%outerWidth()%%''
  * ''%%outerHeight()%%''

=====jQuery Dimensions=====
{{:wiki:javascript:jquery:jquery_note:img_jquerydim.gif?400|}}\\

=====jQuery widh() and height() Methods=====
''width()'' 메서드는 요소의 너비를 설정하거나 반환합니다 (padding, border 및 margin 제외).\\
\\
''height()'' 메서드는 요소의 높이를 설정하거나 반환합니다 (padding, border 및 margin 제외).\\
\\
다음 예제는 지정된 ''%%<div>%%'' 요소의 너비와 높이를 반환합니다.\\

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

=====jQuery innerWidth() and innerHeight() Methods=====
''innerWidth()'' 메서드는 요소의 너비를 반환합니다(padding 포함).\\
\\
''innerHeight()'' 메서드는 요소의 높이를 반환합니다(padding 포함).\\
\\
다음 예제는 지정된 ''%%<div>%%'' 요소의 __내부 너비/높이__(inner-width/height)를 반환합니다.\\

====예제====
<code jquery>
    $(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);
      });
    });
</code>

=====jQuery outerWidth() and outerHeight() Methods=====
''outerWidth()'' 메서드는 요소의 너비를 반환합니다 (padding 및 border 포함).\\
\\
''outerHeight()'' 메서드는 요소의 높이를 반환합니다 (padding 및 border 포함).\\
\\
다음 예제는 지정된 ''%%<div>%%'' 요소의 외부 너비 / 높이를 반환합니다.\\

====예제====
<code jquery>
    $(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);
      });
    });
</code>
\\
''outerWidth(true)'' 메서드는 요소의 너비 (padding, border 및 margin 포함)를 반환합니다.\\
\\
''outerHeight(true)'' 메서드는 요소의 높이 (padding, border 및 margin 포함)를 반환합니다.\\

====예제====
<code jquery>
    $(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);
      });
    });
</code>

=====jQuery More width() and height()=====
다음 예제는 문서(%%HTML%% 문서)와 창(브라우저 viewport)의 너비와 높이를 반환합니다.\\
<code jquery>
  $(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);
    });
  });
</code>
\\
다음 예제는 지정된 ''%%<div>%%'' 요소의 너비와 높이를 설정합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").width(500).height(500);
      });
    });
</code>




=====jQuery HTML Reference=====
모든 %%jQuery%% %%HTML%% 메서드에 대한 전체 개요를 보려면, [[https://www.w3schools.com/jquery/jquery_ref_html.asp|jQuery HTML/CSS Reference]]로 이동하십시오.

{{tag>오션 jQuery - Dimensions}}