{"id":26985,"date":"2025-04-08T14:35:40","date_gmt":"2025-04-08T07:35:40","guid":{"rendered":"https:\/\/hitek.com.vn\/?p=26985"},"modified":"2025-04-08T14:35:40","modified_gmt":"2025-04-08T07:35:40","slug":"responsive-web-development","status":"publish","type":"post","link":"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/","title":{"rendered":"\ubc18\uc751\ud615 \uc6f9\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95 \uc815\ub9ac: \ubaa8\ubc14\uc77c \uc2dc\ub300\uc5d0 \ud544\uc218\uc801\uc778 \uc6f9 \ub514\uc790\uc778 \uc804\ub7b5"},"content":{"rendered":"<p>\ubaa8\ubc14\uc77c \uae30\uae30 \uc0ac\uc6a9\uc774 \ub370\uc2a4\ud06c\ud1b1\uc744 \uc55e\uc9c0\ub974\ub294 \uc2dc\ub300\uc5d0\uc11c, <strong>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778(Responsive Web Design, RWD)<\/strong>\uc740 \ub354 \uc774\uc0c1 \uc120\ud0dd\uc774 \uc544\ub2cc \ud544\uc218\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc2a4\ub9c8\ud2b8\ud3f0, \ud0dc\ube14\ub9bf, \ub178\ud2b8\ubd81 \ub4f1 \uc5b4\ub5a4 \uae30\uae30\ub85c \uc811\uc18d\ud558\ub4e0 \ucd5c\uc801\ud654\ub41c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\ub294 \ubc18\uc751\ud615 \uc6f9\uc740 \uac80\uc0c9 \uc5d4\uc9c4 \ucd5c\uc801\ud654(SEO)\uc640 \uc0ac\uc6a9\uc790 \ub9cc\uc871\ub3c4(UX)\ub97c \ub3d9\uc2dc\uc5d0 \ub192\uc785\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uae00\uc5d0\uc11c\ub294 \ubc18\uc751\ud615 \uc6f9\uc744 \uad6c\ud604\ud558\ub294 \ud575\uc2ec \ubc29\ubc95\uacfc \ucd5c\uc2e0 \ud2b8\ub80c\ub4dc\ub97c \uc815\ub9ac\ud588\uc2b5\ub2c8\ub2e4. \uac1c\ubc1c\uc790, \ub514\uc790\uc774\ub108, \ud639\uc740 \uc6f9 \uc0ac\uc774\ud2b8 \uc6b4\uc601\uc790\ub77c\uba74 \uc774 \uac00\uc774\ub4dc\ub97c \ud1b5\ud574 \uc644\uc131\ub3c4 \ub192\uc740 \ubc18\uc751\ud615 \uc6f9\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc744 \uac81\ub2c8\ub2e4.<\/p>\n<hr \/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\ubaa9\ucc28 \ud1a0\uae00\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#1_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9%EC%9D%B4%EB%9E%80\" >1. \ubc18\uc751\ud615 \uc6f9\uc774\ub780?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9%EC%9D%98_%ED%95%B5%EC%8B%AC_%EC%9A%94%EC%86%8C\" >\ubc18\uc751\ud615 \uc6f9\uc758 \ud575\uc2ec \uc694\uc18c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#2_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%EC%A0%9C%EC%9E%91_%ED%95%B5%EC%8B%AC_%EB%B0%A9%EB%B2%95\" >2. \ubc18\uc751\ud615 \uc6f9 \uc81c\uc791 \ud575\uc2ec \ubc29\ubc95<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#1_%EB%AA%A8%EB%B0%94%EC%9D%BC_%ED%8D%BC%EC%8A%A4%ED%8A%B8Mobile-First_%EC%A0%91%EA%B7%BC%EB%B2%95\" >(1) \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8(Mobile-First) \uc811\uadfc\ubc95<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#2_%EC%9C%A0%EB%8F%99_%EA%B7%B8%EB%A6%AC%EB%93%9CFluid_Grid_%EC%A0%81%EC%9A%A9\" >(2) \uc720\ub3d9 \uadf8\ub9ac\ub4dc(Fluid Grid) \uc801\uc6a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#3_%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC%EB%A1%9C_%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8_%EA%B5%AC%ED%98%84\" >(3) \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub85c \ubc18\uc751\ud615 \ub514\uc790\uc778 \uad6c\ud604<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#4_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9D%B4%EB%AF%B8%EC%A7%80_%EC%B5%9C%EC%A0%81%ED%99%94\" >(4) \ubc18\uc751\ud615 \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#3_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%ED%85%8C%EC%8A%A4%ED%8A%B8_%EC%B5%9C%EC%A0%81%ED%99%94_%EB%B0%A9%EB%B2%95\" >3. \ubc18\uc751\ud615 \uc6f9 \ud14c\uc2a4\ud2b8 &amp; \ucd5c\uc801\ud654 \ubc29\ubc95<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#1_%ED%81%AC%EB%A1%9C%EC%8A%A4_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95_%ED%85%8C%EC%8A%A4%ED%8A%B8\" >(1) \ud06c\ub85c\uc2a4 \ube0c\ub77c\uc6b0\uc9d5 \ud14c\uc2a4\ud2b8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#2_%EC%84%B1%EB%8A%A5_%EC%B5%9C%EC%A0%81%ED%99%94\" >(2) \uc131\ub2a5 \ucd5c\uc801\ud654<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#4_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC\" >4. \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 \ud504\ub808\uc784\uc6cc\ud06c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#5_%EA%B2%B0%EB%A1%A0_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9%EC%9D%80_%ED%95%84%EC%88%98_%EC%8B%9C%EC%9E%91%ED%95%B4%EC%95%BC_%ED%95%A0_%EB%95%8C%EB%8B%A4\" >5. \uacb0\ub860: \ubc18\uc751\ud615 \uc6f9\uc740 \ud544\uc218, \uc2dc\uc791\ud574\uc57c \ud560 \ub54c\ub2e4<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"-1-\"><span class=\"ez-toc-section\" id=\"1_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9%EC%9D%B4%EB%9E%80\"><\/span><strong>1. \ubc18\uc751\ud615 \uc6f9\uc774\ub780?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc740 \ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c \ub808\uc774\uc544\uc6c3\uc774 \uc720\ub3d9\uc801\uc73c\ub85c \ubcc0\ud558\ub294 \uc6f9 \ub514\uc790\uc778 \uae30\ubc95\uc785\ub2c8\ub2e4. 2010\ub144 <strong><a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\/\" target=\"_blank\" rel=\"noopener\">Ethan Marcotte<\/a><\/strong>\uac00 \ucc98\uc74c \uc81c\uc548\ud55c \uc774 \uac1c\ub150\uc740 \ud604\uc7ac \uc6f9 \ud45c\uc900\uc73c\ub85c \uc790\ub9ac \uc7a1\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n<h3 id=\"-\"><span class=\"ez-toc-section\" id=\"%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9%EC%9D%98_%ED%95%B5%EC%8B%AC_%EC%9A%94%EC%86%8C\"><\/span><strong>\ubc18\uc751\ud615 \uc6f9\uc758 \ud575\uc2ec \uc694\uc18c<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>\uc720\ub3d9 \uadf8\ub9ac\ub4dc(Fluid Grids)<\/strong>: \ud53d\uc140(%) \ub2e8\uc704\ub85c \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud574 \ud654\uba74 \ud06c\uae30\uc5d0 \ub9de\ucdb0 \uc870\uc815\ub429\ub2c8\ub2e4.<\/li>\n<li><strong>\ubbf8\ub514\uc5b4 \ucffc\ub9ac(Media Queries)<\/strong>: CSS3\uc758 <code>@media<\/code> \uaddc\uce59\uc744 \uc0ac\uc6a9\ud574 \ud2b9\uc815 \ud654\uba74 \ud06c\uae30\uc5d0 \ub9de\ub294 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<li><strong>\ubc18\uc751\ud615 \uc774\ubbf8\uc9c0(Responsive Images)<\/strong>: <code>&lt;img srcset&gt;<\/code>\uc774\ub098 <code>&lt;picture&gt;<\/code> \ud0dc\uadf8\ub85c \uae30\uae30\ubcc4 \ucd5c\uc801\ud654\ub41c \uc774\ubbf8\uc9c0\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"-2-\"><span class=\"ez-toc-section\" id=\"2_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%EC%A0%9C%EC%9E%91_%ED%95%B5%EC%8B%AC_%EB%B0%A9%EB%B2%95\"><\/span><strong>2. \ubc18\uc751\ud615 \uc6f9 \uc81c\uc791 \ud575\uc2ec \ubc29\ubc95<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"-1-mobile-first-\"><span class=\"ez-toc-section\" id=\"1_%EB%AA%A8%EB%B0%94%EC%9D%BC_%ED%8D%BC%EC%8A%A4%ED%8A%B8Mobile-First_%EC%A0%91%EA%B7%BC%EB%B2%95\"><\/span><strong>(1) \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8(Mobile-First) \uc811\uadfc\ubc95<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\uc2a4\ub9c8\ud2b8\ud3f0 \uc0ac\uc6a9\uc790\uac00 \ub9ce\uc544\uc9c0\uba74\uc11c, <strong>\ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8 \ub514\uc790\uc778<\/strong>\uc774 \uad8c\uc7a5\ub429\ub2c8\ub2e4. \uc791\uc740 \ud654\uba74\ubd80\ud130 \uc2dc\uc791\ud574 \uc810\uc9c4\uc801\uc73c\ub85c \ub370\uc2a4\ud06c\ud1b1 \ub808\uc774\uc544\uc6c3\uc744 \ucd94\uac00\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-comment\">\/* \uae30\ubcf8 \uc2a4\ud0c0\uc77c (\ubaa8\ubc14\uc77c) *\/<\/span>\r\n<span class=\"hljs-selector-class\">.container<\/span> {  \r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;  \r\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;  \r\n}  \r\n\r\n<span class=\"hljs-comment\">\/* \ud0dc\ube14\ub9bf (768px \uc774\uc0c1) *\/<\/span>  \r\n@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">768px<\/span>) {  \r\n  <span class=\"hljs-selector-class\">.container<\/span> {  \r\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">90%<\/span>;  \r\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;  \r\n  }  \r\n}  \r\n\r\n<span class=\"hljs-comment\">\/* \ub370\uc2a4\ud06c\ud1b1 (1024px \uc774\uc0c1) *\/<\/span>  \r\n@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">1024px<\/span>) {  \r\n  <span class=\"hljs-selector-class\">.container<\/span> {  \r\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">80%<\/span>;  \r\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1200px<\/span>;  \r\n  }  \r\n}\r\n<\/code><\/pre>\n<h3 id=\"-2-fluid-grid-\"><span class=\"ez-toc-section\" id=\"2_%EC%9C%A0%EB%8F%99_%EA%B7%B8%EB%A6%AC%EB%93%9CFluid_Grid_%EC%A0%81%EC%9A%A9\"><\/span><strong>(2) \uc720\ub3d9 \uadf8\ub9ac\ub4dc(Fluid Grid) \uc801\uc6a9<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\uace0\uc815 \ud53d\uc140(<code>px<\/code>) \ub300\uc2e0 <strong>\uc0c1\ub300 \ub2e8\uc704(<code>%<\/code>, <code>rem<\/code>, <code>vw<\/code>)<\/strong>\ub97c \uc0ac\uc6a9\ud574 \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-comment\">\/* \uace0\uc815 \ud3ed (\ube44\ucd94\ucc9c) *\/<\/span>  \r\n<span class=\"hljs-selector-class\">.box<\/span> { <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">300px<\/span>; }  \r\n\r\n<span class=\"hljs-comment\">\/* \uc720\ub3d9 \ud3ed (\ucd94\ucc9c) *\/<\/span>  \r\n<span class=\"hljs-selector-class\">.box<\/span> { <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>; <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">300px<\/span>; }\r\n<\/code><\/pre>\n<h3 id=\"-3-\"><span class=\"ez-toc-section\" id=\"3_%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC%EB%A1%9C_%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8_%EA%B5%AC%ED%98%84\"><\/span><strong>(3) \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub85c \ubc18\uc751\ud615 \ub514\uc790\uc778 \uad6c\ud604<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>@media<\/code>\ub97c \ud65c\uc6a9\ud574 \uae30\uae30\ubcc4 \ucd5c\uc801\ud654\ub41c \ub514\uc790\uc778\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-comment\">\/* \ubaa8\ubc14\uc77c (\uac00\ub85c 600px \uc774\ud558) *\/<\/span>  \r\n@<span class=\"hljs-keyword\">media<\/span> (max-width: <span class=\"hljs-number\">600px<\/span>) {  \r\n  <span class=\"hljs-selector-class\">.menu<\/span> { <span class=\"hljs-attribute\">display<\/span>: none; }  \r\n  <span class=\"hljs-selector-class\">.mobile-menu-btn<\/span> { <span class=\"hljs-attribute\">display<\/span>: block; }  \r\n}  \r\n\r\n<span class=\"hljs-comment\">\/* \ud0dc\ube14\ub9bf (601px ~ 1024px) *\/<\/span>  \r\n@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">601px<\/span>) and (max-width: <span class=\"hljs-number\">1024px<\/span>) {  \r\n  <span class=\"hljs-selector-class\">.sidebar<\/span> { <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">30%<\/span>; }  \r\n}\r\n<\/code><\/pre>\n<h3 id=\"-4-\"><span class=\"ez-toc-section\" id=\"4_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9D%B4%EB%AF%B8%EC%A7%80_%EC%B5%9C%EC%A0%81%ED%99%94\"><\/span><strong>(4) \ubc18\uc751\ud615 \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\uace0\ud574\uc0c1\ub3c4 \ub514\uc2a4\ud50c\ub808\uc774\ub97c \uc9c0\uc6d0\ud558\uba74\uc11c\ub3c4 \ub85c\ub529 \uc18d\ub3c4\ub97c \uac1c\uc120\ud558\ub824\uba74 <code>&lt;picture&gt;<\/code> \ud0dc\uadf8\ub098 <code>srcset<\/code>\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">picture<\/span>&gt;<\/span>  \r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">media<\/span>=<span class=\"hljs-string\">\"(max-width: 600px)\"<\/span> <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"mobile-image.jpg\"<\/span>&gt;<\/span>  \r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">media<\/span>=<span class=\"hljs-string\">\"(min-width: 601px)\"<\/span> <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"desktop-image.jpg\"<\/span>&gt;<\/span>  \r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"fallback-image.jpg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"\ubc18\uc751\ud615 \uc774\ubbf8\uc9c0\"<\/span>&gt;<\/span>  \r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">picture<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>\ub610\ub294 <code>srcset<\/code>\uc73c\ub85c \ub2e4\uc591\ud55c \ud574\uc0c1\ub3c4 \ub300\uc751:<\/p>\n<pre><code class=\"lang-html\">&lt;<span class=\"hljs-selector-tag\">img<\/span>  \r\n  src=<span class=\"hljs-string\">\"default.jpg\"<\/span>  \r\n  srcset=<span class=\"hljs-string\">\"small.jpg 480w, medium.jpg 768w, large.jpg 1200w\"<\/span>  \r\n  sizes=<span class=\"hljs-string\">\"(max-width: 600px) 480px, (max-width: 1024px) 768px, 1200px\"<\/span>  \r\n  alt=<span class=\"hljs-string\">\"\ubc18\uc751\ud615 \uc774\ubbf8\uc9c0 \uc608\uc2dc\"<\/span>  \r\n&gt;\r\n<\/code><\/pre>\n<hr \/>\n<h2 id=\"-3-\"><span class=\"ez-toc-section\" id=\"3_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%ED%85%8C%EC%8A%A4%ED%8A%B8_%EC%B5%9C%EC%A0%81%ED%99%94_%EB%B0%A9%EB%B2%95\"><\/span><strong>3. \ubc18\uc751\ud615 \uc6f9 \ud14c\uc2a4\ud2b8 &amp; \ucd5c\uc801\ud654 \ubc29\ubc95<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"-1-\"><span class=\"ez-toc-section\" id=\"1_%ED%81%AC%EB%A1%9C%EC%8A%A4_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95_%ED%85%8C%EC%8A%A4%ED%8A%B8\"><\/span><strong>(1) \ud06c\ub85c\uc2a4 \ube0c\ub77c\uc6b0\uc9d5 \ud14c\uc2a4\ud2b8<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Chrome DevTools<\/strong>: <code>Device Mode<\/code>\ub85c \ub2e4\uc591\ud55c \uae30\uae30 \ud654\uba74 \ud14c\uc2a4\ud2b8<\/li>\n<li><strong><a href=\"https:\/\/www.browserstack.com\/\" target=\"_blank\" rel=\"noopener\">BrowserStack<\/a><\/strong>: \uc2e4\uc81c \uae30\uae30\uc5d0\uc11c \uc6f9\uc0ac\uc774\ud2b8 \ud655\uc778<\/li>\n<li><strong><a href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener\">Google Mobile-Friendly Test<\/a><\/strong>: \ubaa8\ubc14\uc77c \ucd5c\uc801\ud654 \uac80\uc0ac<\/li>\n<\/ul>\n<h3 id=\"-2-\"><span class=\"ez-toc-section\" id=\"2_%EC%84%B1%EB%8A%A5_%EC%B5%9C%EC%A0%81%ED%99%94\"><\/span><strong>(2) \uc131\ub2a5 \ucd5c\uc801\ud654<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>\uc774\ubbf8\uc9c0 \uc555\ucd95<\/strong>: <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">TinyPNG<\/a>\ub85c \uc6a9\ub7c9 \uc904\uc774\uae30<\/li>\n<li><strong>\ub808\uc774\uc9c0 \ub85c\ub529(Lazy Loading)<\/strong>: <code>loading=\"lazy\"<\/code> \uc18d\uc131 \ucd94\uac00<\/li>\n<li><strong>CSS\/JS \ucd5c\uc18c\ud654<\/strong>: <a href=\"https:\/\/purgecss.com\/\" target=\"_blank\" rel=\"noopener\">PurgeCSS<\/a>\ub85c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \ucf54\ub4dc \uc81c\uac70<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"-4-\"><span class=\"ez-toc-section\" id=\"4_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC\"><\/span><strong>4. \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 \ud504\ub808\uc784\uc6cc\ud06c<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\uc9c1\uc811 \ucf54\ub529\ud558\uae30 \uc5b4\ub835\ub2e4\uba74, \uc774\ubbf8 \uac80\uc99d\ub41c \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ud65c\uc6a9\ud558\uc138\uc694.<\/p>\n<table>\n<thead>\n<tr>\n<th>\ud504\ub808\uc784\uc6cc\ud06c<\/th>\n<th>\ud2b9\uc9d5<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap<\/a><\/strong><\/td>\n<td>\uac00\uc7a5 \ub110\ub9ac \uc4f0\uc774\uba70, \ubc18\uc751\ud615 \uadf8\ub9ac\ub4dc \uc81c\uacf5<\/td>\n<\/tr>\n<tr>\n<td><strong><a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noopener\">Tailwind CSS<\/a><\/strong><\/td>\n<td>\uc720\ud2f8\ub9ac\ud2f0 \uae30\ubc18 CSS, \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \uc790\uc720\ub85c\uc6c0<\/td>\n<\/tr>\n<tr>\n<td><strong><a href=\"https:\/\/get.foundation\/\" target=\"_blank\" rel=\"noopener\">Foundation<\/a><\/strong><\/td>\n<td>\uc5d4\ud130\ud504\ub77c\uc774\uc988\uae09 \ubc18\uc751\ud615 \ub514\uc790\uc778 \uc9c0\uc6d0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2 id=\"-5-\"><span class=\"ez-toc-section\" id=\"5_%EA%B2%B0%EB%A1%A0_%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9%EC%9D%80_%ED%95%84%EC%88%98_%EC%8B%9C%EC%9E%91%ED%95%B4%EC%95%BC_%ED%95%A0_%EB%95%8C%EB%8B%A4\"><\/span><strong>5. \uacb0\ub860: \ubc18\uc751\ud615 \uc6f9\uc740 \ud544\uc218, \uc2dc\uc791\ud574\uc57c \ud560 \ub54c\ub2e4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc740 \ubaa8\ubc14\uc77c \ud2b8\ub798\ud53d\uc774 60%\ub97c \ub118\ub294 \ud604\uc2e4\uc5d0\uc11c \ud544\uc218\uc801\uc785\ub2c8\ub2e4. <strong>\uc720\ub3d9 \uadf8\ub9ac\ub4dc, \ubbf8\ub514\uc5b4 \ucffc\ub9ac, \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8 \uc804\ub7b5<\/strong>\uc744 \ud65c\uc6a9\ud558\uba74 \uc5b4\ub5a4 \uae30\uae30\uc5d0\uc11c\ub3c4 \uc644\ubcbd\ud55c UX\ub97c \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<blockquote><p><strong>\ud83d\ude80 \uc9c0\uae08 \ub2f9\uc2e0\uc758 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ubc18\uc751\ud615\uc73c\ub85c \uc5c5\uadf8\ub808\uc774\ub4dc\ud558\uc138\uc694!<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/responsive\" target=\"_blank\" rel=\"noopener\">Google\uc758 \ubc18\uc751\ud615 \uc6f9 \uac00\uc774\ub4dc<\/a> \ucc38\uace0<\/li>\n<li><strong><a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noopener\">Can I use<\/a><\/strong>\ub85c \ucd5c\uc2e0 CSS\/HTML \uc9c0\uc6d0 \uc5ec\ubd80 \ud655\uc778<\/li>\n<\/ul>\n<\/blockquote>\n<p>\uc774 \uac00\uc774\ub4dc\uac00 \ub3c4\uc6c0\uc774 \ub418\uc168\ub2e4\uba74, \ub313\uae00\ub85c \ud53c\ub4dc\ubc31\uc744 \ub0a8\uaca8\uc8fc\uc138\uc694. \ud568\uaed8 \ub354 \ub098\uc740 \uc6f9\uc744 \ub9cc\ub4e4\uc5b4 \uac11\uc2dc\ub2e4!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ubaa8\ubc14\uc77c \uae30\uae30 \uc0ac\uc6a9\uc774 \ub370\uc2a4\ud06c\ud1b1\uc744 \uc55e\uc9c0\ub974\ub294 \uc2dc\ub300\uc5d0\uc11c, \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778(Responsive Web Design, RWD)\uc740 \ub354 \uc774\uc0c1 \uc120\ud0dd\uc774 \uc544\ub2cc \ud544\uc218\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc2a4\ub9c8\ud2b8\ud3f0, \ud0dc\ube14\ub9bf, \ub178\ud2b8\ubd81 \ub4f1 \uc5b4\ub5a4 \uae30\uae30\ub85c \uc811\uc18d\ud558\ub4e0 \ucd5c\uc801\ud654\ub41c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\ub294 \ubc18\uc751\ud615 \uc6f9\uc740 \uac80\uc0c9 \uc5d4\uc9c4 \ucd5c\uc801\ud654(SEO)\uc640 \uc0ac\uc6a9\uc790 \ub9cc\uc871\ub3c4(UX)\ub97c \ub3d9\uc2dc\uc5d0 \ub192\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ubc18\uc751\ud615 \uc6f9\uc744 \uad6c\ud604\ud558\ub294 \ud575\uc2ec \ubc29\ubc95\uacfc \ucd5c\uc2e0 \ud2b8\ub80c\ub4dc\ub97c \uc815\ub9ac\ud588\uc2b5\ub2c8\ub2e4. \uac1c\ubc1c\uc790, \ub514\uc790\uc774\ub108, \ud639\uc740 \uc6f9 \uc0ac\uc774\ud2b8 \uc6b4\uc601\uc790\ub77c\uba74 \uc774 \uac00\uc774\ub4dc\ub97c [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":26986,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[70],"tags":[],"class_list":["post-26985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-ko"],"_links":{"self":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/comments?post=26985"}],"version-history":[{"count":2,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26985\/revisions"}],"predecessor-version":[{"id":26991,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26985\/revisions\/26991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/media\/26986"}],"wp:attachment":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/media?parent=26985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/categories?post=26985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/tags?post=26985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}