{"id":1140,"date":"2025-02-16T18:30:00","date_gmt":"2025-02-16T09:30:00","guid":{"rendered":"https:\/\/seuheu.com\/?p=1140"},"modified":"2025-02-15T15:40:58","modified_gmt":"2025-02-15T06:40:58","slug":"css-csscascading-style-sheets-%eb%9e%80","status":"publish","type":"post","link":"https:\/\/seuheu.com\/?p=1140","title":{"rendered":"[CSS] CSS(Cascading Style Sheets) \ub780?"},"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=1140\/#CSSCascading_Style_Sheets_%EB%9E%80\" >CSS(Cascading Style Sheets) \ub780?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/seuheu.com\/?p=1140\/#CSS%EC%9D%98_%EC%97%AD%ED%95%A0\" >CSS\uc758 \uc5ed\ud560<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/seuheu.com\/?p=1140\/#CSS_%EA%B8%B0%EB%B3%B8_%EB%AC%B8%EB%B2%95\" >CSS \uae30\ubcf8 \ubb38\ubc95<\/a><\/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=\"CSSCascading_Style_Sheets_%EB%9E%80\"><\/span>CSS(Cascading Style Sheets) \ub780?<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc6f9 \ud398\uc774\uc9c0\uc758 \ub514\uc790\uc778(\uc2a4\ud0c0\uc77c)\uc744 \uc9c0\uc815\ud558\ub294 \uc5b8\uc5b4\uc785\ub2c8\ub2e4.<\/li>\n\n\n\n<li>HTML\uc774 **\uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870(Structure)**\ub97c \ub2f4\ub2f9\ud55c\ub2e4\uba74, CSS\ub294 **\ub514\uc790\uc778(\uc0c9\uc0c1, \ud06c\uae30, \ub808\uc774\uc544\uc6c3 \ub4f1)**\uc744 \ub2f4\ub2f9\ud569\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<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS%EC%9D%98_%EC%97%AD%ED%95%A0\"><\/span>CSS\uc758 \uc5ed\ud560<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\uc6f9 \ud398\uc774\uc9c0 \uc2a4\ud0c0\uc77c \uc9c0\uc815<\/strong>\n<ul class=\"wp-block-list\">\n<li>\uc0c9\uc0c1, \ud3f0\ud2b8, \ubc30\uacbd, \uac04\uaca9, \ud14c\ub450\ub9ac \ub4f1\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\ub808\uc774\uc544\uc6c3 \uc870\uc815<\/strong>\n<ul class=\"wp-block-list\">\n<li>\ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c \uc694\uc18c\uc758 \ubc30\uce58\ub97c \uc870\uc808<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\ubc18\uc751\ud615 \ub514\uc790\uc778 \uc9c0\uc6d0<\/strong>\n<ul class=\"wp-block-list\">\n<li>\ub2e4\uc591\ud55c \ud654\uba74 \ud06c\uae30(PC, \ud0dc\ube14\ub9bf, \ubaa8\ubc14\uc77c)\uc5d0 \uc801\uc751 \uac00\ub2a5<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>HTML \ucf54\ub4dc\uc640 \uc2a4\ud0c0\uc77c \ubd84\ub9ac<\/strong>\n<ul class=\"wp-block-list\">\n<li>\ub514\uc790\uc778\uc744 \ubcc4\ub3c4\uc758 CSS \ud30c\uc77c\uc5d0 \uc800\uc7a5\ud558\uc5ec HTML \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ud5a5\uc0c1<\/li>\n<\/ul>\n<\/li>\n<\/ol>\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_%EA%B8%B0%EB%B3%B8_%EB%AC%B8%EB%B2%95\"><\/span>CSS \uae30\ubcf8 \ubb38\ubc95<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p>CSS\uc758 \uae30\ubcf8 \ubb38\ubc95\uc740 **\uc120\ud0dd\uc790(selector)\uc640 \uc18d\uc131(property), \uac12(value)**\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/p>\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=\"\uc120\ud0dd\uc790 {\n    \uc18d\uc131: \uac12;\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\">\uc120\ud0dd\uc790<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">\uc18d\uc131<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">\uac12<\/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=\"h1 {\n    color: blue;  \/* \uae00\uc790 \uc0c9\uc0c1 \ubcc0\uacbd *\/\n    font-size: 24px; \/* \uae00\uc790 \ud06c\uae30 \ubcc0\uacbd *\/\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\">h1<\/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 style=\"color: #6A9955\">\/* \uae00\uc790 \uc0c9\uc0c1 \ubcc0\uacbd *\/<\/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\">: 24<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #6A9955\">\/* \uae00\uc790 \ud06c\uae30 \ubcc0\uacbd *\/<\/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<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS(Cascading Style Sheets) \ub780? CSS\uc758 \uc5ed\ud560 CSS \uae30\ubcf8 \ubb38\ubc95 CSS\uc758 \uae30\ubcf8 \ubb38\ubc95\uc740 **\uc120\ud0dd\uc790(selector)\uc640 \uc18d\uc131(property), \uac12(value)**\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/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-1140","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\/1140","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=1140"}],"version-history":[{"count":2,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1140\/revisions"}],"predecessor-version":[{"id":1142,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1140\/revisions\/1142"}],"wp:attachment":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}