\uc6f9\uc791\uc5c5\uc744 \ud558\ub2e4 \ubcf4\uba74 \uac00\ub054 \uc0ac\uc6a9\uc790\uc758 \ud654\uba74 \ud06c\uae30\ub97c \uc54c\uace0 \uc2f6\uc744 \ub54c\uac00 \uc788\ub2e4. \ub514\uc790\uc778\uc801\uc778 \uce21\uba74\uc5d0\uc11c \ud574\uc0c1\ub3c4\uc5d0 \ub530\ub77c\uc11c \ub2e4\ub978 \ud06c\uae30\ub098 \ub0b4\uc6a9\uc744 \ubcf4\uc5ec \uc904 \uc218 \uc788\ub294\ub370 \uc694\uc998\uc740 CSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \ube0c\ub77c\uc6b0\uc800\uc758 \ud06c\uae30\uc5d0 \ub530\ub77c\uc11c \ub2e4\ub978 \ub514\uc790\uc778\uc744 \ubcf4\uc5ec \uc8fc\uace4\ud55c\ub2e4. \ubcf4\ud1b5 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n
\r\n\r\n<style>\r\n @media (min-width:20rem){\r\n \/*\r\n \ud654\uba74\uc758 \ud06c\uae30\uac00 20rem\ubcf4\ub2e4 \uc791\uc744 \ub54c \ubcf4\uc5ec\uc9c0\ub294 CSS\ucf54\ub4dc\r\n *\/\r\n }\r\n @media (min-width:50rem){\r\n \/*\r\n \ud654\uba74\uc758 \ud06c\uae30\uac00 50rem\ubcf4\ub2e4 \uc791\uc744 \ub54c \ubcf4\uc5ec\uc9c0\ub294 CSS\ucf54\ub4dc\r\n *\/\r\n }\r\n<\/style>\r\n\r\n<\/pre>\n\uc704\uc640 \uac19\uc740 \ucf54\ub4dc\ub97c \uc774\uc6a9\ud558\uba74 \uc0ac\uc6a9\uc790\uc758 \ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c\uc11c \ub2e4\ub978 \ub514\uc790\uc778 \uc801\uc6a9\uc774 \uac00\ub2a5\ud558\ub2e4. \ub110\ub9ac \uc54c\ub824\uc838 \uc788\ub294 \ucf54\ub4dc\uc774\ub2e4.
\n\uc11c\ubc84\ucabd php\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790\uc758 \ud654\uba74 \ud06c\uae30\ub97c \uc54c \uc218 \uc788\ub294 \ubc29\ubc95\uc774 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \uc57d\uac04\uc758 \uaf3c\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec php\uc5d0\uac8c \uc0ac\uc6a9\uc790 \ud654\uba74 \ud06c\uae30\ub97c \uc54c\ub824 \uc904 \uc218 \uc788\ub2e4.<\/p>\n
\ubc14\ub85c \uc544\uc791\uc2a4(Ajax)\ub97c \uc774\uc6a9\ud558\uba74 \ub41c\ub2e4.
\n\uc6b0\uc120 \uc0ac\uc6a9\uc790 \ud398\uc774\uc9c0\uc640 ajax\ub85c \uc18c\ud1b5\ud560 \uc218 \uc788\ub294 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e0\ub2e4. \uc5ec\uae30\uc120 05.php\uc640 util.php\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n
\uc2dc\uc791\ud558\uae30 \uc804\uc5d0 \uc0ac\uc6a9\uc790 \ud654\uba74\uc744 \uad6c\ud558\ub294 \ubc29\ubc95\uc740 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n
\r\n<script>\r\n\/* \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc774\uc6a9\ud55c \uac00\ub85c \uc138\ub85c *\/\r\nvar wid = innerWidth;\r\nvar hei = innerHeight;\r\n\r\n\/* \uc544\ub798\ub294 jQuery\ub97c \ud788\uc6a9\ud55c \uac00\ub85c \uc138\ub85c *\/\r\nvar jWid = $(window).width();\r\nvar jHei = $(window).height();\r\n<\/script>\r\n<\/pre>\n\uc704\uc758 \ub450 \uac00\uc9c0\ub294 \ub2e4\ub978 \ucf54\ub4dc\uc774\uc9c0\ub9cc \uacb0\uacfc\ub294 \uc0ac\uc6a9\uc790\uc758 \uac00\ub85c \uc138\ub85c \uae38\uc774\ub97c \ud53d\uc140\ub85c \uc800\uc7a5\ud558\ub294 \ubc29\ubc95\uc73c\ub85c \ubaa8\ub450 \uac19\uc740 \uacb0\uacfc\ub97c \ub9cc\ub4e0\ub2e4.<\/p>\n
\uadf8\ub7fc ajax\ub97c \uc774\uc6a9\ud574\uc11c \uc800 \uac12\uc744 util.php\uc5d0 \uc804\ub2ec\ud558\uba74 php\ub85c \uac12\uc744 \ub118\uae38 \uc218 \uc788\ub2e4. \uc5ec\uae30\uc11c\ub294 ajax\ub294 jQuery\ub97c \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 \uc704\uc758 \ubcc0\uc218\ub3c4 jQuery\uac4a\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \ub610\ud55c \ube0c\ub77c\uc6b0\uc800\uc758 \ucc3d \ud06c\uae30\uac00 \ubcc0\uacbd \ub420 \ub54c $(window).resize() \ub97c \uc0ac\uc6a9\ud558\uba74 \uc2e4\uc2dc\uac04\uc73c\ub85c \ubcc0\uacbd\ub418\ub294 \ud06c\uae30\ub97c \uad6c\ud560 \uc218 \uc788\ub2e4.<\/p>\n
\uc544\ub798\uc640 \uac19\uc740 \ucf54\ub4dc\ub97c \uc774\uc6a9\ud558\uba74 \ub41c\ub2e4.<\/p>\n
\r\n<script>\r\n$(window).resize(function(){\r\nvar jWid = $(window).width();\r\nvar jHei = $(window).height();\r\n});\r\n<\/script>\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub294 \uac00\ub85c\uc640 \uc138\ub85c\uac00 \ubcc0\ud558\uba74 \uc2e4\uc2dc\uac04\uc73c\ub85c \ubcc0\uacbd\ub41c \uae38\uc774\ub97c \ud574\ub2f9 \ubcc0\uc218\uc5d0 \ub2f4\uac8c\ub41c\ub2e4.
\n\uc774\uc81c \uc544\uc791\uc2a4(ajax)\ub97c \uc0ac\uc6a9\ud558\uc5ec php\uc5d0 \ud574\ub2f9 \ubcc0\uc218\uc5d0 \uc800\uc7a5\ub418\uc5b4 \uc788\ub294 \uc218\uce58\ub97c \uc804\ub2ec\ud560 \ucc28\ub840\uc774\ub2e4.
\n\ucc98\uc74c \ud398\uc774\uc9c0\uac00 \ub85c\ub529 \ub420\ub54c, \uadf8\ub9ac\uace0 \ucc3d\ud06c\uae30\ub97c \uc870\uc808\ud558\ub294 \ub9ac\uc0ac\uc774\uc988 \uc774\ubca4\ud2b8\uac00 \uc77c\uc5b4\ub0a0 \ub54c \uc774\ub807\uac8c \ub450 \ubc88 ajax\ub97c \ub123\uace0 \uc11c\ubc84 \ucabd util.php\uc5d0\uc11c\ub294 \ubc1b\uc740 \uac12\ub9cc echo \ud574 \uc8fc\uba74 \ub41c\ub2e4.<\/p>\n
\uc0ac\uc6a9\uc790 \ud398\uc774\uc9c0\uc758 \uc804\uccb4 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n
\r\n<script>\r\n$(document).ready(function(){\r\n var jWid = $(window).width();\r\n var jHei = $(window).height();\r\n \r\n $("#jView").text(jWid + " * " + jHei);\r\n $.ajax({\r\n url:"util.php?width=" + jWid + "&height=" + jHei,\r\n type: "get",\r\n success:function(data){\r\n \/* \uc774 \uacf3\uc5d0 \ud544\uc694\ud55c \uc791\uc5c5\uc744 \ud558\uc790 *\/\r\n $("#phpView").text(data);\r\n }\r\n });\r\n});\r\n$(window).resize(function(){\r\n var jWid = $(window).width();\r\n var jHei = $(window).height();\r\n $("#jView").text(jWid + " * " + jHei);\r\n $.ajax({\r\n url:"util.php?width=" + jWid + "&height=" + jHei,\r\n type: "get",\r\n success:function(data){\r\n \/* \uc774 \uacf3\uc5d0 \ud544\uc694\ud55c \uc791\uc5c5\uc744 \ud558\uc790 *\/\r\n $("#phpView").text(data);\r\n }\r\n });\r\n});\r\n<\/script>\r\n<\/pre>\n\ub9c8\uc9c0\ub9c9\uc73c\ub85c \uc11c\ubc84 \ucabd util.php \ud30c\uc77c\uc774\ub2e4.<\/p>\n
\r\n<?php\r\necho $_GET['width'] . ' * ' . $_GET['height'];\r\n\r\n<\/pre>\n\uc774\ub807\uac8c \ud574\uc11c \uc0ac\uc6a9\uc790 \ube0c\ub77c\uc6b0\uc800 \ucc3d \ud06c\uae30\ub97c php\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc774 \uc0dd\uacbc\ub2e4. \uadf8\ub7f0\ub370 \ubb38\uc81c\uac00 \uc788\ub2e4. \uc5b4\ub5a4 \uc545\uc758\uc801\uc778 \uc0ac\uc6a9\uc790\uac00 \ube0c\ub77c\uc6b0\uc800 \ucc3d\ud06c\uae30\ub97c \uacc4\uc18d \ub9ac\uc0ac\uc774\uc9d5\ud558\uace0 \uc788\ub2e4\uba74 ajax \ub54c\ubb38\uc5d0 \uc11c\ubc84\uc5d0 \ubb34\ub9ac\uac00 \uc0dd\uae38 \uc218 \uc788\ub2e4. \uc0ac\uc774\uc988\uac00 \ubc14\ub00c\uba74\uc11c \uc11c\ubc84\uc640 \uacc4\uc18d \ud1b5\uc2e0\uc744 \ud558\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n
\uc5b4\ub5a4 \ubc29\ubc95\uc774 \uc788\uc744\uae4c? \uac00\uc7a5 \uac04\ub2e8\ud558\uac8c \uc0dd\uac01\ud574 \ubcfc \uc218 \uc788\ub294 \uac83\uc740 \ub9ac\uc0ac\uc774\uc988\uac00 \ub05d\ub098\uace0 \ub9c8\uc6b0\uc2a4 \uc870\uc791\uc774 \uba48\ucdc4\uc744 \ub54c \ud55c \ubc88\ub9cc ajax\ub97c \uc2e4\ud589\ud558\ub294 \uac83\uc774\ub2e4. \uc11c\ubc84\uc5d0 \ubd80\ub2f4\uc744 \ub9e4\uc6b0 \ub9ce\uc774 \uc904\uc77c \uc218 \uc788\uc744 \uac83\uc774\ub2e4. \uc774\ub7f4 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 jQuery \ud568\uc218 \uc911\uc5d0\uc11c on() \uc774 \uc788\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ubcf4\uc790. on() \ud568\uc218\ub97c \uc774\uc6a9\ud558\uc5ec \uc774\ubca4\ud2b8\ub97c \ubd99\uc600\ub2e4. \uc774\uc81c \uc11c\ubc84\uc758 \ubd80\ub2f4\uc774 \ub9ce\uc774 \uc904\uc5c8\ub2e4. \ub354 \uc88b\uc740 \ubc29\ubc95\uc774 \uc788\uaca0\uc9c0\ub9cc \uc774 \uc815\ub3c4\uc5d0\uc11c \ub9c8\ubb34\ub9ac \ud558\uc790.<\/p>\n
<script>\nvar tempTime = 300;\nvar timer = null;\n \n$( window ).on( \"resize\", function( ) {\n clearTimeout( timer );\n timer = setTimeout( resizeDone, tempTime );\n} );\n \nfunction resizeDone( ) {\n var jWid = $(window).width();\n var jHei = $(window).height();\n $(\"#jView\").text(jWid + \" * \" + jHei);\n $.ajax({\n url:\"util.php?width=\" + jWid + \"&height=\" + jHei,\n type: \"get\",\n success:function(data){\n $(\"#phpView\").text(data);\n }\n });\n}\n<\/script><\/pre>\n <\/p>\n
<\/p>\n
\uc774\uc5d0 \ub300\ud55c \uc608\uc81c \ud398\uc774\uc9c0\uac00\u00a0http:\/\/exam.inmu.net\/1701\/005.php<\/a>\u00a0\uc5d0 \uc788\ub2e4 \uad00\uc2ec\uc774 \uc788\ub2e4\uba74 \ub9c1\ud06c\ub97c \ud074\ub9ad\ud574\ubcf4\uc790.<\/p>\n","protected":false},"excerpt":{"rendered":"\uc6f9\uc791\uc5c5\uc744 \ud558\ub2e4 \ubcf4\uba74 \uac00\ub054 \uc0ac\uc6a9\uc790\uc758 \ud654\uba74 \ud06c\uae30\ub97c \uc54c\uace0 \uc2f6\uc744 \ub54c\uac00 \uc788\ub2e4. \ub514\uc790\uc778\uc801\uc778 \uce21\uba74\uc5d0\uc11c \ud574\uc0c1\ub3c4\uc5d0 \ub530\ub77c\uc11c \ub2e4\ub978 \ud06c\uae30\ub098 \ub0b4\uc6a9\uc744 \ubcf4\uc5ec \uc904 \uc218 \uc788\ub294\ub370 \uc694\uc998\uc740 CSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \ube0c\ub77c\uc6b0\uc800\uc758 \ud06c\uae30\uc5d0 \ub530\ub77c\uc11c \ub2e4\ub978 \ub514\uc790\uc778\uc744 \ubcf4\uc5ec \uc8fc\uace4\ud55c\ub2e4. \ubcf4\ud1b5 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\ub2e4. <style> @media (min-width:20rem){ \/* \ud654\uba74\uc758 \ud06c\uae30\uac00 20rem\ubcf4\ub2e4 \uc791\uc744 \ub54c \ubcf4\uc5ec\uc9c0\ub294 CSS\ucf54\ub4dc *\/ } @media (min-width:50rem){ \/* \ud654\uba74\uc758 \ud06c\uae30\uac00 50rem\ubcf4\ub2e4 … \ub354 \ubcf4\uae30 “\ud654\uba74\uc758 \ud06c\uae30, CSS, Javascript \uadf8\ub9ac\uace0 php”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[44,81],"class_list":["post-750","post","type-post","status-publish","format-standard","hentry","category-5","tag-php","tag-81"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":619,"url":"https:\/\/sarang.inmu.net\/?p=619","url_meta":{"origin":750,"position":0},"title":"css3","author":"sarang","date":"2016\ub144 09\uc6d4 09\uc77c","format":false,"excerpt":"\ucd5c\uadfc \ud648\ud398\uc774\uc9c0 \uc791\uc5c5\uc744 \ud558\uba74\uc11c css \ub54c\ubb38\uc5d0 \uc9c4\ud589\uc774 \uc548\ub418\uace0 \uc788\ub2e4. \uacfc\uac70\uc5d0\ub294 \ud14c\uc774\ube14\ub85c \ub808\uc774\uc544\uc6c3\uc744 \uc7a1\uc558\ub294\ub370, \uc694\uc998 \uadf8\ub7f0 \uc2dd\uc73c\ub85c \ud654\uba74\uc744 \ub9cc\ub4e4\uba74 \uc2dc\ub300\uc5d0 \ub4a4\ub5a8\uc5b4\uc9c4\ub2e4. \ubb34\uc5c7\uc774\ub4e0 \uc2dc\ub300\uc5d0 \uac78\ub9de\uac8c \uc791\uc5c5\ud558\ub294 \uac8c \ubc14\ub78c\uc9c1 \ud558\ub2e4. \ub808\uc774 \uc544\uc6c3\uc5d0\uc11c \uc911\uc694\ud558\ub2e4\uace0 \uc0dd\uac01 \ub418\ub294 \uba87 \uac00\uc9c0 \uc694\uc810\uc744 \uc774 \uacf3\uc5d0 \uc815\ub9ac\ud558\uc5ec \ucc38\uc870 \ud558\uc790. \u00a0 display \uc18d\uc131\uc5d0\uc11c inline \uacfc inline-block \uc758 \ucc28\uc774\uc810 \uc608\uc81c \uc704\uc758\u2026","rel":"","context":""\ucef4\ud4e8\ud130"\uc5d0\uc11c","block_context":{"text":"\ucef4\ud4e8\ud130","link":"https:\/\/sarang.inmu.net\/?cat=5"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":902,"url":"https:\/\/sarang.inmu.net\/?p=902","url_meta":{"origin":750,"position":1},"title":"ajax\ub97c \uc0ac\uc6a9\ud574\uc11c \uc11c\ubc84\uc758 \uc2dc\uac04\uc744 \ubcf4\uc5ec \uc8fc\uae30","author":"sarang","date":"2017\ub144 12\uc6d4 16\uc77c","format":false,"excerpt":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c setInterval() \uc744 \uc774\uc6a9\ud558\uba74 \uc9c0\uc815\ud55c \ubc00\ub9ac\uc138\ucee8\ub4dc \ub2e8\uc704\ub85c \ubb34\uc5b8\uac00\ub97c \uc2e4\ud589\ud560 \uc218 \uc788\ub2e4. \uc774 \ud568\uc218\uc5d0 ajax\ub97c \ub123\uc5b4\uc11c 1\ucd08\uc5d0 \ud55c\ubc88 \uc529 \uc2e4\ud589\ub418\uac8c \ud55c\ub2e4\uba74 \uc11c\ubc84\uc758 \uc2dc\uac04\uc744 \ube0c\ub77c\uc6b0\uc800\ub85c \ubcf4\ub0bc \uc218 \uc788\ub2e4. \uc11c\ubc84\uc5d0\uc11c \ud560 \uc77c\uc740 php\uc758 date()\ud568\uc218\uc640 time() \ud568\uc218\ub97c \uc774\uc6a9\ud574\uc11c \uc2e4\uc2dc\uac04\uc744 echo\ud558\uba74 \ub41c\ub2e4. \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 util.php?mode=nowTime \ub9c1\ud06c\uc5d0\uc11c \uad6c\ud604\ud558\uc600\ub2e4. util.php \uc758 \ucf54\ub4dc \ub0b4\uc6a9\uc740 \uc544\ub798\uc640 \uac19\ub2e4.