{"id":237,"date":"2011-11-17T05:28:45","date_gmt":"2011-11-17T05:28:45","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=237"},"modified":"2011-11-17T05:28:45","modified_gmt":"2011-11-17T05:28:45","slug":"css-%eb%8b%a4%ec%a4%91-%ec%84%a0%ed%83%9d%ec%9e%90multi-class","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=237","title":{"rendered":"CSS : \ub2e4\uc911 \uc120\ud0dd\uc790(Multi Class)"},"content":{"rendered":"

\ucd9c\ucc98 : ?http:\/\/html.nhndesign.com\/blog\/909<\/a><\/p>\n

CSS\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294?\ub2e4\uc911 \uc120\ud0dd\uc790(Multi Class)<\/strong>\ub780 \ub3d9\uc77c \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \uc5ec\ub7ec\uac1c\uc758 \uc120\ud0dd\uc790(id, class)\ub97c \ub3d9\uc2dc\uc5d0 \uc801\uc6a9\ud558\uae30 \uc704\ud55c \ubaa9\uc801\uc73c\ub85c \uc5ec\ub7ec\uac1c\uc758 \uc120\ud0dd\uc790\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \ub9d0\ud569\ub2c8\ub2e4.
\nCSS1\uc5d0\uc11c \uc120\ud0dd\uc790\uc758 \uac1c\ub150\uc774 \uc0ac\uc6a9\ub41c \ud6c4, CSS2\uc5d0\uc11c \ub2e4\uc911 \uc120\ud0dd\uc790\uac00 \ucd94\uac00\ub418\uc5b4 \uc0ac\uc6a9\ub418\uace0 \uc788\ub294\ub370\uc694, CSS\ub97c \uc0ac\uc6a9\ud574 \uc6f9\uc0ac\uc774\ud2b8\ub97c \uac1c\ubc1c\ud558\ub2e4 \ubcf4\uba74?\ub2e4\uc911\uc120\ud0dd\uc790\ub294 \uc815\ub9d0 \ud3b8\ub9ac\ud55c \uc874\uc7ac\uc785\ub2c8\ub2e4.
\n<\/ins>
\n\"\"<\/p>\n

<style>
\n.foo { background:yellow; }
\n.bar { border:solid 4px red;?}
\n.foo.bar { border-style: dashed; }
\n<\/style><\/p>\n

<div>foo<\/div>
\n<div>bar<\/div>
\n<div>foo bar<\/div><\/p><\/blockquote>\n

 <\/p>\n

\uc544\ub9c8 \uae30\uc874\uc5d0 \ub2e4\uc911 \uc120\ud0dd\uc790\uc5d0 \ub300\ud55c \uc790\ub8cc\ub97c \ucc3e\uc544\ubcf4\uc154\uc11c \uc54c\uace0 \uacc4\uc2e0 \ubd84\uc740 foobar \ub77c\ub294 \ub2e8\uc5b4\uac00 \uc775\uc219\ud558\uc2e4 \uc9c0\ub3c4 \ubaa8\ub974\uaca0\uc2b5\ub2c8\ub2e4. (\uc6c3\uc74c)
\n\uc704\uc758 \ucf54\ub4dc\ub294 \ub2e4\uc911 \uc120\ud0dd\uc790\ub97c \uc801\uc6a9\ud558\uc5ec?foo \ud074\ub798\uc2a4\uc640 bar \ud074\ub798\uc2a4\uc758 \uc18d\uc131\uc744 \ud558\ub098\uc758 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ub3d9\uc2dc\uc5d0 \uc801\uc6a9<\/span>\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4. \ub610\ud55c \ud074\ub798\uc2a4\ub97c \ubd99\uc5ec\uc11c \uc120\uc5b8\ud558\uac8c \ub418\uba74 \ud3c9\uc18c\uc5d0\ub294 \uc801\uc6a9\ub418\uc9c0 \uc54a\ub2e4\uac00 \ub450 \ud074\ub798\uc2a4\uac00 \ub3d9\uc2dc\uc5d0 \uc801\uc6a9\ub420 \uacbd\uc6b0\uc5d0\ub9cc \ubcc4\ub3c4\uc758 \ud6a8\uacfc\ub97c \uc8fc\ub294 \uac83\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4.
\n\uc774\ub807\uac8c \uc5ec\ub7ec \uac1c\uc758 \ud074\ub798\uc2a4\ub97c \ud558\ub098\uc758 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \uc801\uc6a9\ud558\uc5ec \uc11c\ub85c \ub2e4\ub978 \ud6a8\uacfc\ub97c \ub3d9\uc2dc\uc5d0 \uc801\uc6a9\ud560 \uc218 \uc788\uace0, \uc774 \ub2e4\uc911 \uc120\ud0dd\uc790\ub294 3\uac1c \uc774\uc0c1\ub3c4 \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.
\n\ub9cc\uc57d \ud074\ub798\uc2a4 \ub0b4\uc758 css\uc18d\uc131\uc774 \uacb9\uce5c\ub2e4\uba74 \ub4b7\ucabd\uc5d0 \uc120\uc5b8\ub41c \ud074\ub798\uc2a4\uc758 css\uc18d\uc131\uc744 \uc6b0\uc120\ud558\uc9c0\ub9cc(\ub36e\uc5b4\uc4f0\uae30 \ud6a8\uacfc) \ub9cc\uc57d?!important<\/span>?\uac00 \uc18d\uc131\uc5d0 \ud3ec\ud568\ub418\uc5b4 \uc788\uc744?\uacbd\uc6b0 \uc21c\uc11c\uc5d0 \uc0c1\uad00\uc5c6\uc774 \ud574\ub2f9 \uc18d\uc131\uc744 \uc6b0\uc120 \uc801\uc6a9\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n

\uadf8\ub798\uc11c CSS\uac1c\ubc1c\ud558\uc2dc\ub294 \ubd84\uc740 \ub300\ubd80\ubd84 \ub2e4\uc911 \uc120\ud0dd\uc790\ub97c \ub9e4\uc6b0 \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ud558\uace0 \uc788\uc9c0\ub9cc, IE6\uc5d0\uc11c\ub294?\uad00\ub828 \ubc84\uadf8\uac00 \uc874\uc7ac<\/strong>\ud558\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc5d0 \uc8fc\uc758\ud574\uc57c \ud569\ub2c8\ub2e4. (\ub610 IE6\uc774 \ubb38\uc81c\uc785\ub2c8\ub2e4! -_-)<\/p>\n

1. id\uc640 class \ub97c \ub3d9\uc2dc \uc870\ud569\ud558\uc5ec \uc774\uc6a9\uc2dc, \ub098\uc911\uc5d0 \uc120\uc5b8\ub41c \ub2e4\uc911 \uc120\ud0dd\uc790 \uad6c\ubb38 \ubb34\uc2dc
\n<\/strong>\uc774 \ubd80\ubd84\uc740 NHN NULI\uc758 css\uac00\uc774\ub4dc\ub97c \ucc38\uace0\ud558\uc600\uc2b5\ub2c8\ub2e4. IE6\uc758 \uacbd\uc6b0 id\uc640 class\ub97c \ub2e4\uc911 \uc120\ud0dd\uc790\ub85c \uc801\uc6a9\ud560 \ub54c\uc5d0 \ub098\uc911\uc5d0 \uc120\uc5b8\ub41c \ub2e4\uc911 \uc120\ud0dd\uc790\ub97c \ubb34\uc2dc\ud558\ub294 \ubc84\uadf8\uac00 \uc874\uc7ac\ud569\ub2c8\ub2e4.<\/p>\n

\"\"<\/p>\n

<style>
\n#id.class1{background:#f00;}
\n#id.class2{background:#0f0; width:200px;}?\/* Does not exist in the IE6 *\/<\/span>
\n#id2.class2{background:#00f; width:200px;}
\n#id2.class3{background:#0f0; width:300px;}?\/* Does not exist in the IE6 *\/<\/span>
\n#id.class3{background:#f00; width:300px; font-weight:bold;}?\/* Does not exist in the IE6 *\/<\/span>
\n<\/style>
\n<div id=”id”>class1<\/div>
\n<div id=”id”>class2<\/div>
\n<div id=”id2″>class2<\/div>
\n<div id=”id2″>class3<\/div>
\n<div id=”id”>class3<\/div><\/p><\/blockquote>\n

 <\/p>\n

\uc6d0\ub798 \uc704\uc758 \uc608\uc81c\uc5d0\uc11c\ub294 \uadf8\ub9bc\ucc98\ub7fc \ubcf4\uc774\ub294 \uac83\uc774 \ubc14\ub978 \ub80c\ub354\ub9c1\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc IE6\uc5d0\uc11c\ub294 \uc608\uc81c\uc5d0\uc11c 2, 4, 5\ubc88\uc9f8 \uc904\uc5d0 \ud574\ub2f9\ud558\ub294 \ubd80\ubd84\uc744 \ubb34\uc2dc\ud558\uac8c \ub429\ub2c8\ub2e4. \uc544\ub798 \uc774\ubbf8\uc9c0\ucc98\ub7fc\uc694.<\/p>\n

\"\"<\/p>\n

\ub530\ub77c\uc11c \ubd88\uc30d\ud55c IE6 \uc744 \uc704\ud574\uc11c\ub77c\uba74, \ubd99\uc5ec\uc11c \uc4f0\ub294 \ub2e4\uc911 \uc120\ud0dd\uc790\ub97c \uc0ac\uc6a9\ud560 \ub54c\uc5d0\ub294?id\uc640 class\ub97c \ub3d9\uc2dc\uc5d0 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0, class\ub9cc \uc0ac\uc6a9\ud558\ub294 \uac83<\/span>\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n

2. class \uc870\ud569\ud558\uc5ec \uc774\uc6a9\uc2dc, \uc55e\uc5d0 \uc120\uc5b8\ub41c class \ubb34\uc2dc
\n<\/strong>\ud558\uc9c0\ub9cc \ubd88\uc30d\ud55c IE6\uc744 \uc0dd\uac01\ud574\uc11c class\ub9cc \uac00\uc9c0\uace0 \ub2e4\uc911 \uc120\ud0dd\uc790\ub97c \uad6c\uc131\ud588\uc74c\uc5d0\ub3c4 \ubd88\uad6c\ud558\uace0, \ud2b9\uc815 \uc0c1\ud669\uc5d0\uc11c\ub294 \ub610 \uc624\uc791\ub3d9\uc744 \ud574\ubc84\ub9bd\ub2c8\ub2e4.
\nclass\ub9cc\uc73c\ub85c \ub2e4\uc911 \uc120\ud0dd\uc790\ub97c \uad6c\uc131\ud560 \ub54c \uc608\ub97c \ub4e4\uc5b4 .foo.bar{} \ub77c\ub294 \ud074\ub798\uc2a4\ub97c \uad6c\uc131\ud558\uba74 IE6\uc740 \uc55e\uc758 .foo\ub97c \ubb34\uc2dc\ud558\uace0 .bar{} \ub77c\ub294 \ud074\ub798\uc2a4\ub85c \uc778\uc2dd\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n

\uc6d0\ub798 \ucf54\ub4dc
\n<\/span>.foo { background:yellow; }
\n.bar { border:solid 4px red; }
\n.foo.bar { border-style: dashed; }
\nIE6\uc774 \uc778\uc2dd\ud558\ub294 \ucf54\ub4dc<\/span>
\n.foo { background:yellow; }
\n.bar {?border:solid 4px red;<\/del>?}?\/* border \uc18d\uc131 \uc911 border-style \uc18d\uc131\uc774 \uc0ad\uc81c\ub428 *\/<\/span>
\n.foo<\/del><\/span>.bar { border-style: dashed; }?\/* bar class\uc758 border-style \uc18d\uc131\uc774 \uc624\ubc84\ub77c\uc774\ub529\ub428 *\/<\/span><\/p><\/blockquote>\n

 <\/p>\n

\uc774\ub97c \uc774\ubbf8\uc9c0\ub85c \ubcf4\uc5ec\ub4dc\ub9ac\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\"\"<\/p>\n

<style>
\n.foo { background: yellow; }
\n.bar { border: solid 4px red; }
\n.foo.bar { border-style: dashed; }
\n<\/style>
\n<div>foo!<\/div>
\n<div>bar!<\/div>
\n<div>foo bar!<\/div><\/p><\/blockquote>\n

 <\/p>\n

\uc704\uc5d0\uc11c foo bar \ub77c\ub294 \uc720\uba85\ud55c \uc608\uc81c(?)\ub97c \ubcf4\uc5ec\ub4dc\ub838\ub294\ub370\uc694, \uc774\uac8c IE6\uc5d0\uc11c \ub2e4\uc911\uc120\ud0dd\uc790\uc758 \ubc84\uadf8\uac00 \uc788\ub2e4\ub294 \uac83\uc744 \uc801\ub098\ub77c\ud558\uac8c \ubcf4\uc5ec\uc8fc\uace0 \uc788\uc8e0. \uc6d0\ub798 bar class\uc758 \uacbd\uc6b0 border-style \uc18d\uc131\uc774 solid\uc784\uc5d0\ub3c4 \ubd88\uad6c\ud558\uace0 IE6\uc5d0\uc120?.foo.bar \ub97c .bar\ub85c \uc778\uc2dd\ud568<\/strong>\uc5d0 \ub530\ub77c border-style\uc774 dashed \ub85c \ubaa8\ub450 \uad50\uccb4\ub41c \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. 1\ubc88 \ud56d\uc5d0\uc11c \ub2e4\ub8e8\uc5c8\ub358 \ubc84\uadf8\ub3c4 \uc774 \ubc84\uadf8\uc758 \uc601\ud5a5\uc774 \uacb9\uccd0\uc11c \uc0dd\uae34 \ubb38\uc81c\uac00 \uc544\ub2d0\uae4c \ud558\ub294\ub370\uc694, \uc815\ud655\ud788\ub294 \uc798 \ubaa8\ub974\uaca0\uc2b5\ub2c8\ub2e4.
\n\uc774 \ubc84\uadf8\ub97c \ud68c\ud53c\ud558\uae30 \uc704\ud574\uc11c\ub294 class\ub97c \ubd99\uc5ec\uc11c \uc120\uc5b8\ud558\ub294 \ub2e4\uc911 \uc120\ud0dd\uc790\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \uac83\uc774 \ucd5c\uc120\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc CSS\uc791\uc131 \uc911\uc758 \ud3b8\uc758\ub97c \uc704\ud574\uc11c \ubd99\uc5ec\uc11c \uc120\uc5b8\ud574\uc57c \ud560 \uacbd\uc6b0\uc5d4 \ub4a4\uc5d0 \ubd99\uc774\ub294 class\uba85\uc744 \uacb9\uce58\uc9c0 \uc54a\ub3c4\ub85d \uc0ac\uc6a9\ud558\ub294 \uac83\ub3c4 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n

\uae30\uc874<\/span>
\n.dx.class {}<\/span>
\n.dy<\/span><\/span>.class {}?\/* \ubcc4\ub3c4\uc758 class\ub85c \uc778\uc2dd\ub418\uc9c0\ub9cc, IE\ubc84\uadf8\ub85c dy.class{}\ub9cc \uc778\uc2dd *\/<\/span>
\n\uc218\uc815(\ubc84\uadf8 \ud68c\ud53c)<\/span>
\n.dx.classx {}
\n.dy.classy {}?\/* \ucd5c\uc885 class\uba85\uc744 \ub2e4\ub978 \uc774\ub984\uacfc \uacb9\uce58\uc9c0 \uc54a\ub294 \uace0\uc720\uc758 \ud074\ub798\uc2a4\uba85\uc73c\ub85c \uc0ac\uc6a9 *\/<\/span><\/p><\/blockquote>\n

 <\/p>\n

\uc774\ub807\uac8c \uc218\uc815\ud558\ub294 \ubc29\ubc95\uc740?\ub2e4\uc911 \uc120\ud0dd\uc790\uc758 \uc7a5\uc810\uc744 \uc644\uc804\ud788 \ubb34\uc2dc\ud558\ub294 \ube44\ud6a8\uc728\uc801\uc778 \ubc29\ubc95<\/span>\uc774\uae34 \ud558\uc9c0\ub9cc, \uc5b4\uca4c\uaca0\uc2b5\ub2c8\uae4c… \uc774\ub188\uc758 IE6\uc774 \ub3c4\uc640\uc8fc\uc9c0 \uc54a\ub294\uac78\uc694…<\/p>\n

\ubb3c\ub860, IE7\uc740 \uc704\uc5d0 \ub098\ud0c0\ub098\ub294 \ub2e4\uc911\ud074\ub798\uc2a4\uc758 \ubc84\uadf8\ub294 \ud574\uacb0\ud558\uc600\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, \ud45c\uc900\ubaa8\ub4dc(HTML 4.01, XHTML 1.0)\ub85c \ub3d9\uc791\ud560 \ub54c\uc5d0\ub9cc \ubc84\uadf8\uac00 \ub098\ud0c0\ub098\uc9c0 \uc54a\uac8c \ub418\uc5b4 \uc788\uc73c\uba70,?Quirks mode DTD\ub85c \ub3d9\uc791\ub420 \ub54c\uc5d0\ub294 IE6\uacfc\uc758 \ud638\ud658\uc744 \uc704\ud574<\/strong>?(\ub610\ub294 \ubbf8\ucc98 \ucffd\uc2a4\ubaa8\ub4dc \uc5d4\uc9c4\uc744 \uace0\uce58\uc9c0 \ubabb\ud588\uc744 \uc218\ub3c4 \uc788\uc8e0) \uc774 \ubc84\uadf8\uac00 \uadf8\ub300\ub85c \ub098\ud0c0\ub098\ub3c4\ub85d \ub418\uc5b4\uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

IE6\uc740 \uc5b8\uc81c\uae4c\uc9c0 \uc6b0\ub9ac UI\uac1c\ubc1c\uc790\ub97c \uad34\ub86d\ud788\uac8c \ub420\uae4c\uc694? \u3160_\u3160<\/p>\n","protected":false},"excerpt":{"rendered":"

\ucd9c\ucc98 : ?http:\/\/html.nhndesign.com\/blog\/909 CSS\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294?\ub2e4\uc911 \uc120\ud0dd\uc790(Multi Class)\ub780 \ub3d9\uc77c \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \uc5ec\ub7ec\uac1c\uc758 \uc120\ud0dd\uc790(id, class)\ub97c \ub3d9\uc2dc\uc5d0 \uc801\uc6a9\ud558\uae30 \uc704\ud55c \ubaa9\uc801\uc73c\ub85c \uc5ec\ub7ec\uac1c\uc758 \uc120\ud0dd\uc790\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \ub9d0\ud569\ub2c8\ub2e4. CSS1\uc5d0\uc11c \uc120\ud0dd\uc790\uc758 \uac1c\ub150\uc774 \uc0ac\uc6a9\ub41c \ud6c4, CSS2\uc5d0\uc11c \ub2e4\uc911 \uc120\ud0dd\uc790\uac00 \ucd94\uac00\ub418\uc5b4… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/237"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=237"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/237\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}