{"id":812,"date":"2022-01-27T17:35:52","date_gmt":"2022-01-27T08:35:52","guid":{"rendered":"http:\/\/mylittleforest.kr\/wordpress\/?p=812"},"modified":"2022-02-08T16:42:26","modified_gmt":"2022-02-08T07:42:26","slug":"css-%ea%b8%b0%eb%b3%b8","status":"publish","type":"post","link":"http:\/\/mylittleforest.kr\/wordpress\/blog\/2022\/01\/27\/812\/","title":{"rendered":"CSS \uae30\ubcf8"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Tutorial<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Reference<\/a><\/p>\n\n\n\n<h2>CSS \uc815\uc758\uc640 \uad6c\uc870<\/h2>\n\n\n\n<ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/css\/css_intro.asp\" target=\"_blank\">CSS (Cascading Style Sheets)<\/a><br><\/li><li>\uc2a4\ud0c0\uc77c \uc2dc\ud2b8\uc758 \uc815\uc758<br>&#8211; \ubb38\uc11c\uc758 \uc678\ud615\uc744 \uad6c\uccb4\uc801\uc73c\ub85c \uba85\uc2dc\ud558\uae30 \uc704\ud55c \ubb38\uc7a5\uc758 \uc9d1\ud569<br>&#8211; \uc6f9 \ud398\uc774\uc9c0 \uad6c\uc131 \uc694\uc18c\uc5d0 \ud06c\uae30, \uc0c9\uae54 \ub4f1\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc77c\uad04\uc801\uc73c\ub85c \uc801\uc6a9<br>&#8211; \uae00\uc790 \uac04\uaca9, \ubb38\ub2e8 \uac04\uaca9, \uc704\uce58 \ub4f1 HTML \ud0dc\uadf8\ub85c\ub294 \uc81c\uc5b4\ud560 \uc218 \uc5c6\ub294 \ubd80\ubd84\uc744 \uc81c\uc5b4<br>&#8211; \ubb38\uc11c\uc758 \uad6c\uc870\uc640 \uc2a4\ud0c0\uc77c\uc758 \ubd84\ub9ac<br>&#8211; \uc2a4\ud0c0\uc77c\uc758 \ubcc0\uacbd\uacfc \uc6f9 \ud398\uc774\uc9c0\uc758 \uc77c\uad00\uc131 \uc720\uc9c0\uac00 \uc6a9\uc774<br><\/li><li>\uc2a4\ud0c0\uc77c \uc2dc\ud2b8 \uc885\ub958<br>CSS (Cascading Style Sheet)<br>&#8211; \uc2a4\ud0c0\uc77c \uc18d\uc131, \uc18d\uc131\uac12\uc73c\ub85c \uc2a4\ud0c0\uc77c \uc81c\uc5b4<br>: &lt;style type=\u201ctext\/css\u201d&gt; (CSS\uac00 \ud45c\uc900\uc774\ubbc0\ub85c &lt;style&gt;\ub9cc \uc0ac\uc6a9 \uac00\ub2a5)<br>JSSS (JavaScript Style Sheet)<br>&#8211; Java script\ub85c \uc2a4\ud0c0\uc77c \uc815\ubcf4\ub97c \uc81c\uc5b4<br>&#8211; {style type=\u201ctext\/JavaScript\u201d&gt;<br><\/li><li>CSS\uc758 \ud615\uc2dd<br><br><a href=\"https:\/\/www.w3schools.com\/css\/css_syntax.asp\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"569\" height=\"119\" class=\"wp-image-873\" style=\"width: 550px;\" src=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/01\/img_selector.gif\" alt=\"\"><\/a><br><br>&#8211; \uc120\ud0dd\uc790(selector) : \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uace0\uc790 \ud558\ub294 HTML \ud0dc\uadf8, CLASS\ub098 ID \uc774\ub984<br>&#8211; \uc120\uc5b8(declaration) : \uc18d\uc131(property)\uacfc \uc18d\uc131\uac12(property value)\uc73c\ub85c \uad6c\uc131\ub41c \uc2a4\ud0c0\uc77c \uc815\ubcf4\uc758 \ub9ac\uc2a4\ud2b8<br>&#8211; \uc18d\uc131\uacfc \uc18d\uc131\uac12\uc740 \ucf5c\ub860(:)\uc73c\ub85c \uc5f0\uacb0<br>&#8211; \ud558\ub098\uc758 \ud0dc\uadf8\uc5d0 \uc5ec\ub7ec \uac00\uc9c0 \uc18d\uc131 \uc9c0\uc815<br>  : \uc120\uc5b8\uc5d0 \uc9c0\uc815\ud558\uace0\uc790 \ud558\ub294 \uc18d\uc131\ub4e4\uc744 \uc138\ubbf8\ucf5c\ub860\uc73c\ub85c \uad6c\ubd84\ud558\uc5ec \ub098\uc5f4<br>  : H3 { background-color:navy; color:white }<br>&#8211; \uc5ec\ub7ec \ud0dc\uadf8\uc5d0 \ub3d9\uc77c\ud55c \uc18d\uc131 \uc9c0\uc815<br>  : \uc120\ud0dd\uc790\uc5d0 \uac19\uc740 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\ub294 \uacbd\uc6b0 \ud0dc\uadf8 \uc774\ub984 \ucf64\ub9c8\ub85c \uad6c\ubd84\ud558\uc5ec \ub098\uc5f4<br>  : H1 H2 { , background-color:navy }<br>&#8211; \uc18d\uc131\uc758 \uc0c1\uc18d (Inheritance)<br>  : \uc5b4\ub5a0\ud55c \ud0dc\uadf8\uc5d0 \uc9c0\uc815\ub41c \uc18d\uc131\uc740 \uadf8 \uc548\uc5d0 \uc0ac\uc6a9\ub41c \ud0dc\uadf8\uc5d0\ub3c4 \uc801\uc6a9\ub428<br>  : \uc608 : &lt;p&gt;\ud0dc\uadf8\uc758 \uae00\uc790 \uc0c9: \ud68c\uc0c9 \uc774\uba74, &lt;p&gt;&lt;i&gt; \ud0dc\uadf8 \uc0ac\uc6a9 \uc2dc, &lt;i&gt;\ud0dc\uadf8\uc5d0 \ub300\ud574 \ud68c\uc0c9\uc73c\ub85c \uc9c0\uc815\ud560 \ud544\uc694 \uc5c6\uc74c<br><\/li><li>\uc2a4\ud0c0\uc77c \uc815\ubcf4 \uc0bd\uc785 \ubc29\ubc95<br>1. \uc6f9 \ud398\uc774\uc9c0 &lt;head&gt;\ud0dc\uadf8 \ub0b4 \uc815\uc758<br>&lt;head&gt; &lt;style&gt;<br> \uc2a4\ud0c0\uc77c\uc758 \ub0b4\uc6a9<br>&lt;\/style&gt;&lt;\/head&gt;<br><br>2. \uc778\ub77c\uc778(in-line) \uc2a4\ud0c0\uc77c \uc815\uc758 : BODY \ubd80\ubd84\uc5d0 \uc0ac\uc6a9\ub41c \ud0dc\uadf8 \ub0b4\uc5d0 \uc18d\uc131\uc73c\ub85c \uc815\uc758<br>&lt;p style=&#8221;\uc2a4\ud0c0\uc77c\ub0b4\uc6a9&#8221;&gt; &lt;\/p&gt;<br><br>3. \ubcc4\ub3c4\uc758 style sheet \uc0bd\uc785<br>&lt;head&gt;<br>    &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;CSS \ud30c\uc77c \uc8fc\uc18c(URL)&#8221;&gt;<br>&lt;head&gt;<br><\/li><li>CSS \uae30\ucd08 \uc2e4\uc2b5<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;style&gt;\n            h1 {color:white; background-color:blue}\n            h2, h3 {color:white; background-color:green}\n            p {color:red; font-size:15}\n        &lt;\/style&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;h1&gt;\uc5b4\uc11c\uc624\uc138\uc694! \ud658\uc601\ud569\ub2c8\ub2e4~&lt;\/h1&gt;\n        &lt;h2&gt;\uac70\ubd81\uc120\uc758 \ud648\ud398\uc774\uc9c0\uc785\ub2c8\ub2e4!&lt;\/h2&gt;\n        &lt;h3&gt;\uc774 \ud398\uc774\uc9c0\uc5d0\ub294??&lt;\/h3&gt;\n        &lt;p&gt;\ud648\ud398\uc774\uc9c0\ub97c &lt;i&gt;\uc18c\uac1c\ud558\ub294 \uae00\uc744&lt;\/i&gt; \uc368\ubd05\ub2c8\ub2e4!&lt;\/p&gt;\n        &lt;p&gt;&lt;font color=&quot;blue&quot;&gt;\uc774 \ud648\ud398\uc774\uc9c0\ub294 ...&lt;\/font&gt;&lt;\/p&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/03-css-example.html\">03-css-example<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/03-css-example.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS Tutorial CSS Reference CSS \uc815\uc758\uc640 \uad6c\uc870 CSS (Cascading Style Sheets) \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\uc758 \uc815\uc758&#8211; \ubb38\uc11c\uc758 \uc678\ud615\uc744 \uad6c\uccb4\uc801\uc73c\ub85c \uba85\uc2dc\ud558\uae30 \uc704\ud55c \ubb38\uc7a5\uc758 \uc9d1\ud569&#8211; \uc6f9 \ud398\uc774\uc9c0 \uad6c\uc131 \uc694\uc18c\uc5d0 \ud06c\uae30, \uc0c9\uae54 \ub4f1\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc77c\uad04\uc801\uc73c\ub85c \uc801\uc6a9&#8211; \uae00\uc790 \uac04\uaca9, \ubb38\ub2e8 \uac04\uaca9, \uc704\uce58 \ub4f1 HTML \ud0dc\uadf8\ub85c\ub294 \uc81c\uc5b4\ud560 \uc218 \uc5c6\ub294 \ubd80\ubd84\uc744 \uc81c\uc5b4&#8211; \ubb38\uc11c\uc758 \uad6c\uc870\uc640 \uc2a4\ud0c0\uc77c\uc758 \ubd84\ub9ac&#8211; \uc2a4\ud0c0\uc77c\uc758 \ubcc0\uacbd\uacfc \uc6f9 \ud398\uc774\uc9c0\uc758 \uc77c\uad00\uc131 \uc720\uc9c0\uac00 \uc6a9\uc774 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[38],"tags":[],"_links":{"self":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/812"}],"collection":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/comments?post=812"}],"version-history":[{"count":9,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/812\/revisions"}],"predecessor-version":[{"id":1003,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/812\/revisions\/1003"}],"wp:attachment":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=812"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}