{"id":1194,"date":"2025-02-24T18:30:00","date_gmt":"2025-02-24T09:30:00","guid":{"rendered":"https:\/\/seuheu.com\/?p=1194"},"modified":"2025-02-22T17:10:40","modified_gmt":"2025-02-22T08:10:40","slug":"html-css-%ec%a3%bc%ec%84%9d-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/seuheu.com\/?p=1194","title":{"rendered":"[HTML &amp; CSS] \uc8fc\uc11d \uc815\ub9ac"},"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=1194\/#%EA%B0%9C%EC%9A%94\" >\uac1c\uc694<\/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=1194\/#1_HTML_%EC%A3%BC%EC%84%9DComment\" >1. HTML \uc8fc\uc11d(Comment)<\/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:\/\/seuheu.com\/?p=1194\/#%F0%9F%93%8C_HTML_%EC%A3%BC%EC%84%9D_%EA%B8%B0%EB%B3%B8_%EB%AC%B8%EB%B2%95\" >\ud83d\udccc&nbsp;HTML \uc8fc\uc11d \uae30\ubcf8 \ubb38\ubc95<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/seuheu.com\/?p=1194\/#%F0%9F%93%8C_HTML_%EC%A3%BC%EC%84%9D_%EC%82%AC%EC%9A%A9_%EC%98%88%EC%8B%9C\" >\ud83d\udccc&nbsp;HTML \uc8fc\uc11d \uc0ac\uc6a9 \uc608\uc2dc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/seuheu.com\/?p=1194\/#%F0%9F%93%8C_HTML_%EC%A3%BC%EC%84%9D%EC%9D%98_%ED%99%9C%EC%9A%A9_%EB%B0%A9%EB%B2%95\" >\ud83d\udccc&nbsp;HTML \uc8fc\uc11d\uc758 \ud65c\uc6a9 \ubc29\ubc95<\/a><\/li><\/ul><\/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=1194\/#2_CSS_%EC%A3%BC%EC%84%9DComment\" >2. CSS \uc8fc\uc11d(Comment)<\/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:\/\/seuheu.com\/?p=1194\/#%F0%9F%93%8C_CSS_%EC%A3%BC%EC%84%9D_%EA%B8%B0%EB%B3%B8_%EB%AC%B8%EB%B2%95\" >\ud83d\udccc&nbsp;CSS \uc8fc\uc11d \uae30\ubcf8 \ubb38\ubc95<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/seuheu.com\/?p=1194\/#%F0%9F%93%8C_CSS_%EC%A3%BC%EC%84%9D_%EC%82%AC%EC%9A%A9_%EC%98%88%EC%8B%9C\" >\ud83d\udccc&nbsp;CSS \uc8fc\uc11d \uc0ac\uc6a9 \uc608\uc2dc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/seuheu.com\/?p=1194\/#%F0%9F%93%8C_CSS_%EC%A3%BC%EC%84%9D%EC%9D%98_%ED%99%9C%EC%9A%A9_%EB%B0%A9%EB%B2%95\" >\ud83d\udccc&nbsp;CSS \uc8fc\uc11d\uc758 \ud65c\uc6a9 \ubc29\ubc95<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/seuheu.com\/?p=1194\/#3_HTML_CSS_%EC%A3%BC%EC%84%9D_%EC%82%AC%EC%9A%A9_%EC%8B%9C_%EC%A3%BC%EC%9D%98%ED%95%A0_%EC%A0%90\" >3. HTML &amp; CSS \uc8fc\uc11d \uc0ac\uc6a9 \uc2dc \uc8fc\uc758\ud560 \uc810<\/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=\"%EA%B0%9C%EC%9A%94\"><\/span>\uac1c\uc694<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc6f9 \uac1c\ubc1c\uc744 \ud558\ub2e4 \ubcf4\uba74 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc774\uac70\ub098 \ud2b9\uc815 \ucf54\ub4dc\ub97c \uc77c\uc2dc\uc801\uc73c\ub85c \ube44\ud65c\uc131\ud654\ud558\uace0 \uc2f6\uc744 \ub54c\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc774\ub7f4 \ub54c &#8220;\uc8fc\uc11d(Comment)&#8221;\uc744 \uc0ac\uc6a9\ud558\uba74 \ucf54\ub4dc \uc720\uc9c0\ubcf4\uc218\uac00 \ud6e8\uc52c \uc26c\uc6cc\uc9d1\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc624\ub298\uc740&nbsp;<strong>HTML\uacfc CSS\uc5d0\uc11c \uc8fc\uc11d\uc744 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95<\/strong>\uc744 \uc815\ub9ac\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4!<\/li>\n<\/ul>\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<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_HTML_%EC%A3%BC%EC%84%9DComment\"><\/span><strong>1. HTML \uc8fc\uc11d(Comment)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%8C_HTML_%EC%A3%BC%EC%84%9D_%EA%B8%B0%EB%B3%B8_%EB%AC%B8%EB%B2%95\"><\/span>\ud83d\udccc&nbsp;<strong>HTML \uc8fc\uc11d \uae30\ubcf8 \ubb38\ubc95<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML\uc5d0\uc11c \uc8fc\uc11d\uc740&nbsp;<code>&lt;!--<\/code>&nbsp;\uc640&nbsp;<code>--&gt;<\/code>&nbsp;\uc0ac\uc774\uc5d0 \uc791\uc131\ud569\ub2c8\ub2e4. \uc8fc\uc11d\uc73c\ub85c \ucc98\ub9ac\ub41c \ub0b4\uc6a9\uc740&nbsp;<strong>\ube0c\ub77c\uc6b0\uc800\uc5d0 \ud45c\uc2dc\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/strong><\/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=\"&lt;!-- \uc774\uac83\uc740 HTML \uc8fc\uc11d\uc785\ub2c8\ub2e4. --&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: #6A9955\">&lt;!-- \uc774\uac83\uc740 HTML \uc8fc\uc11d\uc785\ub2c8\ub2e4. --&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%8C_HTML_%EC%A3%BC%EC%84%9D_%EC%82%AC%EC%9A%A9_%EC%98%88%EC%8B%9C\"><\/span>\ud83d\udccc&nbsp;<strong>HTML \uc8fc\uc11d \uc0ac\uc6a9 \uc608\uc2dc<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\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;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;HTML \uc8fc\uc11d \uc608\uc81c&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;!-- \uc6f9\ud398\uc774\uc9c0\uc758 \uc81c\ubaa9 --&gt;\n    &lt;h1&gt;\uc548\ub155\ud558\uc138\uc694! HTML \uc8fc\uc11d\uc744 \ubc30\uc6cc\ubd05\uc2dc\ub2e4.&lt;\/h1&gt;\n\n    &lt;!-- \ubcf8\ubb38 \ub0b4\uc6a9\uc744 \uc124\uba85\ud558\ub294 \ubd80\ubd84 --&gt;\n    &lt;p&gt;\uc774\uac83\uc740 HTML \uc8fc\uc11d\uc758 \uc608\uc81c\uc785\ub2c8\ub2e4.&lt;\/p&gt;\n\n    &lt;!-- \uc544\ub798 \ucf54\ub4dc\ub294 \ud604\uc7ac \uc8fc\uc11d \ucc98\ub9ac\ub418\uc5b4 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. --&gt;\n    &lt;!-- &lt;a href=&quot;&lt;https:\/\/seuheu.com&gt;&quot;&gt;\uc774\ub3d9\ud558\uae30&lt;\/a&gt; --&gt;\n&lt;\/body&gt;\n&lt;\/html&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\">DOCTYPE<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">lang<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;ko&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">head<\/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\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">charset<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;UTF-8&quot;<\/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\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">name<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;viewport&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;width=device-width, initial-scale=1.0&quot;<\/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\">title<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">HTML \uc8fc\uc11d \uc608\uc81c<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">&lt;!-- \uc6f9\ud398\uc774\uc9c0\uc758 \uc81c\ubaa9 --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h1<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\uc548\ub155\ud558\uc138\uc694! HTML \uc8fc\uc11d\uc744 \ubc30\uc6cc\ubd05\uc2dc\ub2e4.<\/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>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">&lt;!-- \ubcf8\ubb38 \ub0b4\uc6a9\uc744 \uc124\uba85\ud558\ub294 \ubd80\ubd84 --&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 HTML \uc8fc\uc11d\uc758 \uc608\uc81c\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>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">&lt;!-- \uc544\ub798 \ucf54\ub4dc\ub294 \ud604\uc7ac \uc8fc\uc11d \ucc98\ub9ac\ub418\uc5b4 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">&lt;!-- &lt;a href=&quot;&lt;https:\/\/seuheu.com&gt;&quot;&gt;\uc774\ub3d9\ud558\uae30&lt;\/a&gt; --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%8C_HTML_%EC%A3%BC%EC%84%9D%EC%9D%98_%ED%99%9C%EC%9A%A9_%EB%B0%A9%EB%B2%95\"><\/span>\ud83d\udccc&nbsp;<strong>HTML \uc8fc\uc11d\uc758 \ud65c\uc6a9 \ubc29\ubc95<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u2705&nbsp;<strong>\ucf54\ub4dc \uc124\uba85<\/strong>: \uac1c\ubc1c\uc790\uac00 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uba85 \ucd94\uac00<br>\u2705&nbsp;<strong>\uc784\uc2dc \ucf54\ub4dc \ube44\ud65c\uc131\ud654<\/strong>: \ud2b9\uc815 \uae30\ub2a5\uc744 \uc8fc\uc11d \ucc98\ub9ac\ud558\uc5ec \uc2e4\ud589\ub418\uc9c0 \uc54a\ub3c4\ub85d \uc124\uc815<br>\u2705&nbsp;<strong>\ub514\ubc84\uae45 \ubc0f \uc720\uc9c0\ubcf4\uc218<\/strong>: \ud611\uc5c5 \uc2dc \ucf54\ub4dc \uac00\ub3c5\uc131\uc744 \ub192\uc774\uace0 \uc720\uc9c0\ubcf4\uc218\ub97c \uc27d\uac8c \ud568<\/p>\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<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_CSS_%EC%A3%BC%EC%84%9DComment\"><\/span><strong>2. CSS \uc8fc\uc11d(Comment)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS\uc5d0\uc11c\ub3c4 \uc8fc\uc11d\uc744 \ucd94\uac00\ud558\uc5ec \uc2a4\ud0c0\uc77c\uc744 \uc124\uba85\ud558\uac70\ub098 \ube44\ud65c\uc131\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>HTML\uacfc \ub2e4\ub974\uac8c, CSS \uc8fc\uc11d\uc740&nbsp;<code>\/* *\/<\/code>&nbsp;\ud615\ud0dc\ub85c \uc791\uc131\ud569\ub2c8\ub2e4.<\/strong><\/li>\n<\/ul>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%8C_CSS_%EC%A3%BC%EC%84%9D_%EA%B8%B0%EB%B3%B8_%EB%AC%B8%EB%B2%95\"><\/span>\ud83d\udccc&nbsp;<strong>CSS \uc8fc\uc11d \uae30\ubcf8 \ubb38\ubc95<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\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=\"\/* \uc774\uac83\uc740 CSS \uc8fc\uc11d\uc785\ub2c8\ub2e4. *\/\" 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\">\/* \uc774\uac83\uc740 CSS \uc8fc\uc11d\uc785\ub2c8\ub2e4. *\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%8C_CSS_%EC%A3%BC%EC%84%9D_%EC%82%AC%EC%9A%A9_%EC%98%88%EC%8B%9C\"><\/span>\ud83d\udccc&nbsp;<strong>CSS \uc8fc\uc11d \uc0ac\uc6a9 \uc608\uc2dc<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\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=\"\/* \ubcf8\ubb38 \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c *\/\np {\n    font-size: 16px;\n    color: #333;\n}\n\n\/* \ubc84\ud2bc \uc2a4\ud0c0\uc77c *\/\nbutton {\n    background-color: blue;\n    color: white;\n    padding: 10px 20px;\n    border: none;\n    cursor: pointer;\n}\n\n\/* \uc544\ub798 \uc2a4\ud0c0\uc77c\uc740 \ud604\uc7ac \uc8fc\uc11d \ucc98\ub9ac\ub418\uc5b4 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc74c *\/\n\/*\nbutton {\n    background-color: red;\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\">\/* \ubcf8\ubb38 \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">p<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">font-size<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">16px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">#333<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/* \ubc84\ud2bc \uc2a4\ud0c0\uc77c *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">blue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">white<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">padding<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">10px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">20px<\/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: #CE9178\">none<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">cursor<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">pointer<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/* \uc544\ub798 \uc2a4\ud0c0\uc77c\uc740 \ud604\uc7ac \uc8fc\uc11d \ucc98\ub9ac\ub418\uc5b4 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc74c *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/*<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">button {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">    background-color: red;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">*\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%8C_CSS_%EC%A3%BC%EC%84%9D%EC%9D%98_%ED%99%9C%EC%9A%A9_%EB%B0%A9%EB%B2%95\"><\/span>\ud83d\udccc&nbsp;<strong>CSS \uc8fc\uc11d\uc758 \ud65c\uc6a9 \ubc29\ubc95<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u2705&nbsp;<strong>\uc2a4\ud0c0\uc77c \uc124\uba85<\/strong>: \ud574\ub2f9 \uc2a4\ud0c0\uc77c\uc774 \uc5b4\ub5a4 \uc5ed\ud560\uc744 \ud558\ub294\uc9c0 \uc124\uba85<br>\u2705&nbsp;<strong>\ub514\uc790\uc778 \ud14c\uc2a4\ud2b8<\/strong>: \ud2b9\uc815 \uc2a4\ud0c0\uc77c\uc744 \uc8fc\uc11d \ucc98\ub9ac\ud558\uc5ec \ube44\uad50 \ud14c\uc2a4\ud2b8<br>\u2705&nbsp;<strong>\ube44\ud65c\uc131\ud654<\/strong>: \ud544\uc694 \uc5c6\ub294 \uc2a4\ud0c0\uc77c\uc744 \uc77c\uc2dc\uc801\uc73c\ub85c \uc81c\uac70<\/p>\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<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_HTML_CSS_%EC%A3%BC%EC%84%9D_%EC%82%AC%EC%9A%A9_%EC%8B%9C_%EC%A3%BC%EC%9D%98%ED%95%A0_%EC%A0%90\"><\/span><strong>3. HTML &amp; CSS \uc8fc\uc11d \uc0ac\uc6a9 \uc2dc \uc8fc\uc758\ud560 \uc810<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u2705&nbsp;<strong>HTML \uc8fc\uc11d<\/strong>:&nbsp;<code>&lt;!-- --&gt;<\/code>&nbsp;\uc0ac\uc6a9,&nbsp;<strong>CSS\uc5d0\uc11c\ub294&nbsp;<code>\/* *\/<\/code>&nbsp;\uc0ac\uc6a9<\/strong><br>\u2705&nbsp;<strong>HTML \uc8fc\uc11d\uc740&nbsp;<code>&lt;script&gt;<\/code>&nbsp;\ud0dc\uadf8 \ub0b4\ubd80\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9 \uac00\ub2a5<\/strong>\ud558\uc9c0\ub9cc,&nbsp;<strong>JavaScript\uc5d0\uc11c\ub294&nbsp;<code>\/\/<\/code>&nbsp;\ub610\ub294&nbsp;<code>\/* *\/<\/code>&nbsp;\uc0ac\uc6a9<\/strong><br>\u2705&nbsp;<strong>CSS \uc8fc\uc11d\uc740 \uc911\ucca9\uc774 \ubd88\uac00\ub2a5<\/strong>&nbsp;(<code>\/* \/* \uc911\ucca9 \ubd88\uac00 *\/ *\/<\/code>&nbsp;\u274c)<br>\u2705&nbsp;<strong>CSS\uc758&nbsp;<code>@import<\/code>&nbsp;\ubb38\ubc95\uc740 \uc8fc\uc11d\uc73c\ub85c \ucc98\ub9ac\ud574\ub3c4 \uc801\uc6a9\ub420 \uc218 \uc788\uc74c (\uc8fc\uc758 \ud544\uc694)<\/strong>\\<\/p>\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>\uac1c\uc694 1. HTML \uc8fc\uc11d(Comment) \ud83d\udccc&nbsp;HTML \uc8fc\uc11d \uae30\ubcf8 \ubb38\ubc95 \ud83d\udccc&nbsp;HTML \uc8fc\uc11d \uc0ac\uc6a9 \uc608\uc2dc \ud83d\udccc&nbsp;HTML \uc8fc\uc11d\uc758 \ud65c\uc6a9 \ubc29\ubc95 \u2705&nbsp;\ucf54\ub4dc \uc124\uba85: \uac1c\ubc1c\uc790\uac00 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uba85 \ucd94\uac00\u2705&nbsp;\uc784\uc2dc \ucf54\ub4dc \ube44\ud65c\uc131\ud654: \ud2b9\uc815 \uae30\ub2a5\uc744 \uc8fc\uc11d \ucc98\ub9ac\ud558\uc5ec \uc2e4\ud589\ub418\uc9c0 \uc54a\ub3c4\ub85d \uc124\uc815\u2705&nbsp;\ub514\ubc84\uae45 \ubc0f \uc720\uc9c0\ubcf4\uc218: \ud611\uc5c5 \uc2dc \ucf54\ub4dc \uac00\ub3c5\uc131\uc744 \ub192\uc774\uace0 \uc720\uc9c0\ubcf4\uc218\ub97c \uc27d\uac8c \ud568 2. CSS \uc8fc\uc11d(Comment) \ud83d\udccc&nbsp;CSS \uc8fc\uc11d \uae30\ubcf8 \ubb38\ubc95 \ud83d\udccc&nbsp;CSS \uc8fc\uc11d \uc0ac\uc6a9 \uc608\uc2dc &#8230; <a title=\"[HTML &amp; CSS] \uc8fc\uc11d \uc815\ub9ac\" class=\"read-more\" href=\"https:\/\/seuheu.com\/?p=1194\" aria-label=\"[HTML &amp; CSS] \uc8fc\uc11d \uc815\ub9ac\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-1194","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\/1194","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=1194"}],"version-history":[{"count":2,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1194\/revisions"}],"predecessor-version":[{"id":1196,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1194\/revisions\/1196"}],"wp:attachment":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}