{"id":1146,"date":"2025-02-18T18:30:00","date_gmt":"2025-02-18T09:30:00","guid":{"rendered":"https:\/\/seuheu.com\/?p=1146"},"modified":"2025-02-15T15:41:23","modified_gmt":"2025-02-15T06:41:23","slug":"css-css-%ec%84%a0%ed%83%9d%ec%9e%90-css-%ec%86%8d%ec%84%b1-%eb%b0%98%ec%9d%91%ed%98%95-%ec%9b%b9-%eb%94%94%ec%9e%90%ec%9d%b8","status":"publish","type":"post","link":"https:\/\/seuheu.com\/?p=1146","title":{"rendered":"[CSS] CSS \uc120\ud0dd\uc790, CSS \uc18d\uc131, \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p><br><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 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\" style=\"cursor:inherit\">\ubaa9\ucc28<\/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-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/seuheu.com\/?p=1146\/#CSS_%EC%84%A0%ED%83%9D%EC%9E%90Selector\" >CSS \uc120\ud0dd\uc790(Selector)<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/seuheu.com\/?p=1146\/#1_%EA%B8%B0%EB%B3%B8_%EC%84%A0%ED%83%9D%EC%9E%90\" >1. \uae30\ubcf8 \uc120\ud0dd\uc790<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/seuheu.com\/?p=1146\/#2_%EB%B3%B5%ED%95%A9_%EC%84%A0%ED%83%9D%EC%9E%90\" >2. \ubcf5\ud569 \uc120\ud0dd\uc790<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/seuheu.com\/?p=1146\/#CSS_%EC%86%8D%EC%84%B1_Property\" >CSS \uc18d\uc131 (Property)<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/seuheu.com\/?p=1146\/#1_%EA%B8%80%EA%BC%B4_%EB%B0%8F_%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%8A%A4%ED%83%80%EC%9D%BC\" >1. \uae00\uaf34 \ubc0f \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/seuheu.com\/?p=1146\/#2_%EB%B0%95%EC%8A%A4_%EB%AA%A8%EB%8D%B8_Box_Model\" >2. \ubc15\uc2a4 \ubaa8\ub378 (Box Model)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/seuheu.com\/?p=1146\/#3_%EB%B0%B0%EA%B2%BD_%EB%B0%8F_%ED%85%8C%EB%91%90%EB%A6%AC\" >3. \ubc30\uacbd \ubc0f \ud14c\ub450\ub9ac<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/seuheu.com\/?p=1146\/#4_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83\" >4. \ub808\uc774\uc544\uc6c3<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/seuheu.com\/?p=1146\/#%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8_Responsive_Web\" >\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 (Responsive Web)<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/seuheu.com\/?p=1146\/#1_%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%ACMedia_Query\" >1. \ubbf8\ub514\uc5b4 \ucffc\ub9ac(Media Query)<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_%EC%84%A0%ED%83%9D%EC%9E%90Selector\"><\/span><strong>CSS \uc120\ud0dd\uc790(Selector)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc120\ud0dd\uc790\ub294 CSS\uc5d0\uc11c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc694\uc18c\ub97c \uc9c0\uc815\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%EA%B8%B0%EB%B3%B8_%EC%84%A0%ED%83%9D%EC%9E%90\"><\/span>1. \uae30\ubcf8 \uc120\ud0dd\uc790<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uc120\ud0dd\uc790<\/th><th>\uc124\uba85<\/th><th>\uc608\uc81c<\/th><\/tr><\/thead><tbody><tr><td><code>*<\/code><\/td><td>\ubaa8\ub4e0 \uc694\uc18c \uc120\ud0dd<\/td><td><code>* { margin: 0; }<\/code><\/td><\/tr><tr><td><code>\ud0dc\uadf8\uba85<\/code><\/td><td>\ud2b9\uc815 \ud0dc\uadf8 \uc120\ud0dd<\/td><td><code>p { color: red; }<\/code><\/td><\/tr><tr><td><code>.\ud074\ub798\uc2a4\uba85<\/code><\/td><td>\ud074\ub798\uc2a4 \uc120\ud0dd<\/td><td><code>.text { font-size: 20px; }<\/code><\/td><\/tr><tr><td><code>#\uc544\uc774\ub514\uba85<\/code><\/td><td>ID \uc120\ud0dd<\/td><td><code>#main { background-color: gray; }<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"h1 { color: blue; }      \/* \ud0dc\uadf8 \uc120\ud0dd\uc790 *\/\n.text { color: green; }  \/* \ud074\ub798\uc2a4 \uc120\ud0dd\uc790 *\/\n#main { font-size: 24px; } \/* ID \uc120\ud0dd\uc790 *\/\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">h1<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">blue<\/span><span style=\"color: #D4D4D4\">; }      <\/span><span style=\"color: #6A9955\">\/* \ud0dc\uadf8 \uc120\ud0dd\uc790 *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">text<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">green<\/span><span style=\"color: #D4D4D4\">; }  <\/span><span style=\"color: #6A9955\">\/* \ud074\ub798\uc2a4 \uc120\ud0dd\uc790 *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">#<\/span><span style=\"color: #9CDCFE\">main<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #9CDCFE\">font<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">size<\/span><span style=\"color: #D4D4D4\">: 24<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">; } <\/span><span style=\"color: #6A9955\">\/* ID \uc120\ud0dd\uc790 *\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;h1&gt;\uc81c\ubaa9&lt;\/h1&gt;\n&lt;p class=&quot;text&quot;&gt;\uc774\uac83\uc740 \ud074\ub798\uc2a4 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c \ubb38\uc7a5\uc785\ub2c8\ub2e4.&lt;\/p&gt;\n&lt;p id=&quot;main&quot;&gt;\uc774\uac83\uc740 ID \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c \ubb38\uc7a5\uc785\ub2c8\ub2e4.&lt;\/p&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h1<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\uc81c\ubaa9<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">h1<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;text&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\uc774\uac83\uc740 \ud074\ub798\uc2a4 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c \ubb38\uc7a5\uc785\ub2c8\ub2e4.<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;main&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\uc774\uac83\uc740 ID \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c \ubb38\uc7a5\uc785\ub2c8\ub2e4.<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%EB%B3%B5%ED%95%A9_%EC%84%A0%ED%83%9D%EC%9E%90\"><\/span><strong>2. \ubcf5\ud569 \uc120\ud0dd\uc790<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uc120\ud0dd\uc790<\/th><th>\uc124\uba85<\/th><th>\uc608\uc81c<\/th><\/tr><\/thead><tbody><tr><td><code>A B<\/code><\/td><td>A \uc548\uc5d0 \uc788\ub294 B \uc120\ud0dd<\/td><td><code>div p { color: red; }<\/code><\/td><\/tr><tr><td><code>A &gt; B<\/code><\/td><td>A\uc758&nbsp;<strong>\uc9c1\uacc4 \uc790\uc2dd<\/strong>&nbsp;B \uc120\ud0dd<\/td><td><code>div &gt; p { font-weight: bold; }<\/code><\/td><\/tr><tr><td><code>A + B<\/code><\/td><td>A&nbsp;<strong>\ubc14\ub85c \ub2e4\uc74c \ud615\uc81c<\/strong>&nbsp;B \uc120\ud0dd<\/td><td><code>h1 + p { color: blue; }<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"div p { color: red; }   \/* div \ub0b4\ubd80\uc758 \ubaa8\ub4e0 p \ud0dc\uadf8 *\/\ndiv &gt; p { font-size: 18px; } \/* div\uc758 \uc9c1\uacc4 \uc790\uc2dd p *\/\nh1 + p { font-style: italic; } \/* h1 \ubc14\ub85c \ub2e4\uc74c p *\/\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">p<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">red<\/span><span style=\"color: #D4D4D4\">; }   <\/span><span style=\"color: #6A9955\">\/* div \ub0b4\ubd80\uc758 \ubaa8\ub4e0 p \ud0dc\uadf8 *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">div<\/span><span style=\"color: #D4D4D4\"> &gt; <\/span><span style=\"color: #9CDCFE\">p<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #9CDCFE\">font<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">size<\/span><span style=\"color: #D4D4D4\">: 18<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">; } <\/span><span style=\"color: #6A9955\">\/* div\uc758 \uc9c1\uacc4 \uc790\uc2dd p *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">h1<\/span><span style=\"color: #D4D4D4\"> + <\/span><span style=\"color: #9CDCFE\">p<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #9CDCFE\">font<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">style<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">italic<\/span><span style=\"color: #D4D4D4\">; } <\/span><span style=\"color: #6A9955\">\/* h1 \ubc14\ub85c \ub2e4\uc74c p *\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;div&gt;\n    &lt;p&gt;\uc774\uac83\uc740 \ube68\uac04\uc0c9\uc785\ub2c8\ub2e4.&lt;\/p&gt; &lt;!-- div \ub0b4\ubd80 --&gt;\n&lt;\/div&gt;\n&lt;h1&gt;\uc81c\ubaa9&lt;\/h1&gt;\n&lt;p&gt;\uc774\uac83\uc740 \uae30\uc6b8\uc784 \uae00\uc528\uc785\ub2c8\ub2e4.&lt;\/p&gt; &lt;!-- h1 \ubc14\ub85c \ub2e4\uc74c p --&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\uc774\uac83\uc740 \ube68\uac04\uc0c9\uc785\ub2c8\ub2e4.<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\"> &lt;!-- div \ub0b4\ubd80 --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h1<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\uc81c\ubaa9<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">h1<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\uc774\uac83\uc740 \uae30\uc6b8\uc784 \uae00\uc528\uc785\ub2c8\ub2e4.<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\"> &lt;!-- <\/span><span style=\"color: #9CDCFE\">h1<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">\ubc14\ub85c<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">\ub2e4\uc74c<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">p<\/span><span style=\"color: #D4D4D4\"> --&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_%EC%86%8D%EC%84%B1_Property\"><\/span>CSS \uc18d\uc131 (Property)<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS\ub294 \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \uc81c\uacf5\ud558\uba70, \ub300\ud45c\uc801\uc778 \uc18d\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%EA%B8%80%EA%BC%B4_%EB%B0%8F_%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%8A%A4%ED%83%80%EC%9D%BC\"><\/span>1. \uae00\uaf34 \ubc0f \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uc18d\uc131<\/th><th>\uc124\uba85<\/th><th>\uc608\uc81c<\/th><\/tr><\/thead><tbody><tr><td><code>color<\/code><\/td><td>\uae00\uc790 \uc0c9\uc0c1<\/td><td><code>color: red;<\/code><\/td><\/tr><tr><td><code>font-size<\/code><\/td><td>\uae00\uc790 \ud06c\uae30<\/td><td><code>font-size: 20px;<\/code><\/td><\/tr><tr><td><code>font-weight<\/code><\/td><td>\uae00\uc790 \uad75\uae30<\/td><td><code>font-weight: bold;<\/code><\/td><\/tr><tr><td><code>text-align<\/code><\/td><td>\uc815\ub82c<\/td><td><code>text-align: center;<\/code><\/td><\/tr><tr><td><code>line-height<\/code><\/td><td>\uc904 \uac04\uaca9<\/td><td><code>line-height: 1.5;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"p {\n    color: blue;\n    font-size: 16px;\n    text-align: center;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">p<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">blue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">font<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">size<\/span><span style=\"color: #D4D4D4\">: 16<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">text<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">align<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">center<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%EB%B0%95%EC%8A%A4_%EB%AA%A8%EB%8D%B8_Box_Model\"><\/span>2. \ubc15\uc2a4 \ubaa8\ub378 (Box Model)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS\uc5d0\uc11c \ubaa8\ub4e0 \uc694\uc18c\ub294\u00a0<strong>\ubc15\uc2a4 \ubaa8\ub378<\/strong>\uc744 \ub530\ub985\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\ubc15\uc2a4 \ubaa8\ub378\uc740\u00a0<code>margin<\/code>,\u00a0<code>border<\/code>,\u00a0<code>padding<\/code>,\u00a0<code>width<\/code>,\u00a0<code>height<\/code>\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.\n<ol class=\"wp-block-list\">\n<li><strong><code>width<\/code>\u00a0(\ub108\ube44)<\/strong><\/li>\n\n\n\n<li><strong><code>height<\/code>\u00a0(\ub192\uc774)<\/strong><\/li>\n\n\n\n<li><strong><code>padding<\/code>\u00a0(\uc548\ucabd \uc5ec\ubc31)<\/strong><\/li>\n\n\n\n<li><strong><code>border<\/code>\u00a0(\ud14c\ub450\ub9ac)<\/strong><\/li>\n\n\n\n<li><strong><code>margin<\/code>\u00a0(\ubc14\uae65 \uc5ec\ubc31)<\/strong><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502           margin            \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502  \u2502        border         \u2502  \u2502\n\u2502  \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502  \u2502\n\u2502  \u2502  \u2502     padding     \u2502  \u2502  \u2502\n\u2502  \u2502  \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502  \u2502  \u2502\n\u2502  \u2502  \u2502  \u2502  content  \u2502  \u2502  \u2502  \u2502\n\u2502  \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502  \u2502  \u2502\n\u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502  \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".box {\n    width: 200px;\n    height: 100px;\n    padding: 10px;\n    border: 2px solid black;\n    margin: 20px;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">box<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">width<\/span><span style=\"color: #D4D4D4\">: 200<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">height<\/span><span style=\"color: #D4D4D4\">: 100<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">padding<\/span><span style=\"color: #D4D4D4\">: 10<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">border<\/span><span style=\"color: #D4D4D4\">: 2<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">solid<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">black<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">margin<\/span><span style=\"color: #D4D4D4\">: 20<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;div class=&quot;box&quot;&gt;\ubc15\uc2a4 \ubaa8\ub378 \uc608\uc81c&lt;\/div&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;box&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\ubc15\uc2a4 \ubaa8\ub378 \uc608\uc81c<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%EB%B0%B0%EA%B2%BD_%EB%B0%8F_%ED%85%8C%EB%91%90%EB%A6%AC\"><\/span>3. \ubc30\uacbd \ubc0f \ud14c\ub450\ub9ac<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uc18d\uc131<\/th><th>\uc124\uba85<\/th><th>\uc608\uc81c<\/th><\/tr><\/thead><tbody><tr><td><code>background-color<\/code><\/td><td>\ubc30\uacbd \uc0c9\uc0c1<\/td><td><code>background-color: yellow;<\/code><\/td><\/tr><tr><td><code>border<\/code><\/td><td>\ud14c\ub450\ub9ac \uc124\uc815<\/td><td><code>border: 2px solid black;<\/code><\/td><\/tr><tr><td><code>border-radius<\/code><\/td><td>\ubaa8\uc11c\ub9ac \ub465\uae00\uac8c<\/td><td><code>border-radius: 10px;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".container {\n    background-color: lightgray;\n    border: 2px dashed red;\n    border-radius: 10px;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">container<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">lightgray<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">border<\/span><span style=\"color: #D4D4D4\">: 2<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">dashed<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">red<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">border<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">radius<\/span><span style=\"color: #D4D4D4\">: 10<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83\"><\/span>4. \ub808\uc774\uc544\uc6c3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uc18d\uc131<\/th><th>\uc124\uba85<\/th><th>\uc608\uc81c<\/th><\/tr><\/thead><tbody><tr><td><code>display<\/code><\/td><td>\uc694\uc18c \ud45c\uc2dc \ubc29\uc2dd<\/td><td><code>display: flex;<\/code><\/td><\/tr><tr><td><code>position<\/code><\/td><td>\uc704\uce58 \uc9c0\uc815<\/td><td><code>position: absolute;<\/code><\/td><\/tr><tr><td><code>float<\/code><\/td><td>\uc694\uc18c \ub744\uc6b0\uae30<\/td><td><code>float: right;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">container<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">display<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">flex<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">justify<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">content<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">center<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">align<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">items<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">center<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8_Responsive_Web\"><\/span><strong>\ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 (Responsive Web)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%ACMedia_Query\"><\/span><strong>1. \ubbf8\ub514\uc5b4 \ucffc\ub9ac(Media Query)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uba74 \ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c \uc2a4\ud0c0\uc77c\uc744 \ub2e4\ub974\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/* \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\uac00 600px \uc774\ud558\uc77c \ub54c \ubc30\uacbd\uc0c9\uc774 \ubc14\ub01c *\/\n\n@media (max-width: 600px) {\n    body {\n        background-color: lightblue;\n    }\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6A9955\">\/* \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\uac00 600px \uc774\ud558\uc77c \ub54c \ubc30\uacbd\uc0c9\uc774 \ubc14\ub01c *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">@<\/span><span style=\"color: #DCDCAA\">media<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">max<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: 600<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">body<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">lightblue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n","protected":false},"excerpt":{"rendered":"<p>CSS \uc120\ud0dd\uc790(Selector) 1. \uae30\ubcf8 \uc120\ud0dd\uc790 \uc120\ud0dd\uc790 \uc124\uba85 \uc608\uc81c * \ubaa8\ub4e0 \uc694\uc18c \uc120\ud0dd * { margin: 0; } \ud0dc\uadf8\uba85 \ud2b9\uc815 \ud0dc\uadf8 \uc120\ud0dd p { color: red; } .\ud074\ub798\uc2a4\uba85 \ud074\ub798\uc2a4 \uc120\ud0dd .text { font-size: 20px; } #\uc544\uc774\ub514\uba85 ID \uc120\ud0dd #main { background-color: gray; } 2. \ubcf5\ud569 \uc120\ud0dd\uc790 \uc120\ud0dd\uc790 \uc124\uba85 \uc608\uc81c A B A \uc548\uc5d0 \uc788\ub294 B \uc120\ud0dd &#8230; <a title=\"[CSS] CSS \uc120\ud0dd\uc790, CSS \uc18d\uc131, \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\" class=\"read-more\" href=\"https:\/\/seuheu.com\/?p=1146\" aria-label=\"[CSS] CSS \uc120\ud0dd\uc790, CSS \uc18d\uc131, \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,25],"tags":[],"class_list":["post-1146","post","type-post","status-publish","format-standard","hentry","category-programming","category-html"],"_links":{"self":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1146"}],"version-history":[{"count":1,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1146\/revisions"}],"predecessor-version":[{"id":1147,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1146\/revisions\/1147"}],"wp:attachment":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}