{"id":361,"date":"2014-05-18T01:21:29","date_gmt":"2014-05-17T16:21:29","guid":{"rendered":"http:\/\/backup.me.ne.kr\/?p=361"},"modified":"2014-05-18T01:21:29","modified_gmt":"2014-05-17T16:21:29","slug":"css-%ed%81%b4%eb%9e%98%ec%8a%a4-%ec%9d%b4%eb%a6%84-%ec%a7%80%ec%a0%95-%ed%95%a0-%eb%95%8c-%ec%a4%84%ed%91%9c-%eb%b0%91%ec%a4%84","status":"publish","type":"post","link":"http:\/\/jhp.io\/?p=361","title":{"rendered":"CSS \ud074\ub798\uc2a4 \uc774\ub984 \uc9c0\uc815 \ud560 \ub54c \uc904\ud45c? \ubc11\uc904?"},"content":{"rendered":"

\ubcf4\ud1b5 HTML \ucf54\ub354\uac00 CSS\ub97c \uc791\uc131\ud558\ub2e4\ubcf4\uba74 HTML \uc694\uc18c\uc5d0 \ud074\ub798\uc2a4 \uc774\ub984\uc744 \ubd80\uc5ec\ud558\uace0, selector\uc5d0 \ud574\ub2f9 \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc801\uc5b4 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uac8c\ub41c\ub2e4. \uadfc\ub370 \uac04\ud639 \uace0\ubbfc\ud558\uac8c \ub418\ub294 \uac83\uc774, \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc801\ub2e4\uac00 2\uac1c \uc774\uc0c1\uc758 \ub2e8\uc5b4\ub85c \uc774\ub984\uc744 \ubd80\uc5ec\ud574\uc57c \ud558\ub294 \uc77c\uc774 \uc0dd\uae34\ub2e4\uba74(\uc608\ub97c \ub4e4\uc5b4 Centred Panel\uc774\ub098 Hidden Menu \uac19\uc740) \ub2e8\uc5b4 \uc0ac\uc774\uc5d0 \uc904\ud45c(-, \uc601\uc5b4\ub85c dash)\ub97c \uc801\uc5b4\uc57c \ud560\uae4c, \uc544\ub2c8\uba74 \ubc11\uc904(_, \uc601\uc5b4\ub85c underscore)\uc744 \uc801\uc5b4\uc57c \ud560\uae4c? \uc544\ub2c8\uba74 Java\uc5d0\uc11c \uba54\uc18c\ub4dc\ub97c \uc791\uc131\ud558\ub294 \uac83\ucc98\ub7fc \uac01 \ub2e8\uc5b4 \ub9e8 \uc55e \uc54c\ud30c\ubcb3\uc740 \ub300\ubb38\uc790\ub85c \uc791\uc131\ud558\uace0 \ud074\ub798\uc2a4 \uc774\ub984 \ub9e8 \uc55e\uc5d0 \uc54c\ud30c\ubcb3\uc740 \uc18c\ubb38\uc790\ub85c \uc791\uc131\ud558\ub294 \uac83\uc740 \uc5b4\ub5a8\uae4c(\uc601\uc5b4\ub85c Camel Case)?<\/p>\n

\uc6b0\uc120 \uacb0\ub860\ubd80\ud130 \ub9d0\ud558\uc790\uba74, \uadf8\uac83\uc740 \ud300\uc774\ub098 \uac1c\uc778\uc758 \uc120\ud638\uc5d0 \ub300\ud55c \ucc28\uc774\ub85c, \uc5b4\ub5a4 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud558\ub358\uc9c0 \ud06c\uac8c \ubb38\uc81c\ub420 \uac83\uc740 \uc5c6\ub2e4. \ub2e4\ub9cc \uc904\ud45c(-, dash)\uc758 \uc0ac\uc6a9\uc744 \ucd94\ucc9c\ud558\ub294\ub370, \uadf8 \uc774\uc720\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n

\uc6b0 \uc120 \uc804\uccb4\uc801\uc73c\ub85c CSS\ucf54\ub4dc\uac00 \ud1b5\uc77c\ub418\uc5b4 \ubcf4\uc5ec \ub2e4\ub978 \ucf54\ub4dc\uc640 \uad6c\ubd84\ub418\uae30 \uc27d\ub2e4. CSS\ub294 2\uac1c \uc774\uc0c1\uc758 \ub2e8\uc5b4\uac00 \uc0ac\uc6a9\ub41c \uc18d\uc131(property)\uc5d0\ub3c4 \uc774\ubbf8 \uc904\ud45c\uac00 \uc0ac\uc6a9\ub418\uace0 \uc788\ub2e4. (margin-left\ub098 vertical-align\uac19\uc740 \uac83\ub4e4) \uc774\uac83\uc740 CSS\uc758 \ub208\uc5d0 \ub744\ub294 \ud2b9\uc9d5\uc774\ub2e4. Java Script\uc758 \uacbd\uc6b0 \ub9e8 \uc55e\uc5d0 \ub2e8\uc5b4\ub97c \uc81c\uc678\ud55c \uac01 \ub2e8\uc5b4\uc758 \ub9e8 \uc55e \uc54c\ud30c\ubcb3\uc744 \ub300\ubb38\uc790\ub85c \uc791\uc131\ud558\uba70(marginLeft\ub098 verticalAlign\uac19\uc774) HTML\uc740 \ubcf4\ud1b5 \ub2e8\uc5b4 \uad6c\ubd84\uc5c6\uc774 \uadf8\ub0e5 \uc804\ubd80 \ubd99\uc5ec \uc4f0\ub294 \uac83\uc774 \uc77c\ubc18\uc801\uc774\ub2e4(onmouseclick\ud639\uc740 valign).<\/p>\n

\ub450\ubc88\uc9f8\ub85c CSS \uc791\uc131\uc774 \ud6e8\uc52c \uc6a9\uc774\ud574\uc9c8 \uc218 \uc788\ub2e4. \ud648\ud398\uc774\uc9c0\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 \ud074\ub798\uc2a4\uac00 \ubd80\uc5ec\ub41c \uc694\uc18c\ub4e4\uc774 \uc788\ub2e4\uace0 \uac00\uc815\ud558\uc790.<\/p>\n

webboard-title
\nwebboard-body
\nwebboard-bottom
\nwebboard-control-centre<\/p>\n

\uc55e \uc5d0 webboard\ub77c\ub294 prefix\uac00 \ubd99\uc740 \uac83\uc744 \ubd10\uc11c \uac19\uc740 colour scheme\ub098 \uac19\uc740 theme\ub97c \uc0ac\uc6a9\ud588\uc744 \uac00\ub2a5\uc131\uc774 \ub192\ub2e4. \ub9cc\uc57d \uc774 \ud074\ub798\uc2a4\ub4e4\uc758 colour scheme\ub97c \ubc14\uafd4\uc57c \ud558\ub294 \uc77c\uc774 \ubc1c\uc0dd \ud588\uc744 \ub54c \ud639\uc740 \uadf8\ub7f0 \uc77c\uc5d0 \ub300\ube44\ud558\uae30 \uc704\ud574\uc11c\ub294 CSS\ub97c \uc5b4\ub5bb\uac8c \uc791\uc131\ud558\uc5ec\uc57c \ud560\uae4c? \uac01\uc790 \ub098\ub984\uc758 \ub178\ud558\uc6b0\uac00 \uc788\uc9c0\ub9cc \uc704 \uac19\uc740 \uacbd\uc6b0\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud558\uc5ec \ub2e8 \ud55c\uc904\ub85c\ub3c4 \ud574\uacb0 \ud560 \uc218 \uc788\ub2e4.<\/p>\n

[class|=”webboard”] { property:value; … }<\/p>\n

\ud074\ub798\uc2a4\uac00 webboard\ub85c \uc2dc\uc791\ud558\ub294 \ubaa8\ub4e0 \uc694\uc18c\uc5d0 \uc801\uc6a9\ud558\ub294 \uc2a4\ud0c0\uc77c\uc778\ub370 \ub9cc\uc57d \uc904\ud45c \ub300\uc2e0 \ubc11\uc904\uc774\ub098 \ub2e8\uc21c\ud788 \ub2e8\uc5b4\ub97c \ub098\uc5f4\ud558\ub294 \uc2dd\uc73c\ub85c \ud074\ub798\uc2a4\ub97c \uc9c0\uc815\ud588\ub2e4\uba74 \uc801\uc6a9\ub418\uc9c0 \uc54a\ub294\ub2e4.<\/span>
\n
\uc8fc\uc758\ud560 \uc810\uc740 \uc704\uc640 \uac19\uc774 CSS\ub97c \uc791\uc131\ud558\uba74 IE6\uc5d0\uc120 \uc801\uc6a9\ub418\uc9c0 \uc54a\ub294\ub2e4. (\uc774\uac74 \uc815\ub9d0 \ubc84\ub9b4 \ud544\uc694\uc131\uc774 \uc788\ub2e4.)<\/span><\/p>\n

\uc774\ub7f0\uc2dd\uc73c\ub85c CSS\ub97c \uc880 \ub354 \uc720\uc5f0\ud558\uac8c \uc791\uc131\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc900\ub2e4.<\/p>\n

Q > \uadfc\ub370 [class*=”webboard”]\ub85c \ud558\uba74 \uc904\ud45c \uc544\ub2c8\uc5b4\ub3c4 \ub41c\ub2e4. \uadfc\ub370 \uaf2d \uc800\ub807\uac8c \uc801\uc5b4\uc57c\ub9cc \ud558\ub294\uac00?<\/p>\n

A > \ubb3c\ub860 \uadf8\ub807\uac8c \uc0ac\uc6a9\ud558\uba74 \uc801\uc6a9\ub418\uc9c0\ub9cc \ubb38\uc81c\uac00 \uc788\ub2e4. \ub9cc\uc57d \ub2e4\uc74c\uacfc \uac19\uc740 html \uc694\uc18c\uac00 \uc788\ub2e4\uace0 \uac00\uc815\ud558\uc790.<\/p>\n

<div class=”testImCamelCase”>
\nG’day mate!
\n<\/div><\/p>\n

<div class=”this-is-not-a-test”>
\nThis thing must not be coloured!!
\n<\/div><\/p>\n

\uc5ec \uae30\uc11c \uc6b0\ub9ac\uac00 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uace0 \uc2f6\uc740 \ud074\ub798\uc2a4\ub294 \uc774\ub984\uc774 test\ub85c \uc2dc\uc791\ud558\ub294 testImCamelCase\uc774\ub2e4. \uadfc\ub370\u00a0 [class*=”webboard”]\uc640 \uac19\uc740 \ubc29\ubc95\uc744 \uc774\uc6a9\ud558\uba74 this-is-not-a-test\uc5d0\ub3c4 \uc801\uc6a9\ub41c\ub2e4. \uc989, \ud074\ub798\uc2a4 \uc774\ub984\uc548\uc5d0 \ud574\ub2f9 \uc774\ub984\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc73c\uba74 \ubb34\uc870\uac74 \uc801\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 \uc608\uae30\uce58 \ubabb\ud55c \uacb0\uacfc\ub97c \uc57c\uae30\ud560 \uc218 \uc788\ub2e4. \uadf8\ub798\uc11c \ud074\ub798\uc2a4 \uc774\ub984\uc5d0 \uc904\ud45c \uc0ac\uc6a9\uc744 \uad8c\uc7a5\ud558\ub294 \uc774\uc720\ub2e4<\/p>\n

\uc544\ub798 \ucca8\ubd80\ud30c\uc77c\uc740 \uc904\ud45c \uc0ac\uc6a9\uc5d0 \uad00\ud55c\u00a0 CSS\uc801\uc6a9 \uc608\uc81c\uac00 \uc788\ub2e4.<\/p>\n

dash-or-underscore<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

\ubcf4\ud1b5 HTML \ucf54\ub354\uac00 CSS\ub97c \uc791\uc131\ud558\ub2e4\ubcf4\uba74 HTML \uc694\uc18c\uc5d0 \ud074\ub798\uc2a4 \uc774\ub984\uc744 \ubd80\uc5ec\ud558\uace0, selector\uc5d0 \ud574\ub2f9 \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc801\uc5b4 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uac8c\ub41c\ub2e4. \uadfc\ub370 \uac04\ud639 \uace0\ubbfc\ud558\uac8c \ub418\ub294 \uac83\uc774, \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc801\ub2e4\uac00 2\uac1c \uc774\uc0c1\uc758 \ub2e8\uc5b4\ub85c \uc774\ub984\uc744 \ubd80\uc5ec\ud574\uc57c \ud558\ub294 \uc77c\uc774 \uc0dd\uae34\ub2e4\uba74(\uc608\ub97c \ub4e4\uc5b4 Centred Panel\uc774\ub098 Hidden Menu \uac19\uc740) \ub2e8\uc5b4 \uc0ac\uc774\uc5d0 \uc904\ud45c(-, \uc601\uc5b4\ub85c dash)\ub97c \uc801\uc5b4\uc57c \ud560\uae4c, \uc544\ub2c8\uba74 \ubc11\uc904(_, \uc601\uc5b4\ub85c underscore)\uc744 \uc801\uc5b4\uc57c \ud560\uae4c? \uc544\ub2c8\uba74 Java\uc5d0\uc11c \uba54\uc18c\ub4dc\ub97c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,13],"tags":[],"class_list":["post-361","post","type-post","status-publish","format-standard","hentry","category-cg","category-web-design"],"_links":{"self":[{"href":"http:\/\/jhp.io\/index.php?rest_route=\/wp\/v2\/posts\/361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jhp.io\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jhp.io\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jhp.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jhp.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=361"}],"version-history":[{"count":0,"href":"http:\/\/jhp.io\/index.php?rest_route=\/wp\/v2\/posts\/361\/revisions"}],"wp:attachment":[{"href":"http:\/\/jhp.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jhp.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=361"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jhp.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}