차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:jquery:jquery_note:jquery_dimensions [2021/04/19 08:31]
emblim98 만듦
+++ wiki:javascript:jquery:jquery_note:jquery_dimensions [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ======jQuery - Dimensions======
 <WRAP left notice 70%>
-  * description : jQuery - css() Method
+  * description : jQuery - Dimensions
   * author      : 오션
   * email       : shlim@repia.com
@@ 줄 8: / 줄 8: @@
 <WRAP clear></WRAP>
 \\
-%%jQuery%%를 사용하면 요소들의 스타일을 쉽게 조작할 수 있습니다.\\
+====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>
@@ 줄 20: / 줄 135: @@
 모든 %%jQuery%% %%HTML%% 메서드에 대한 전체 개요를 보려면, [[https://www.w3schools.com/jquery/jquery_ref_html.asp|jQuery HTML/CSS Reference]]로 이동하십시오.
-{{tag>오션 jQuery - GDimensions}}
+{{tag>오션 jQuery - Dimensions}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구