{"id":111,"date":"2026-06-26T13:32:39","date_gmt":"2026-06-26T13:32:39","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=111"},"modified":"2026-06-26T13:32:39","modified_gmt":"2026-06-26T13:32:39","slug":"css%ea%b8%b0%ec%b4%88","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=111","title":{"rendered":"CSS"},"content":{"rendered":"<h1>02. index.css \u2014 \uae30\ubcf8 \uc2a4\ud0c0\uc77c \uc124\uc815<\/h1>\n<h2>\uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c<\/h2>\n<p>\ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uacf5\ud1b5\uc73c\ub85c \uc801\uc6a9\ub418\ub294 <strong>\uae30\ubcf8 \uc2a4\ud0c0\uc77c<\/strong>\uc744 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\uc65c \ucd08\uae30\ud654\uac00 \ud544\uc694\ud55c\uac00\uc694?<\/h2>\n<p>\ube0c\ub77c\uc6b0\uc800(Chrome, Firefox, Edge \ub4f1)\ub9c8\ub2e4 <strong>\uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc774 \uc870\uae08\uc529 \ub2e4\ub985\ub2c8\ub2e4<\/strong>.<br \/>\n\uc608\ub97c \ub4e4\uc5b4 <code>&lt;h1&gt;<\/code> \ud0dc\uadf8\uc758 \uae30\ubcf8 \ud06c\uae30\ub098 \uc5ec\ubc31\uc774 \ube0c\ub77c\uc6b0\uc800\ub9c8\ub2e4 \ub2e4\ub97c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774 \ud504\ub85c\uc81d\ud2b8\ub294 <code>reset-css<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c \ucd08\uae30\ud654\ub97c \ud569\ub2c8\ub2e4.<br \/>\n<code>npm install<\/code> \uc2dc \uc774\ubbf8 \uc124\uce58\ub418\uc5b4 \uc788\uc73c\uba70, <code>@import<\/code> \ub85c \ubd88\ub7ec\uc635\ub2c8\ub2e4.<\/p>\n<hr>\n<pre><code>npm install reset-css\n<\/code><\/pre>\n<h2>index.css \uc804\uccb4 \ucf54\ub4dc<\/h2>\n<pre><code class=\"language-css\">\/* src\/index.css *\/\n\n\/* \u2500\u2500\u2500 1. \uc804\uccb4 \ucd08\uae30\ud654 (\ub77c\uc774\ube0c\ub7ec\ub9ac) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@import &quot;reset-css\/reset.css&quot;;\n\n\/* \u2500\u2500\u2500 2. \uae30\ubcf8 \ud3f0\ud2b8\u00b7\uc0c9\uc0c1 \uc124\uc815 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\nbody {\n  font-family: &quot;Pretendard Variable&quot;, Pretendard, &quot;Malgun Gothic&quot;, sans-serif;\n  background-color: #ffffff;\n  color: #1e1e1e;\n}\n\n\/* \u2500\u2500\u2500 3. \ub9c1\ud06c \uae30\ubcf8 \uc2a4\ud0c0\uc77c \uc81c\uac70 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/* &lt;a&gt; \ud0dc\uadf8\uc758 \ud30c\ub780\uc0c9 \ubc11\uc904\uc744 \uc5c6\uc571\ub2c8\ub2e4 *\/\na {\n  text-decoration: none;\n  color: inherit;\n}\n\n\/* \u2500\u2500\u2500 4. \ubaa9\ub85d \uc2a4\ud0c0\uc77c \uc81c\uac70 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/* &lt;ul&gt; \ud0dc\uadf8\uc758 \uc810(\u2022)\uc744 \uc5c6\uc571\ub2c8\ub2e4 *\/\nul {\n  list-style: none;\n}\n\n\/* \u2500\u2500\u2500 5. \uc804\uccb4 \ub808\uc774\uc544\uc6c3 \ub108\ube44 \uc124\uc815 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/* \ucf58\ud150\uce20\ub97c \uac00\uc6b4\ub370 \uc815\ub82c\ud558\uace0 \uc88c\uc6b0 \uc5ec\ubc31 \ucd94\uac00 *\/\n.container {\n  padding: 0 10vw;\n  margin: 0 auto;\n}\n<\/code><\/pre>\n<hr>\n<h2>\ucf54\ub4dc \uc124\uba85<\/h2>\n<h3><code>@import &quot;reset-css\/reset.css&quot;<\/code> \ub780?<\/h3>\n<p>\uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ubd88\ub7ec\uc624\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<br \/>\n<code>reset-css<\/code> \ub294 \ube0c\ub77c\uc6b0\uc800\ub9c8\ub2e4 \ub2e4\ub978 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc744 \ubaa8\ub450 \uc81c\uac70\ud574\uc90d\ub2c8\ub2e4.<\/p>\n<blockquote>\n<p>\uc9c1\uc811 <code>* { margin: 0; padding: 0; }<\/code> \uc744 \uc4f0\ub294 \uac83\ubcf4\ub2e4 \ub354 \uc644\uc804\ud558\uac8c \ucd08\uae30\ud654\ub429\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n<h3><code>.container<\/code> \u2014 \ub808\uc774\uc544\uc6c3 \uac00\uc6b4\ub370 \uc815\ub82c<\/h3>\n<pre><code class=\"language-css\">.container {\n  padding: 0 10vw;  \/* \uc88c\uc6b0 \ud654\uba74 \ub108\ube44\uc758 10% \uc5ec\ubc31 *\/\n  margin: 0 auto;   \/* \uac00\uc6b4\ub370 \uc815\ub82c *\/\n}\n<\/code><\/pre>\n<ul>\n<li><code>10vw<\/code> \u2192 \ubdf0\ud3ec\ud2b8 \ub108\ube44\uc758 10% (\ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c \uc790\ub3d9\uc73c\ub85c \uc870\uc815\ub428)<\/li>\n<li><code>margin: 0 auto<\/code> \u2192 \ub0a8\uc740 \uacf5\uac04\uc744 \uc88c\uc6b0\ub85c \uade0\ub4f1\ud558\uac8c \ub098\ub214 \u2192 \uac00\uc6b4\ub370!<\/li>\n<\/ul>\n<p><code>App.jsx<\/code> \uc5d0\uc11c <code>&lt;div className=&quot;app container&quot;&gt;<\/code> \ub85c \uc774 \ud074\ub798\uc2a4\ub97c \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<h3><code>color: inherit<\/code> \ub780?<\/h3>\n<p>\ubd80\ubaa8 \uc694\uc18c\uc758 \uc0c9\uc0c1\uc744 <strong>\uadf8\ub300\ub85c \ubb3c\ub824\ubc1b\ub294\ub2e4<\/strong>\ub294 \ub73b\uc785\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-css\">a {\n  color: inherit; \/* \ubd80\ubaa8\uc758 color\ub97c \ub530\ub984 *\/\n}\n<\/code><\/pre>\n<p><code>&lt;a&gt;<\/code> \ud0dc\uadf8\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ud30c\ub780\uc0c9\uc774\uc9c0\ub9cc,<br \/>\n<code>inherit<\/code>\uc744 \uc4f0\uba74 \uc8fc\ubcc0 \ud14d\uc2a4\ud2b8 \uc0c9\uacfc \uac19\uc544\uc9d1\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\ube0c\ub77c\uc6b0\uc800 \ud655\uc778<\/h2>\n<p>\uc800\uc7a5 \ud6c4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ud655\uc778\ud558\uba74:<\/p>\n<ul>\n<li>\uae30\ubcf8 \uc5ec\ubc31\uc774 \uc0ac\ub77c\uc9d1\ub2c8\ub2e4<\/li>\n<li><code>Nav<\/code>, <code>Hero<\/code> \ub4f1\uc758 \ud14d\uc2a4\ud2b8\uac00 \uc67c\ucabd\uc5d0 \ubd99\uc5b4 \ubcf4\uc785\ub2c8\ub2e4<\/li>\n<\/ul>\n<hr>\n","protected":false},"excerpt":{"rendered":"<p>02. index.css \u2014 \uae30\ubcf8 \uc2a4\ud0c0\uc77c \uc124\uc815 \uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uacf5\ud1b5\uc73c\ub85c \uc801\uc6a9\ub418\ub294 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc744 \uc791\uc131\ud569\ub2c8\ub2e4. \uc65c \ucd08\uae30\ud654\uac00 \ud544\uc694\ud55c\uac00\uc694? \ube0c\ub77c\uc6b0\uc800(Chrome, Firefox, Edge \ub4f1)\ub9c8\ub2e4 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc774 \uc870\uae08\uc529 \ub2e4\ub985\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 &lt;h1&gt; \ud0dc\uadf8\uc758 \uae30\ubcf8 \ud06c\uae30\ub098 \uc5ec\ubc31\uc774 \ube0c\ub77c\uc6b0\uc800\ub9c8\ub2e4 \ub2e4\ub97c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\ub294 reset-css \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c \ucd08\uae30\ud654\ub97c \ud569\ub2c8\ub2e4. npm install \uc2dc \uc774\ubbf8 \uc124\uce58\ub418\uc5b4 \uc788\uc73c\uba70, @import \ub85c \ubd88\ub7ec\uc635\ub2c8\ub2e4. npm &#8230; <a title=\"CSS\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=111\" aria-label=\"CSS\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-111","post","type-post","status-publish","format-standard","hentry","category-react-resume"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=111"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/111\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}