{"id":2270,"date":"2015-10-19T06:15:09","date_gmt":"2015-10-19T06:15:09","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=2270"},"modified":"2017-01-26T22:35:46","modified_gmt":"2017-01-26T13:35:46","slug":"jquery%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%b4-dom%ec%9d%98-%ed%81%ac%ea%b8%b0-%ec%96%bb%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=2270","title":{"rendered":"jQuery\ub97c \uc774\uc6a9\ud574 DOM\uc758 \ud06c\uae30 \uc5bb\uae30"},"content":{"rendered":"<p>\uc544\ub798\uc640 \uac19\uc740 Visual DOM \uac1d\uccb4\uac00 \uc788\ub2e4\uace0 \ud558\uc790. jQuery\ub97c \uc774\uc6a9\ud574 \uc774 \uac1d\uccb4\uc758 \uac00\ub85c\uc640 \uc138\ub85c\uc5d0 \ub300\ud55c \ud53d\uc140 \ud06c\uae30\ub97c \uc5bb\ub294 \ucf54\ub4dc\uc5d0 \ub300\ud574 \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/1\/1289103120.png\" \/><\/p>\n<p>Visual DOM \uac1d\uccb4\ub294 \ub208\uc5d0 \ubcf4\uc774\ub294 \uac83, \uc989 \ubcf8\ub798\uc758 \ubaa8\uc591\uacfc \uc678\uacfd\uc120(Border) \uc774\uc678\uc5d0\ub3c4 Padding\uacfc Margin\uc640 \uac19\uc740 \ubcf4\uc774\uc9c0 \uc54a\uc9c0\ub9cc \ud65c\uc6a9\uc5d0\uc11c \uc720\uc6a9\ud55c \uc18d\uc131\uc744 \uac16\ub294\ub2e4. \uc544\ub798\uc758 \uadf8\ub9bc\uc744 \ubcf4\uba74..<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/1\/1349046153.gif\" \/><\/p>\n<p>\uc704\uc758 \uadf8\ub9bc\uc740 w3schools.com\uc5d0\uc11c jQuery \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c \uac00\uc838\uc628 \uadf8\ub9bc\uc785\ub2c8\ub2e4.<\/p>\n<p>\uadf8\ub9bc\uc5d0\uc11c \ud568\uc218\ub294 jQuery\uc5d0\uc11c \uc5bb\ub294 DOM \uac1d\uccb4\uc5d0 \ub300\ud55c \uac83\uc785\ub2c8\ub2e4. \uc815\ub9ac\ub97c \ud558\uba74 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li><b>width(), height()<\/b> \u3161 Padding, Border, Margin\uc744 \uc81c\uc678\ud55c \ud06c\uae30<\/li>\n<li><b>innerWidth(), innerHeight()<\/b> \u3161 Border, Margin\uc744 \uc81c\uc678\ud55c \ud06c\uae30<\/li>\n<li><b>outerWidth(), outerHeight()<\/b> \u3161 Margin\uc744 \uc81c\uc678\ud55c \ud06c\uae30<\/li>\n<li><b>outerWidth(true), outerHeight(true)<\/b> \u3161 Padding, Border, Margin\uc744 \ubaa8\ub450 \ud3ec\ud568\ud55c \ud06c\uae30<\/li>\n<\/ul>\n<p>\ud2b9\ud788\ub098 \uc704\uc758 width\uc640 height \ud568\uc218\ub294 \ud06c\uae30\ub97c \uc5bb\ub294(get) \uae30\ub2a5\uc744 \ud558\uba74\uc11c\ub3c4 \uc778\uc790\ub97c \ubc1b\uc73c\uba74 \ud574\ub2f9 \uc778\uc790\uc758 \uac12\ub9cc\ud07c \ud06c\uae30\ub97c \uc124\uc815\ud558\ub294(set) \uae30\ub2a5\ub3c4 \uac16\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c \uc774 \uae00\uc758 \ub9e8 \uc55e\uc5d0\uc11c \ubcf4\uc778 DOM \uac1d\uccb4(ID\uac00 div1\uc784)\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc0b4\ud3b4\ubd04\uc73c\ub85c\uc368 Border, Padding, Margin\uc758 \uac12\uc744 \uc0b4\ud3b4\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>\r\n#div1 {\r\n    height: 100px;\r\n    width: 300px;\r\n    padding: 10px;\r\n    margin: 3px;\r\n    border: 2px solid blue;\r\n    background-color: lightblue;\r\n}\r\n<\/pre>\n<p>ID\uac00 div1\uc778 div\ub97c jQuery\ub85c \uc5bb\uc5b4 \uadf8 \ud06c\uae30 \uba87\uac00\uc9c0\ub97c \uc5bb\ub294 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>\r\n$(document).ready(function () {\r\n    $(\"button\").click(function () {\r\n        var div = $(\"#div1\");\r\n        var txt = \"\";\r\n\r\n        txt += \"Width of div: \" + div.width() + \"<\/br>\";\r\n        txt += \"Height of div: \" + div.height() + \"<\/br>\";\r\n        txt += \"Outer width of div (margin included): \" \r\n            + div.outerWidth(true) + \"<\/br>\";\r\n        txt += \"Outer height of div (margin included): \" \r\n            + div.outerHeight(true);\r\n\r\n        div.html(txt);\r\n    });\r\n}); \r\n<\/pre>\n<p>\uc2e4\ud589\ud558\uace0 \uc774\ubca4\ud2b8\uac00 \uc124\uc815\ub41c \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \uc544\ub798\uc640 \uac19\uc740 \uacb0\uacfc\ub97c \uc0b4\ud3b4\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/1\/1256153223.png\" \/><\/p>\n<p>\ucc38\uace0\ub85c \uc704\uc758 \uc608\uc81c\uc5d0\uc11c \uc0ac\uc6a9\ud55c body \ubd80\ubd84\uc758 DOM \uad6c\uc131 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>\r\n<body>\r\n    <div id=\"div1\">>\/div>\r\n    <button>Display dimensions of div>\/button>\r\n<\/body>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc544\ub798\uc640 \uac19\uc740 Visual DOM \uac1d\uccb4\uac00 \uc788\ub2e4\uace0 \ud558\uc790. jQuery\ub97c \uc774\uc6a9\ud574 \uc774 \uac1d\uccb4\uc758 \uac00\ub85c\uc640 \uc138\ub85c\uc5d0 \ub300\ud55c \ud53d\uc140 \ud06c\uae30\ub97c \uc5bb\ub294 \ucf54\ub4dc\uc5d0 \ub300\ud574 \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. Visual DOM \uac1d\uccb4\ub294 \ub208\uc5d0 \ubcf4\uc774\ub294 \uac83, \uc989 \ubcf8\ub798\uc758 \ubaa8\uc591\uacfc \uc678\uacfd\uc120(Border) \uc774\uc678\uc5d0\ub3c4 Padding\uacfc Margin\uc640 \uac19\uc740 \ubcf4\uc774\uc9c0 \uc54a\uc9c0\ub9cc \ud65c\uc6a9\uc5d0\uc11c \uc720\uc6a9\ud55c \uc18d\uc131\uc744 \uac16\ub294\ub2e4. \uc544\ub798\uc758 \uadf8\ub9bc\uc744 \ubcf4\uba74.. \uc704\uc758 \uadf8\ub9bc\uc740 w3schools.com\uc5d0\uc11c jQuery \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c \uac00\uc838\uc628 \uadf8\ub9bc\uc785\ub2c8\ub2e4. \uadf8\ub9bc\uc5d0\uc11c \ud568\uc218\ub294 jQuery\uc5d0\uc11c \uc5bb\ub294 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=2270\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;jQuery\ub97c \uc774\uc6a9\ud574 DOM\uc758 \ud06c\uae30 \uc5bb\uae30&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-2270","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2270"}],"version-history":[{"count":1,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2270\/revisions"}],"predecessor-version":[{"id":2717,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2270\/revisions\/2717"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2270"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}