{"id":26985,"date":"2025-04-08T14:35:40","date_gmt":"2025-04-08T07:35:40","guid":{"rendered":"https:\/\/hitek.com.vn\/?p=26985"},"modified":"2026-04-23T16:38:49","modified_gmt":"2026-04-23T09:38:49","slug":"responsive-web-development","status":"publish","type":"post","link":"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/","title":{"rendered":"\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub97c \uc704\ud55c \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 \uac00\uc774\ub4dc"},"content":{"rendered":"<p><strong>\ub2f9\uc2e0\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624\uac00 \uc544\uc774\ud3f0 SE\uc5d0\uc11c \u2018\uae68\uc9c4\ub2e4\u2019\uba74, \ub2f9\uc2e0\uc740 \ubb38\uc81c\uac00 \uc788\ub294 \uac81\ub2c8\ub2e4.<\/strong><\/p>\n<p>\ubaa8\ubc14\uc77c \ud2b8\ub798\ud53d\uc740 \uc804\uccb4 \uc6f9 \ud2b8\ub798\ud53d\uc758 64%\ub97c \ub118\uc5b4\uc130\uc2b5\ub2c8\ub2e4. \ub354 \uc774\uc0c1 \u2018\ubc18\uc751\ud615\u2019\uc740 \uc635\uc158\uc774 \uc544\ub2cc, \uc0dd\uc874 \uc804\ub7b5\uc785\ub2c8\ub2e4. \uad6c\uae00\uc740 \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8 \uc778\ub371\uc2f1\uc744 \uae30\ubcf8\uc73c\ub85c \uc0bc\uace0 \uc788\uc73c\uba70, <a href=\"https:\/\/web.dev\/learn\/design\/\" target=\"_blank\" rel=\"noopener\">\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778<\/a>\uc758 \ud575\uc2ec \uc6d0\ub9ac\ub97c \ubb34\uc2dc\ud558\ub294 \uc21c\uac04 \ub2f9\uc2e0\uc758 \uac80\uc0c9 \uc21c\uc704\ub294 \ucd94\ub77d\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uac00\uc774\ub4dc\ub294 \ub2e8\uc21c\ud55c \uc774\ub860\uc774 \uc544\ub2d9\ub2c8\ub2e4. \ub2f9\uc2e0\uc758 \ucf54\ub4dc\uac00 \ubaa8\ub4e0 \ub514\ubc14\uc774\uc2a4\uc5d0\uc11c \uc644\ubcbd\ud558\uac8c \u2018\ube5b\ub098\ub3c4\ub85d\u2019 \ud558\ub294 \uc2e4\ud589 \uc804\ub7b5\uc785\ub2c8\ub2e4. <code>@media<\/code>\ub9cc \uc368\ubcf8 \ucd08\ubcf4\uc790\ub294 \ub4a4\ub85c \uac00\uae30 \ubc84\ud2bc\uc744 \ub20c\ub7ec\uc8fc\uc138\uc694. \uc6b0\ub9ac\ub294 <strong>\ucee8\ud14c\uc774\ub108 \ucffc\ub9ac(Container Queries)<\/strong>\uc640 <strong>\uc720\ub3d9\uc801 \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c(Fluid Typography)<\/strong>\ub85c \ubb34\uc7a5\ud55c \uc2e4\uc804 \uc804\uc220\uc744 \ub17c\uc758\ud569\ub2c8\ub2e4.<\/p>\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%AA%A8%EB%B0%94%EC%9D%BC_%ED%8D%BC%EC%8A%A4%ED%8A%B8_%EC%9D%B4%EC%A0%9C%EB%8A%94_%E2%80%98%EC%BB%A8%ED%85%90%EC%B8%A0_%ED%8D%BC%EC%8A%A4%ED%8A%B8%EC%9E%85%EB%8B%88%EB%8B%A4\" >1. \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8? \uc774\uc81c\ub294 \u2018\ucee8\ud150\uce20 \ud37c\uc2a4\ud2b8\u2019\uc785\ub2c8\ub2e4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#2_%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC%EC%9D%98_%EC%A2%85%EB%A7%90_%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%84%88_%EC%BF%BC%EB%A6%AC%EC%99%80%EC%9D%98_%EA%B3%B5%EC%A1%B4\" >2. \ubbf8\ub514\uc5b4 \ucffc\ub9ac\uc758 \uc885\ub9d0? \ucee8\ud14c\uc774\ub108 \ucffc\ub9ac\uc640\uc758 \uacf5\uc874<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#%EC%84%B1%EB%8A%A5%EA%B3%BC_UIUX%EB%A5%BC_%EC%9C%84%ED%95%9C_%EA%B7%B8%EB%A6%AC%EB%93%9C_%EC%A0%84%EB%9E%B5\" >\uc131\ub2a5\uacfc UI\/UX\ub97c \uc704\ud55c \uadf8\ub9ac\ub4dc \uc804\ub7b5<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#3_%EA%B8%80%EC%9E%90_%ED%81%AC%EA%B8%B0%EB%A5%BC_%EA%B3%A0%EC%A0%95%ED%95%98%EC%A7%80_%EB%A7%88%EB%9D%BC_Clamp%EC%9D%98_%EB%A7%88%EB%B2%95\" >3. \uae00\uc790 \ud06c\uae30\ub97c \uace0\uc815\ud558\uc9c0 \ub9c8\ub77c: Clamp()\uc758 \ub9c8\ubc95<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#4_%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84_%ED%92%88%EC%9D%80_%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98_%ED%96%84%EB%B2%84%EA%B1%B0%EB%8A%94_%EC%A3%84%EA%B0%80_%EC%97%86%EB%8B%A4\" >4. \uc811\uadfc\uc131\uc744 \ud488\uc740 \ub124\ube44\uac8c\uc774\uc158: \ud584\ubc84\uac70\ub294 \uc8c4\uac00 \uc5c6\ub2e4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/responsive-web-development\/#5_%EC%9D%B4%EB%AF%B8%EC%A7%80_%EC%84%B1%EB%8A%A5%EC%9D%84_%EC%A3%BD%EC%9D%B4%EB%8A%94_%EC%9E%90_%EC%97%AC%EA%B8%B0_%EB%AA%A8%EC%97%AC%EB%9D%BC\" >5. \uc774\ubbf8\uc9c0: \uc131\ub2a5\uc744 \uc8fd\uc774\ub294 \uc790, \uc5ec\uae30 \ubaa8\uc5ec\ub77c<\/a><ul class='ez-toc-list-level-3' ><li class='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\/#%EC%B2%B4%ED%81%AC%EB%A6%AC%EC%8A%A4%ED%8A%B8_%EB%8B%B9%EC%8B%A0%EC%9D%98_%EB%B0%98%EC%9D%91%ED%98%95%EC%9D%80_%EA%B1%B4%EA%B0%95%ED%95%9C%EA%B0%80%EC%9A%94\" >\uccb4\ud06c\ub9ac\uc2a4\ud2b8: \ub2f9\uc2e0\uc758 \ubc18\uc751\ud615\uc740 \uac74\uac15\ud55c\uac00\uc694?<\/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\/#%EA%B2%B0%EB%A1%A0_%EC%99%84%EB%B2%BD%ED%95%9C_%EC%A0%81%EC%9D%91%EC%9D%80_%ED%83%80%ED%98%91%EC%9D%B4_%EC%95%84%EB%8B%88%EB%8B%A4\" >\uacb0\ub860: \uc644\ubcbd\ud55c \uc801\uc751\uc740 \ud0c0\ud611\uc774 \uc544\ub2c8\ub2e4<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"1-\"><span class=\"ez-toc-section\" id=\"1_%EB%AA%A8%EB%B0%94%EC%9D%BC_%ED%8D%BC%EC%8A%A4%ED%8A%B8_%EC%9D%B4%EC%A0%9C%EB%8A%94_%E2%80%98%EC%BB%A8%ED%85%90%EC%B8%A0_%ED%8D%BC%EC%8A%A4%ED%8A%B8%EC%9E%85%EB%8B%88%EB%8B%A4\"><\/span>1. \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8? \uc774\uc81c\ub294 \u2018\ucee8\ud150\uce20 \ud37c\uc2a4\ud2b8\u2019\uc785\ub2c8\ub2e4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\uc624\ub798\ub41c \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8 \uc804\ub7b5\uc740 \uc774\uc81c \uae30\ubcf8 \uc18c\uc591\uc77c \ubfd0\uc785\ub2c8\ub2e4. 2026\ub144\uc758 \uc9c4\uc9dc \uc2b9\ubd80\ub294 <strong>\ucf58\ud150\uce20 \uc6b0\uc120 \uad6c\uc870<\/strong>\uc5d0 \ub2ec\ub824\uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ubdf0\ud3ec\ud2b8 \uc124\uc815\ubd80\ud130 \uc81c\ub300\ub85c \ud569\uc2dc\ub2e4. \ub9ce\uc740 \uac1c\ubc1c\uc790\uac00 <code>user-scalable=no<\/code>\ub97c \ub0a8\ubc1c\ud558\ub294\ub370, \uadf8\uac74 <strong>\uc811\uadfc\uc131(Accessibility)<\/strong>\uc744 \ud30c\uad34\ud558\ub294 \ud589\uc704\uc785\ub2c8\ub2e4. \uc800\uc2dc\ub825 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub2f9\uc2e0\uc758 \uc0ac\uc774\ud2b8\ub294 \uc9c0\uc625\uc774\ub098 \ub2e4\ub984\uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code class=\"lang-html\"><span class=\"hljs-comment\">&lt;!-- \uc808\ub300 \uc774\ub807\uac8c \ud558\uc9c0 \ub9c8\uc138\uc694 --&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, user-scalable=no\"<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\">&lt;!-- \uace0\uc218\ub294 \uc774\ub807\uac8c \ud569\ub2c8\ub2e4 --&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>\uc774 \ud55c \uc904\uc774\uba74 \uc0ac\uc6a9\uc790\uac00 \ud655\ub300\/\ucd95\uc18c\ud560 \uc790\uc720\ub97c \uc8fc\uba74\uc11c\ub3c4 \uae30\uae30\uc758 \uc2e4\uc81c \ub108\ube44\uc5d0 \ub9de\ucdb0 \ub808\uc774\uc544\uc6c3\uc744 \uc870\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\u201c\uc0ac\uc6a9\uc790\uac00 \ud655\ub300\ub97c \ubabb \ud558\uac8c \ub9c9\uc9c0 \ub9c8\uc138\uc694. \ub2f9\uc2e0\uc758 \ub514\uc790\uc778\uc740 \uc0dd\uac01\ubcf4\ub2e4 \uadf8\ub807\uac8c \uc644\ubcbd\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\u201d<\/p>\n<h2 id=\"2-\"><span class=\"ez-toc-section\" id=\"2_%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC%EC%9D%98_%EC%A2%85%EB%A7%90_%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%84%88_%EC%BF%BC%EB%A6%AC%EC%99%80%EC%9D%98_%EA%B3%B5%EC%A1%B4\"><\/span>2. \ubbf8\ub514\uc5b4 \ucffc\ub9ac\uc758 \uc885\ub9d0? \ucee8\ud14c\uc774\ub108 \ucffc\ub9ac\uc640\uc758 \uacf5\uc874<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\uc194\uc9c1\ud788 \ub9d0\ud574\ubd05\uc2dc\ub2e4. \uc804\ud1b5\uc801\uc778 \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub294 \u2018\ud398\uc774\uc9c0\u2019 \uae30\uc900\uc73c\ub85c \ub108\ubb34 \ubee3\ubee3\ud569\ub2c8\ub2e4. \ub3d9\uc77c\ud55c \uce74\ub4dc \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc0ac\uc774\ub4dc\ubc14\uc5d0 \uc788\uc744 \ub54c\uc640 \uba54\uc778 \uc601\uc5ed\uc5d0 \uc788\uc744 \ub54c \ub611\uac19\uc774 \ubcf4\uc5ec\uc57c \ud560 \uc774\uc720\uac00 \uc5c6\uc8e0.<\/p>\n<p><strong>\ud574\uacb0\uc0ac, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_container_queries\" target=\"_blank\" rel=\"noopener\">\ucee8\ud14c\uc774\ub108 \ucffc\ub9ac(Container Queries)<\/a>\uac00 \ub4f1\uc7a5\ud569\ub2c8\ub2e4.<\/strong><\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-comment\">\/* \ubd80\ubaa8 \uc694\uc18c\uc5d0\uac8c \ucee8\ud14c\uc774\ub108 \uad8c\ud55c \ubd80\uc5ec *\/<\/span>\r\n<span class=\"hljs-selector-class\">.card-container<\/span> {\r\n  <span class=\"hljs-attribute\">container-type<\/span>: inline-size;\r\n}\r\n\r\n<span class=\"hljs-comment\">\/* \ucee8\ud14c\uc774\ub108 \ub113\uc774\uc5d0 \ub530\ub77c \uce74\ub4dc \uc2a4\ud0c0\uc77c \ubcc0\uacbd *\/<\/span>\r\n@<span class=\"hljs-keyword\">container<\/span> (min-width: <span class=\"hljs-number\">400px<\/span>) {\r\n  <span class=\"hljs-selector-class\">.card<\/span> {\r\n    <span class=\"hljs-attribute\">display<\/span>: flex;\r\n    <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">2rem<\/span>;\r\n  }\r\n  <span class=\"hljs-selector-class\">.card<\/span> <span class=\"hljs-selector-tag\">img<\/span> {\r\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">40%<\/span>;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>\uc774\uc81c \ubc84\ud2bc\uc740 \ub354 \uc774\uc0c1 \ud654\uba74 \ud06c\uae30\uc5d0 \ubc18\uc751\ud558\ub294 \uac83\uc774 \uc544\ub2cc, <strong>\ud560\ub2f9\ub41c \uacf5\uac04<\/strong>\uc5d0 \ubc18\uc751\ud569\ub2c8\ub2e4. \uc774\ub294 <strong>\ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uc124\uacc4(Component-Driven Design)<\/strong>\uc758 \uc644\uc131\uc774\ub098 \ub2e4\ub984\uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n<h3 id=\"-ui-ux-\"><span class=\"ez-toc-section\" id=\"%EC%84%B1%EB%8A%A5%EA%B3%BC_UIUX%EB%A5%BC_%EC%9C%84%ED%95%9C_%EA%B7%B8%EB%A6%AC%EB%93%9C_%EC%A0%84%EB%9E%B5\"><\/span>\uc131\ub2a5\uacfc UI\/UX\ub97c \uc704\ud55c \uadf8\ub9ac\ub4dc \uc804\ub7b5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\ubc18\uc751\ud615\uc758 \ud575\uc2ec\uc740 <code>display: grid<\/code>\uc640 <code>flex<\/code>\uc758 \uc801\uc808\ud55c \ud63c\uc6a9\uc785\ub2c8\ub2e4. \uc544\ub798 \ud45c\uac00 \uad00\uacc4\ub97c \uc815\ub9ac\ud574\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">\ud2b9\uc131<\/th>\n<th style=\"text-align: left;\"><strong>CSS Grid<\/strong><\/th>\n<th style=\"text-align: left;\"><strong>Flexbox<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>\ucc28\uc6d0<\/strong><\/td>\n<td style=\"text-align: left;\">2\ucc28\uc6d0 (\ud589\uacfc \uc5f4 \ub3d9\uc2dc \uc81c\uc5b4)<\/td>\n<td style=\"text-align: left;\">1\ucc28\uc6d0 (\ub2e8\uc77c \ud589 \ub610\ub294 \uc5f4)<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>\uc801\ud569\ud55c \uacf3<\/strong><\/td>\n<td style=\"text-align: left;\">\uc804\uccb4 \ud398\uc774\uc9c0 \ub808\uc774\uc544\uc6c3, \uac24\ub7ec\ub9ac<\/td>\n<td style=\"text-align: left;\">\ub124\ube44\uac8c\uc774\uc158 \ubc14, \ub0b4\ubd80 \ucef4\ud3ec\ub10c\ud2b8 \uc815\ub82c<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>2026 \ud2b8\ub80c\ub4dc<\/strong><\/td>\n<td style=\"text-align: left;\"><code>auto-fit<\/code>\uacfc <code>minmax<\/code>\ub85c \ubc18\uc751\ud615 \uadf8\ub9ac\ub4dc \uad6c\ud604<\/td>\n<td style=\"text-align: left;\"><code>gap<\/code> \uc18d\uc131\uc73c\ub85c \ub9c8\uc9c4 \ubb38\uc81c \ud574\uacb0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"3-clamp-\"><span class=\"ez-toc-section\" id=\"3_%EA%B8%80%EC%9E%90_%ED%81%AC%EA%B8%B0%EB%A5%BC_%EA%B3%A0%EC%A0%95%ED%95%98%EC%A7%80_%EB%A7%88%EB%9D%BC_Clamp%EC%9D%98_%EB%A7%88%EB%B2%95\"><\/span>3. \uae00\uc790 \ud06c\uae30\ub97c \uace0\uc815\ud558\uc9c0 \ub9c8\ub77c: Clamp()\uc758 \ub9c8\ubc95<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u201c\uc774 14px \uae00\uc528\uac00 \ub370\uc2a4\ud06c\ud0d1\uc5d0\uc11c \ub108\ubb34 \uc791\ub124\uc694.\u201d \uc774 \ub9d0, \uc774\uc81c \uadf8\ub9cc \ud569\uc2dc\ub2e4. <strong>\uc720\ub3d9\uc801 \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c<\/strong>\ub97c \ub3c4\uc785\ud558\uc138\uc694. <code>clamp()<\/code> \ud568\uc218\ub294 \ub2f9\uc2e0\uc758 \ub514\uc790\uc778\uc5d0 \ub0a0\uac1c\ub97c \ub2ec\uc544\uc90d\ub2c8\ub2e4.<\/p>\n<p>\ub354 \uc774\uc0c1 320px, 768px, 1024px\ub9c8\ub2e4 \ud3f0\ud2b8 \ud06c\uae30\ub97c \uc77c\uc77c\uc774 \uc9c0\uc815\ud560 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-comment\">\/* \uc774\uac83\uc774 \ubbf8\ub798\uc758 \ud3f0\ud2b8 \uc124\uc815 \ubc29\uc2dd\uc785\ub2c8\ub2e4 *\/<\/span>\r\n<span class=\"hljs-selector-tag\">h1<\/span> {\r\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-built_in\">clamp<\/span>(1.8rem, 5vw + 1rem, 4rem);\r\n}\r\n<\/code><\/pre>\n<p>\uc774 \ud55c \uc904\uc758 \ucf54\ub4dc\ub294 \ucd5c\uc18c 1.8rem, \ucd5c\ub300 4rem \uc0ac\uc774\uc5d0\uc11c \ubdf0\ud3ec\ud2b8 \ub108\ube44\uc5d0 \ub530\ub77c \uc790\uc5f0\uc2a4\ub7fd\uac8c \ud758\ub7ec\uac11\ub2c8\ub2e4.<\/p>\n<p>\ubcf8\ubb38 \ud3f0\ud2b8\ub294 \ucd5c\uc18c <code>16px<\/code>(\ub610\ub294 1rem)\uc744 \ubcf4\uc7a5\ud558\uc138\uc694. \uc774\ub294 \ub2e8\uc21c\ud55c \uc2a4\ud0c0\uc77c\uc774 \uc544\ub2c8\ub77c, \uc0ac\uc6a9\uc790\uac00 \uae00\uc744 \uc77d\uc9c0 \uc54a\uace0 \uc774\ud0c8\ud558\ub294 \uac83\uc744 \ubc29\uc9c0\ud558\ub294 \ucd5c\uc18c\ud55c\uc758 \uc608\uc758\uc785\ub2c8\ub2e4.<\/p>\n<h2 id=\"4-\"><span class=\"ez-toc-section\" id=\"4_%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84_%ED%92%88%EC%9D%80_%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98_%ED%96%84%EB%B2%84%EA%B1%B0%EB%8A%94_%EC%A3%84%EA%B0%80_%EC%97%86%EB%8B%A4\"><\/span>4. \uc811\uadfc\uc131\uc744 \ud488\uc740 \ub124\ube44\uac8c\uc774\uc158: \ud584\ubc84\uac70\ub294 \uc8c4\uac00 \uc5c6\ub2e4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\ud584\ubc84\uac70 \uba54\ub274\ub294 \u2018\ubc1c\uc554\uc801\u2019\uc774\ub77c\ub294 \ub9d0\uc774 \uc788\uc9c0\ub9cc, \uadf8\uac74 <strong>\uad6c\ud604\uc744 \ubabb\ud588\uae30 \ub54c\ubb38<\/strong>\uc785\ub2c8\ub2e4. \ub2f9\uc2e0\uc774 \uace0\uc218\ub77c\uba74, \ud584\ubc84\uac70 \uba54\ub274\ub97c \ub2e8\uc21c\ud55c \ud1a0\uae00 \uc774\uc0c1\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li><strong>\ud130\uce58 \ud0c0\uac9f:<\/strong> \uc5b4\ub5a4 \uc0c1\ud638\uc791\uc6a9 \uc694\uc18c\ub4e0 \ucd5c\uc18c <code>44x44px<\/code> \uc774\uc0c1\uc758 \ud130\uce58 \uc601\uc5ed\uc744 \ud655\ubcf4\ud558\uc138\uc694. \uc5c4\uc9c0\uc190\uac00\ub77d\uc740 \uc815\ubc00 \uae30\uacc4\uac00 \uc544\ub2d9\ub2c8\ub2e4.<\/li>\n<li><strong>ARIA (Accessible Rich Internet Applications):<\/strong> \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ub124\ube44\uac8c\uc774\uc158\uc744 \uc5f4\uace0 \ub2eb\uc744 \ub54c, \uc2a4\ud06c\ub9b0 \ub9ac\ub354 \uc0ac\uc6a9\uc790\ub97c \uc704\ud574 <code>aria-expanded<\/code> \uc18d\uc131\uc744 \ubc18\ub4dc\uc2dc \ud1a0\uae00\ud558\uc138\uc694.<\/li>\n<\/ul>\n<pre><code class=\"lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">aria-expanded<\/span>=<span class=\"hljs-string\">\"false\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"\uba54\ub274 \uc5f4\uae30\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span>&gt;<\/span><span class=\"hljs-comment\">&lt;!-- \uc544\uc774\ucf58 --&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>\uc774\uac83\uc740 \ub2e8\uc21c\ud55c \ucf54\ub529\uc774 \uc544\ub2c8\ub77c, \uc7a5\uc560\uc778 \ucc28\ubcc4 \uae08\uc9c0\ubc95(WCAG)\uc744 \uc900\uc218\ud558\ub294 <strong>\uc2e0\ub8b0\ud560 \uc218 \uc788\ub294 \uac1c\ubc1c\uc790(EEAT)<\/strong>\uc758 \uc99d\uac70\uc785\ub2c8\ub2e4.<\/p>\n<h2 id=\"5-\"><span class=\"ez-toc-section\" id=\"5_%EC%9D%B4%EB%AF%B8%EC%A7%80_%EC%84%B1%EB%8A%A5%EC%9D%84_%EC%A3%BD%EC%9D%B4%EB%8A%94_%EC%9E%90_%EC%97%AC%EA%B8%B0_%EB%AA%A8%EC%97%AC%EB%9D%BC\"><\/span>5. \uc774\ubbf8\uc9c0: \uc131\ub2a5\uc744 \uc8fd\uc774\ub294 \uc790, \uc5ec\uae30 \ubaa8\uc5ec\ub77c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>LCP(Largest Contentful Paint) \uc810\uc218\uac00 \ud615\ud3b8\uc5c6\ub098\uc694? \uc6d0\uc778\uc740 <strong>\uc774\ubbf8\uc9c0<\/strong>\uc785\ub2c8\ub2e4. \ubc18\uc751\ud615 \uc774\ubbf8\uc9c0\ub97c \ub85c\ub4dc\ud560 \ub54c\ub294 \u2018\ubaa8\ub4e0 \uc0ac\ub78c\uc5d0\uac8c \ub3d9\uc77c\ud55c \ud30c\uc77c\u2019\uc774\ub77c\ub294 \uc0dd\uac01\uc744 \ubc84\ub9ac\uc138\uc694.<\/p>\n<p><code>srcset<\/code>\uacfc <code>sizes<\/code> \uc18d\uc131\uc744 \ud65c\uc6a9\ud558\uc2ed\uc2dc\uc624.<\/p>\n<pre><code class=\"lang-html\">&lt;<span class=\"hljs-selector-tag\">img<\/span> src=<span class=\"hljs-string\">\"hero-default.jpg\"<\/span>\r\n     srcset=<span class=\"hljs-string\">\"hero-small.jpg 480w, hero-large.jpg 1200w\"<\/span>\r\n     sizes=<span class=\"hljs-string\">\"(max-width: 768px) 100vw, 50vw\"<\/span>\r\n     alt=<span class=\"hljs-string\">\"\uba85\ud655\ud55c \ub300\uccb4 \ud14d\uc2a4\ud2b8\"<\/span>\r\n     loading=<span class=\"hljs-string\">\"lazy\"<\/span>&gt;\r\n<\/code><\/pre>\n<p>\ub610\ud55c, \ucd5c\uc2e0 \ud3ec\ub9f7\uc778 <strong>WebP<\/strong> \ub610\ub294 <strong>AVIF<\/strong> \uc0ac\uc6a9\uc744 \uc8fc\uc800\ud558\uc9c0 \ub9c8\uc138\uc694. \ud30c\uc77c \ud06c\uae30\ub294 \uc904\uc774\uace0 \ud488\uc9c8\uc740 \uc720\uc9c0\ud558\ub294\uac8c \ub3d9\uc2dc\ub300 \uc6f9 \uac1c\ubc1c\uc790\uc758 \uc758\ubb34\uc785\ub2c8\ub2e4.<\/p>\n<h3 id=\"-\"><span class=\"ez-toc-section\" id=\"%EC%B2%B4%ED%81%AC%EB%A6%AC%EC%8A%A4%ED%8A%B8_%EB%8B%B9%EC%8B%A0%EC%9D%98_%EB%B0%98%EC%9D%91%ED%98%95%EC%9D%80_%EA%B1%B4%EA%B0%95%ED%95%9C%EA%B0%80%EC%9A%94\"><\/span>\uccb4\ud06c\ub9ac\uc2a4\ud2b8: \ub2f9\uc2e0\uc758 \ubc18\uc751\ud615\uc740 \uac74\uac15\ud55c\uac00\uc694?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\ubc30\ud3ec\ud558\uae30 \uc804\uc5d0 \uc774 \uc9c8\ubb38\uc5d0 \u2018\uc544\ub2c8\uc624\u2019\uac00 \uc788\ub2e4\uba74, \uc624\ub298 \ubc24 \ubc30\ud3ec\ub294 \ucde8\uc18c\ud558\uc138\uc694.<\/p>\n<ol>\n<li>400% \ud655\ub300\ud574\ub3c4 \uac00\ub85c \uc2a4\ud06c\ub864\uc774 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\ub294\uac00? (WCAG 2.1 \uc900\uc218 \uae30\uc900)<\/li>\n<li>\ud130\uce58 \uc694\uc18c \uc0ac\uc774\uc5d0 8px \uc774\uc0c1\uc758 \uc5ec\ubc31\uc774 \uc788\ub294\uac00?<\/li>\n<li>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uac00 \ub85c\ub4dc\ub418\uc9c0 \uc54a\uc544\ub3c4 \ud575\uc2ec \ucf58\ud150\uce20\uc5d0 \uc811\uadfc \uac00\ub2a5\ud55c\uac00?<\/li>\n<li><code>prefers-color-scheme<\/code> (\ub2e4\ud06c \ubaa8\ub4dc)\ub97c \uace0\ub824\ud588\ub294\uac00?<\/li>\n<li>INP(Interaction to Next Paint) \uc810\uc218\uac00 200ms \ubbf8\ub9cc\uc778\uac00?<\/li>\n<\/ol>\n<h2 id=\"-\"><span class=\"ez-toc-section\" id=\"%EA%B2%B0%EB%A1%A0_%EC%99%84%EB%B2%BD%ED%95%9C_%EC%A0%81%EC%9D%91%EC%9D%80_%ED%83%80%ED%98%91%EC%9D%B4_%EC%95%84%EB%8B%88%EB%8B%A4\"><\/span>\uacb0\ub860: \uc644\ubcbd\ud55c \uc801\uc751\uc740 \ud0c0\ud611\uc774 \uc544\ub2c8\ub2e4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc740 \ub354 \uc774\uc0c1 \u2018\uc791\uac8c \ubcf4\uc774\ub294 \uac83\u2019\uc744 \ub118\uc5b4, <strong>\ubaa8\ub4e0 \ub9e5\ub77d(Context)\uc5d0\uc11c \ucd5c\uc801\uc758 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\ub294 \uae30\uc220<\/strong>\uc785\ub2c8\ub2e4. \ucee8\ud14c\uc774\ub108 \ucffc\ub9ac\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub3c5\ub9bd\uc2dc\ud0a4\uace0, <code>clamp()<\/code>\ub85c \ud14d\uc2a4\ud2b8\ub97c \uc790\uc720\ub86d\uac8c \ud558\uba70, \uc811\uadfc\uc131\uc744 \ucf54\ub4dc\uc5d0 \ub179\uc5ec\ub0b4\ub294 \uc21c\uac04, \ub2f9\uc2e0\uc758 \ud504\ub860\ud2b8\uc5d4\ub4dc \uc2e4\ub825\uc740 \ud655\uc2e4\ud788 \u2018\ub2e4\ub978 \ub808\ubca8\u2019\uc5d0 \ub3c4\ub2ec\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc790, \uc774\uc81c \ub2f9\uc2e0\uc758 VS Code\ub97c \uc5f4\uc5b4 <code>viewport<\/code> \uc124\uc815\ubd80\ud130 \ub2e4\uc2dc \uc810\uac80\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c, \uc544\ub2c8\uba74 \uad6c\uc2dc\ub300\uc758 \uc720\uc0b0\uc73c\ub85c \ub0a8\uaca0\uc2b5\ub2c8\uae4c?<\/p>\n<hr \/>\n<p><em>\ud568\uaed8 \uc77d\uc73c\uba74 \uc88b\uc740 \uae00: [\ud504\ub860\ud2b8\uc5d4\ub4dc \uc131\ub2a5 \ucd5c\uc801\ud654: Core Web Vitals \ub9c8\uc2a4\ud130\ud558\uae30] \ubc0f [HTML\uc5d0\uc11c ARIA \uc81c\ub300\ub85c \uc4f0\ub294 \ubc95]<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ub2f9\uc2e0\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624\uac00 \uc544\uc774\ud3f0 SE\uc5d0\uc11c \u2018\uae68\uc9c4\ub2e4\u2019\uba74, \ub2f9\uc2e0\uc740 \ubb38\uc81c\uac00 \uc788\ub294 \uac81\ub2c8\ub2e4. \ubaa8\ubc14\uc77c \ud2b8\ub798\ud53d\uc740 \uc804\uccb4 \uc6f9 \ud2b8\ub798\ud53d\uc758 64%\ub97c \ub118\uc5b4\uc130\uc2b5\ub2c8\ub2e4. \ub354 \uc774\uc0c1 \u2018\ubc18\uc751\ud615\u2019\uc740 \uc635\uc158\uc774 \uc544\ub2cc, \uc0dd\uc874 \uc804\ub7b5\uc785\ub2c8\ub2e4. \uad6c\uae00\uc740 \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8 \uc778\ub371\uc2f1\uc744 \uae30\ubcf8\uc73c\ub85c \uc0bc\uace0 \uc788\uc73c\uba70, \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc758 \ud575\uc2ec \uc6d0\ub9ac\ub97c \ubb34\uc2dc\ud558\ub294 \uc21c\uac04 \ub2f9\uc2e0\uc758 \uac80\uc0c9 \uc21c\uc704\ub294 \ucd94\ub77d\ud569\ub2c8\ub2e4. \uc774 \uac00\uc774\ub4dc\ub294 \ub2e8\uc21c\ud55c \uc774\ub860\uc774 \uc544\ub2d9\ub2c8\ub2e4. \ub2f9\uc2e0\uc758 \ucf54\ub4dc\uac00 \ubaa8\ub4e0 \ub514\ubc14\uc774\uc2a4\uc5d0\uc11c \uc644\ubcbd\ud558\uac8c \u2018\ube5b\ub098\ub3c4\ub85d\u2019 \ud558\ub294 \uc2e4\ud589 \uc804\ub7b5\uc785\ub2c8\ub2e4. [&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":4,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26985\/revisions"}],"predecessor-version":[{"id":34705,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26985\/revisions\/34705"}],"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}]}}