{"id":9698,"date":"2025-02-18T18:10:00","date_gmt":"2025-02-18T09:10:00","guid":{"rendered":"https:\/\/www.auctionpro.co.kr\/?p=9698"},"modified":"2025-04-29T11:54:45","modified_gmt":"2025-04-29T02:54:45","slug":"%eb%b0%98%ec%9d%91%ed%98%95-%ec%9b%b9-%eb%94%94%ec%9e%90%ec%9d%b8responsive-web-design-rwd","status":"publish","type":"post","link":"https:\/\/www.auctionpro.co.kr\/?p=9698","title":{"rendered":"\ud83d\udcf1\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778(Responsive Web Design, RWD)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"> \ub2e4\uc591\ud55c \ud654\uba74 \ud06c\uae30\uc640 \ub514\ubc14\uc774\uc2a4(PC, \ud0dc\ube14\ub9bf, \uc2a4\ub9c8\ud2b8\ud3f0 \ub4f1)\uc5d0 \ub9de\ucdb0 \uc6f9\uc0ac\uc774\ud2b8\uc758 \ub808\uc774\uc544\uc6c3\uacfc \ucf58\ud150\uce20\uac00 \uc790\ub3d9\uc73c\ub85c \uc870\uc815\ub418\ub3c4\ub85d \uc124\uacc4\ud558\ub294 \uc6f9 \ub514\uc790\uc778 \uae30\ubc95\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd39 <strong>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc758 \ud575\uc2ec \uc694\uc18c<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>\uc720\ub3d9\uc801\uc778 \ub808\uc774\uc544\uc6c3 (Fluid Grid)<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud53d\uc140(px) \ub2e8\uc704\uac00 \uc544\ub2cc **\ud37c\uc13c\ud2b8(%)\ub098 \ubdf0\ud3ec\ud2b8 \ub2e8\uc704(vw, vh)**\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud654\uba74 \ud06c\uae30\uc5d0 \ub9de\uac8c \uc870\uc815\ub428.<\/li>\n\n\n\n<li>\uc608) <code>width: 80%<\/code> \u2192 \ucc3d \ud06c\uae30\uc5d0 \ub530\ub77c \uc790\ub3d9 \uc870\uc815.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>\uc720\uc5f0\ud55c \uc774\ubbf8\uc9c0 (Flexible Images)<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>max-width: 100%<\/code>\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud654\uba74 \ud06c\uae30\uc5d0 \ub9de\ucdb0 \uc774\ubbf8\uc9c0\uac00 \uc790\ub3d9\uc73c\ub85c \ucd95\uc18c\ub428.<\/li>\n\n\n\n<li>\uc608) <code>img { max-width: 100%; height: auto; }<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. <strong>\ubbf8\ub514\uc5b4 \ucffc\ub9ac (Media Queries)<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud2b9\uc815 \ud654\uba74 \ud06c\uae30(\ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8)\uc5d0 \ub530\ub77c \uc2a4\ud0c0\uc77c\uc744 \ubcc0\uacbd\ud558\ub294 CSS \uae30\uc220.<\/li>\n\n\n\n<li>\uc608)css\ubcf5\uc0ac\ud3b8\uc9d1<code>@media screen and (max-width: 768px) { body { background-color: lightgray; } }<\/code><\/li>\n\n\n\n<li>\uc704 \ucf54\ub4dc\ub294 \ud654\uba74 \ub108\ube44\uac00 768px \uc774\ud558\uc77c \ub54c \ubc30\uacbd\uc0c9\uc744 \ud68c\uc0c9\uc73c\ub85c \ubcc0\uacbd.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd39 <strong>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc758 \uc7a5\uc810<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 <strong>\ubaa8\ub4e0 \ub514\ubc14\uc774\uc2a4\uc5d0\uc11c \ucd5c\uc801\uc758 UX \uc81c\uacf5<\/strong><br>\u2705 <strong>\uc720\uc9c0\ubcf4\uc218 \ube44\uc6a9 \uc808\uac10 (\ud558\ub098\uc758 \ucf54\ub4dc\ub85c \uad00\ub9ac)<\/strong><br>\u2705 <strong>\uac80\uc0c9 \uc5d4\uc9c4 \ucd5c\uc801\ud654(SEO) \uc720\ub9ac (\uad6c\uae00\uc740 \ubc18\uc751\ud615 \uc6f9\uc744 \uad8c\uc7a5)<\/strong><br>\u2705 <strong>\ud2b8\ub798\ud53d \uc99d\uac00 &amp; \uc774\ud0c8\ub960 \uac10\uc18c<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd39 <strong>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 vs \uc801\uc751\ud615 \uc6f9 \ub514\uc790\uc778<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\ube44\uad50 \ud56d\ubaa9<\/th><th>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 (RWD)<\/th><th>\uc801\uc751\ud615 \uc6f9 \ub514\uc790\uc778 (Adaptive Web Design, AWD)<\/th><\/tr><\/thead><tbody><tr><td><strong>\ub808\uc774\uc544\uc6c3<\/strong><\/td><td>\ud558\ub098\uc758 \ub3d9\uc801\uc778 \ub808\uc774\uc544\uc6c3<\/td><td>\ud2b9\uc815 \ud654\uba74 \ud06c\uae30\ubcc4 \uace0\uc815 \ub808\uc774\uc544\uc6c3<\/td><\/tr><tr><td><strong>\ubbf8\ub514\uc5b4 \ucffc\ub9ac<\/strong><\/td><td>\ud544\uc218 \uc0ac\uc6a9<\/td><td>\ud544\uc694\ud560 \uc218\ub3c4 \uc788\uace0 \uc544\ub2d0 \uc218\ub3c4 \uc788\uc74c<\/td><\/tr><tr><td><strong>\uc720\uc9c0\ubcf4\uc218<\/strong><\/td><td>\uc27d\uace0 \ube44\uc6a9 \uc808\uac10<\/td><td>\uc5ec\ub7ec \uac1c\uc758 \ub514\uc790\uc778\uc744 \uad00\ub9ac\ud574\uc57c \ud574\uc11c \uc5b4\ub824\uc6c0<\/td><\/tr><tr><td><strong>\uc18d\ub3c4<\/strong><\/td><td>\ube44\uad50\uc801 \ube60\ub984<\/td><td>\uae30\uae30\uc5d0 \ub9de\ucdb0 \ucd5c\uc801\ud654\ud558\uba74 \ub354 \ube60\ub97c \uc218\ub3c4 \uc788\uc74c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd39 <strong>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 \uc608\uc81c (HTML + CSS)<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:xhtml decode:true \">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"ko\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;\ubc18\uc751\ud615 \uc6f9&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            text-align: center;\n        }\n\n        .container {\n            width: 80%;\n            margin: auto;\n        }\n\n        img {\n            max-width: 100%;\n            height: auto;\n        }\n\n        @media screen and (max-width: 768px) {\n            body {\n                background-color: lightgray;\n            }\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;h1&gt;\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778&lt;\/h1&gt;\n        &lt;p&gt;\uc774 \uc6f9 \ud398\uc774\uc9c0\ub294 \ubc18\uc751\ud615\uc73c\ub85c \ub3d9\uc791\ud569\ub2c8\ub2e4.&lt;\/p&gt;\n        &lt;img src=\"https:\/\/via.placeholder.com\/600x300\" alt=\"\ubc18\uc751\ud615 \uc774\ubbf8\uc9c0\"&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udccc <strong>\uc124\uba85<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>meta viewport<\/code> \ud0dc\uadf8 \uc0ac\uc6a9: \ubaa8\ubc14\uc77c\uc5d0\uc11c \uc801\uc808\ud55c \ud654\uba74 \ud06c\uae30 \uc870\uc808<\/li>\n\n\n\n<li><code>max-width: 100%<\/code> \uc124\uc815\uc73c\ub85c \uc774\ubbf8\uc9c0\uac00 \ucc3d \ud06c\uae30\uc5d0 \ub9de\uac8c \uc870\uc815<\/li>\n\n\n\n<li><code>@media<\/code>\ub97c \uc774\uc6a9\ud574 \ud654\uba74 \ud06c\uae30\uac00 768px \uc774\ud558\uc77c \ub54c \ubc30\uacbd\uc0c9 \ubcc0\uacbd<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd39 <strong>\uacb0\ub860<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc740 \ud604\ub300 \uc6f9\uc0ac\uc774\ud2b8 \uac1c\ubc1c\uc5d0\uc11c \ud544\uc218\uc801\uc778 \uae30\uc220\uc774\uba70, \ub2e4\uc591\ud55c \ub514\ubc14\uc774\uc2a4 \ud658\uacbd\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX)\uc744 \ucd5c\uc801\ud654\ud558\ub294 \ub370 \ud070 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. HTML, CSS\uc758 \uae30\ubcf8 \uac1c\ub150\uacfc \ud568\uaed8 <strong>\ubbf8\ub514\uc5b4 \ucffc\ub9ac, \uc720\ub3d9\uc801\uc778 \ub808\uc774\uc544\uc6c3, \uc720\uc5f0\ud55c \uc774\ubbf8\uc9c0<\/strong> \ub4f1\uc758 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uba74 \ub204\uad6c\ub098 \ubc18\uc751\ud615 \uc6f9\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud83d\ude80<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>\ub2e4\uc591\ud55c \ud654\uba74 \ud06c\uae30\uc640 \ub514\ubc14\uc774\uc2a4(PC, \ud0dc\ube14\ub9bf, \uc2a4\ub9c8\ud2b8\ud3f0 \ub4f1)\uc5d0 \ub9de\ucdb0 \uc6f9\uc0ac\uc774\ud2b8\uc758 \ub808\uc774\uc544\uc6c3\uacfc \ucf58\ud150\uce20\uac00 \uc790\ub3d9\uc73c\ub85c \uc870\uc815\ub418\ub3c4\ub85d \uc124\uacc4\ud558\ub294 \uc6f9 \ub514\uc790\uc778 \uae30\ubc95\uc785\ub2c8\ub2e4. \ud83d\udd39 \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc758 \ud575\uc2ec \uc694\uc18c 1. \uc720\ub3d9\uc801\uc778 <a class=\"mh-excerpt-more\" href=\"https:\/\/www.auctionpro.co.kr\/?p=9698\" title=\"\ud83d\udcf1\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778(Responsive Web Design, RWD)\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-9698","post","type-post","status-publish","format-standard","hentry","category-html"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/9698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9698"}],"version-history":[{"count":0,"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/9698\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}