{"id":659,"date":"2016-07-21T15:01:42","date_gmt":"2016-07-22T00:01:42","guid":{"rendered":"\/blog\/?p=659"},"modified":"2023-09-21T09:37:59","modified_gmt":"2023-09-21T00:37:59","slug":"css-%ec%84%a0%ed%83%9d%ec%9e%90selector%ec%99%80-%ec%9a%b0%ec%84%a0-%ec%88%9c%ec%9c%84","status":"publish","type":"post","link":"https:\/\/hasu0707.duckdns.org\/blog\/?p=659","title":{"rendered":"CSS \uc120\ud0dd\uc790(Selector)\uc640 \uc6b0\uc120 \uc21c\uc704"},"content":{"rendered":"\n

\ucd9c\ucc98 : http:\/\/circlash.tistory.com\/570<\/a><\/p>\r\n


<\/p>\r\n

\uc120\ud0dd\uc790\ub780 CSS\uc5d0\uc11c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \ub300\uc0c1\uc744 \uc815\uc758\ud558\ub294 \uae30\ub2a5\uc744 \ud55c\ub2e4. CSS\uc758 \uc138\ubd80 \uc2a4\ud0c0\uc77c \uc801\uc6a9\uc5d0 \ub300\ud574 \uc54c\uace0 \uc788\uc5b4\ub3c4 \uc120\ud0dd\uc790\ub97c \uc54c\uc9c0 \ubabb\ud558\uba74 \ub0b4\uac00 \uc6d0\ud558\ub294 \ubd80\ubd84\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc218 \uc5c6\ub2e4. \uadf8\ub7ec\ub098 \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 \uba87 \uac00\uc9c0\ub9cc \uae30\uc5b5\ud558\uba74 \uac04\ub2e8\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uae30\ubcf8\uc801\uc778 \uc2a4\ud0c0\uc77c \uc9c0\uc815 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\r\n

[\ud0dc\uadf8\ub098 class, id \uc774\ub984=\uc120\ud0dd\uc790] {\uc18d\uc131:\uac12}<\/div>


<\/p>\r\n

1. \uc120\ud0dd\uc790 \uc885\ub958<\/h3>

\uc120\ud0dd\uc790\ub294 \ud06c\uac8c \ub2e4\uc74c\uacfc \uac19\uc774 \ubd84\ub958\ud560 \uc218 \uc788\ub2e4.<\/p>\r\n
\uc120\ud0dd\uc790(selector)<\/th><\/tr>
  1. \uc778\ub77c\uc778 (style=\" \")
    \ud0dc\uadf8\uc5d0 \uc9c1\uc811 style=\" \"\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud55c\ub2e4. CSS\uc5d0 \ub530\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4.<\/li>
  2. id (id=\"ex1\")
    \ud0dc\uadf8\uc5d0 \uc9c0\uc815\ud55c id\ub97c \uc120\ud0dd\uc790\ub85c \uc0ac\uc6a9\ud55c\ub2e4. id \uc55e\uc5d0 \uc0fe-\uc6b0\ubb3c\uc815-(#)\uc744 \ucd94\uac00\ud55c\ub2e4. \uc608) #ex1<\/li>
  3. class (class=\"ex2\")
    \ud0dc\uadf8\uc5d0 \uc9c0\uc815\ud55c class\ub97c \uc120\ud0dd\uc790\ub85c \uc0ac\uc6a9\ud55c\ub2e4. class \uc55e\uc5d0 \ub9c8\uce68\ud45c(.)\ub97c \ucd94\uac00\ud55c\ub2e4. \uc608) .ex2<\/li>
  4. \ud558\uc704 \uc120\ud0dd\uc790 (div ul li)
    \ud0dc\uadf8 \uc694\uc18c \uc774\ub984\uc744 \uc885\uc18d \uad00\uacc4\uc5d0 \ub530\ub77c \uc21c\ucc28\uc801\uc73c\ub85c \uc0ac\uc6a9\ud55c\ub2e4. div ul li { }\ub294 div\uc5d0 \uc18d\ud55c ul \ub0b4\ubd80\uc758 li\uc5d0 \ud574\ub2f9 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c\ub2e4\ub294 \uc758\ubbf8\ub2e4. '>', '+'\ub85c \ub300\uc0c1\uc744 \ud55c\uc815\ud560 \uc218 \uc788\ub2e4.<\/li>
  5. \ud0c0\uc785 \uc120\ud0dd\uc790 (p, div)
    \ud0dc\uadf8 \uc694\uc18c \uc774\ub984 \uc790\uccb4\ub97c \uc120\ud0dd\uc790\ub85c \uc0ac\uc6a9\ud55c\ub2e4. \uc5ec\ub7ec \uac1c \ub098\uc5f4\ud560 \uacbd\uc6b0 \uc27c\ud45c(,)\ub85c \uad6c\ubd84\ud55c\ub2e4.<\/li>
  6. \uacf5\ud1b5 \uc120\ud0dd\uc790 (*)
    \ubaa8\ub4e0 \uc694\uc18c\ub97c \uc120\ud0dd\ud55c\ub2e4.<\/li>
  7. \uac00\uc0c1 \ud074\ub798\uc2a4 (p:first-letter)
    \ubbf8\ub9ac \uc815\ud574\uc9c4 \uac00\uc0c1 \ud074\ub798\uc2a4\ub97c \uc694\uc18c \ub4a4\uc5d0 \ub367\ubd99\uc5ec \ud2b9\uc218\ud55c \uc0c1\ud669\uc5d0 \uc801\uc6a9\ud55c\ub2e4.<\/li>
  8. \ud2b9\uc131 (target, title)
    \ud0dc\uadf8 \uc694\uc18c\uc5d0 \uc0ac\uc6a9\ud558\ub294 \ud2b9\uc131\uc744 \uc120\ud0dd\uc790\ub85c \uc0ac\uc6a9\ud55c\ub2e4.<\/li><\/ol><\/td><\/tr><\/tbody><\/table>


    <\/p>\r\n

    W3School\uc758 \uc120\ud0dd\uc790 \ubd84\ub958\ud45c\ub97c \uc0b4\ud3b4\ubcf4\uba74 \ubaa8\ub4e0 \uc885\ub958\uc758 \uc120\ud0dd\uc790\uc5d0 \ub300\ud574 \uc27d\uac8c \uc54c \uc218 \uc788\ub2e4.<\/p>\r\n
    * \ucd9c\ucc98 : W3School (http:\/\/www.w3schools.com\/css\/css_reference.asp<\/a>)<\/caption>
    \uc120\ud0dd\uc790<\/th>\uc608<\/th>\uc608 \uc124\uba85<\/th>CSS<\/th><\/tr>
    .class<\/em><\/a><\/td>.intro<\/td>class=\"intro\"\uc778 \ubaa8\ub4e0 \uc694\uc18c\ub97c \uc120\ud0dd<\/td>1<\/td><\/tr>
    #id<\/em><\/a><\/td>#firstname<\/td>id=\"firstname\"\uc778 \ubaa8\ub4e0 \uc694\uc18c\ub97c \uc120\ud0dd<\/td>1<\/td><\/tr>
    *<\/a><\/td>*<\/td>\ubaa8\ub4e0 \uc694\uc18c\ub97c \uc120\ud0dd<\/td>2<\/td><\/tr>
    element<\/a><\/em><\/td>p<\/td><p> \uc694\uc18c\ub97c \ubaa8\ub450 \uc120\ud0dd<\/td>1<\/td><\/tr>
    element,element<\/a><\/em><\/td>div,p<\/td>\ubaa8\ub4e0 <div> \uc694\uc18c\uc640 <p> \uc694\uc18c\ub97c \uc120\ud0dd<\/td>1<\/td><\/tr>
    element<\/em> element<\/em><\/a><\/td>div p<\/td><div> \uc694\uc18c \uc548\uc5d0 \uc788\ub294 \ubaa8\ub4e0 <p> \uc694\uc18c\ub97c \uc120\ud0dd<\/td>1<\/td><\/tr>
    element<\/em>>element<\/em><\/a><\/td>div>p<\/td>\ubd80\ubaa8(\uc0c1\uc704) \uc694\uc18c\uac00 <div>\uc778 \ubaa8\ub4e0 <p> \uc694\uc18c\ub97c \uc120\ud0dd<\/td>2<\/td><\/tr>
    element<\/em>+element<\/em><\/a><\/td>div+p<\/td><div> \uc694\uc18c \ubc14\ub85c \ub4a4\uc5d0 \uc788\ub294 \ubaa8\ub4e0 <p> \uc694\uc18c\ub97c \uc120\ud0dd<\/td>2<\/td><\/tr>
    [attribute<\/em>]<\/a><\/td>[target]<\/td>target \ud2b9\uc131\uc774 \ud3ec\ud568\ub41c \ubaa8\ub4e0 \uc694\uc18c\ub97c \uc120\ud0dd<\/td>2<\/td><\/tr>
    [attribute<\/em>=value<\/em>]<\/a><\/td>[target=_blank]<\/td>target=\"_blank\"\uac00 \ud3ec\ud568\ub41c \ubaa8\ub4e0 \uc694\uc18c\ub97c \uc120\ud0dd<\/td>2<\/td><\/tr>
    [attribute<\/em>~=value<\/em>]<\/a><\/td>[title~=flower]<\/td>\"flower\"\ub780 \ub2e8\uc5b4\uac00 \ud3ec\ud568\ub41c title \ud2b9\uc131 \uac12\uc744 \uac16\ub294 \ubaa8\ub4e0 \uc694\uc18c\ub97c \uc120\ud0dd<\/td>2<\/td><\/tr>
    [attribute<\/em>|=language<\/em>]<\/a><\/td>[lang|=en]<\/td>\"en\"\uc73c\ub85c \uc2dc\uc791\ud558\ub294 lang \ud2b9\uc131 \uac12\uc744 \uac16\ub294 \ubaa8\ub4e0 \uc694\uc18c\ub97c \uc120\ud0dd<\/td>2<\/td><\/tr>
    :link<\/a><\/td>a:link<\/td>\ubc29\ubb38\ud558\uc9c0 \uc54a\uc740 \ubaa8\ub4e0 \ub9c1\ud06c \uc120\ud0dd<\/td>1<\/td><\/tr>
    :visited<\/a><\/td>a:visited<\/td>\uc774\ubbf8 \ubc29\ubb38\ud55c \ubaa8\ub4e0 \ub9c1\ud06c \uc120\ud0dd<\/td>1<\/td><\/tr>
    :active<\/a><\/td>a:active<\/td>\ud65c\uc131\ud654 \ub41c(\ud604\uc7ac \ud074\ub9ad\ud55c \uc0c1\ud0dc\uc758) \ubaa8\ub4e0 \ub9c1\ud06c \uc120\ud0dd<\/td>1<\/td><\/tr>
    :hover<\/a><\/td>a:hover<\/td>\ub9c8\uc6b0\uc2a4 \ucee4\uc11c\uac00 \uc62c\ub77c\uac00 \uc788\ub294 \ubaa8\ub4e0 \ub9c1\ud06c \uc120\ud0dd<\/td>1<\/td><\/tr>
    :focus<\/a><\/td>input:focus<\/td>\ud604\uc7ac \uc120\ud0dd\ub41c input \uc694\uc18c \uc120\ud0dd<\/td>2<\/td><\/tr>
    :first-letter<\/a><\/td>p:first-letter<\/td>\ubaa8\ub4e0 <p> \uc694\uc18c\uc758 \uccab \ubc88\uc9f8 \ubb38\uc790 \uc120\ud0dd<\/td>1<\/td><\/tr>
    :first-line<\/a><\/td>p:first-line<\/td>\ubaa8\ub4e0 <p> \uc694\uc18c\uc758 \uccab \ubc88\uc9f8 \uc904 \uc120\ud0dd<\/td>1<\/td><\/tr>
    :first-child<\/a><\/td>p:first-child<\/td>\ubd80\ubaa8 \ud56d\ubaa9\uc758 \uccab \ubc88\uc9f8 \uc790\uc2dd \ud56d\ubaa9\uc778 \ubaa8\ub4e0 <p> \uc694\uc18c \uc120\ud0dd<\/td>2<\/td><\/tr>
    :before<\/a><\/td>p:before<\/td>\ubaa8\ub4e0 <p> \uc694\uc18c \uc55e\uc5d0 \ub0b4\uc6a9 \uc0bd\uc785<\/td>2<\/td><\/tr>
    :after<\/a><\/td>p:after<\/td>\ubaa8\ub4e0 <p> \uc694\uc18c \ub4a4\uc5d0 \ub0b4\uc6a9 \uc0bd\uc785<\/td>2<\/td><\/tr>
    :lang(language<\/em>)<\/a><\/td>p:lang(it)<\/td>lang \uc18d\uc131 \uac12\uc774 \"it\"\ub85c \uc2dc\uc791\ud558\ub294 \ubaa8\ub4e0 <p> \uc694\uc18c \uc120\ud0dd<\/td>2<\/td><\/tr><\/tbody><\/table>

    class<\/span>\ub294 \uc694\uc18c\uc5d0 \uc9c0\uc815\ub41c class \uac12\uc73c\ub85c \uc6d0\ud558\ub294 \uc694\uc18c\ub97c \uc120\ud0dd\ud558\uace0 CSS\uc5d0\uc11c \uc9c0\uc815\ud560 \ub550 class \uc55e\uc5d0 \ub9c8\uce68\ud45c(.)\ub97c \ucd94\uac00\ud55c\ub2e4. HTML \ubb38\uc11c\uc5d0 <div class=\"div_ex1\"><\/span>\ub780 \ubd80\ubd84\uc774 \uc788\uace0 CSS\uc5d0.div_ex1{width:85%}<\/span>\ub77c\uace0 \uc9c0\uc815\ub418\uc5b4 \uc788\ub2e4\uba74 class\uac00 div_ex1\uc774\ub77c\uace0 \uc815\uc758\ub41c \ubd80\ubd84\uc744 HTML \ubb38\uc11c\uc5d0\uc11c \uc120\ud0dd\ud55c \ub2e4\uc74c width:85%\ub780 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c\ub2e4. \ub9cc\uc57d HTML \ubb38\uc11c\uc5d0 <div class=\"div_ex1\"><\/span>\uc640<table class=\"div_ex1\"><\/span>\uac00 \uc788\ub2e4\uba74 div\uc640 table \ubaa8\ub450\uc5d0 width:85%\ub780 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4.<\/p>\r\n

    \uc774\ub54c class\uac00 \uac19\uc740 \uc694\uc18c \uc911 \ud2b9\uc815 \uc694\uc18c\uc5d0\ub9cc \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74, \uc989, div_ex1\uc774\ub780 class\ub97c \uac00\uc9c4 div\uc5d0\ub9cc \ub610\ub294 table\uc5d0\ub9cc \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74 div.div_ex1{width:85%}<\/span>\ub77c\uace0 \uc9c0\uc815\ud558\ub4e0\uac00 table.div_ex1{width:85%}<\/span>\ub77c\uace0 \uc9c0\uc815\ud55c\ub2e4.<\/p>\r\n

    id<\/span>\ub294 \uc694\uc18c\uc5d0 \uc9c0\uc815\ub41c id \uac12\uc73c\ub85c \uc6d0\ud558\ub294 \uc694\uc18c\ub97c \uc120\ud0dd\ud558\uace0 CSS\uc5d0\uc11c \uc9c0\uc815\ud560 \ub550 id \uc55e\uc5d0 \uc0f5-\uc6b0\ubb3c\uc815(#)\uc744 \ucd94\uac00\ud55c\ub2e4. HTML \ubb38\uc11c\uc5d0 <div class=\"div_ex1\" id=\"main_ex1\"><\/span>\uc774\ub780 \ubd80\ubd84\uc774 \uc788\uace0 CSS\uc5d0#main_ex1{padding:15px 0 10px}<\/span>\uc774\ub77c\uace0 \uc9c0\uc815\ub418\uc5b4 \uc788\ub2e4\uba74 id\uac00 main_ex1\uc774\ub77c\uace0 \uc815\uc758\ub41c \ubd80\ubd84\uc744 HTML \ubb38\uc11c\uc5d0\uc11c \uc120\ud0dd\ud55c \ub2e4\uc74c padding:15px 0 10px\uc774\ub780 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c\ub2e4. \uc55e\uc5d0\uc11c\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c id\uac00 \uac19\uc740 \uc694\uc18c\uac00 \uc5ec\ub7ec\uac1c \uc788\ub2e4\uba74 \ubaa8\ub4e0 \uc694\uc18c\uc5d0 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub418\uace0 \ud2b9\uc815 \uc694\uc18c\uc5d0\ub9cc \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\ub824\uba74 \uc5ed\uc2dc \ub9c8\ucc2c\uac00\uc9c0\ub85c div#main_ex1{padding:15px 0 10px}<\/span>\ucc98\ub7fc \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud55c\ub2e4.<\/p>\r\n

    *<\/span>\uc740 \ubaa8\ub4e0 \uc694\uc18c\uc5d0 \uc77c\uad04\uc801\uc73c\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c\ub2e4. CSS \ucc98\uc74c\uc5d0 *{margin:0;padding:0}<\/span>\uc774\ub77c\uace0 \uc9c0\uc815\ud558\uba74 \uc2a4\ud0c0\uc77c \uc9c0\uc815\uc5d0 \uc55e\uc11c \ubaa8\ub4e0 \uc694\uc18c\uc758 \ubc14\uae65 \uc5ec\ubc31(margin)\uacfc \uc548\ucabd \uc5ec\ubc31(padding) \uac12\uc774 \ucd08\uae30\ud654\ub41c\ub2e4. \ub610 \uc694\uc18c\ub97c \uc9c0\uc815\ud558\uc9c0 \uc54a\uc740 class\ub098 id \uc55e\uc5d4 \ud56d\uc0c1 *\uc774 \uc0dd\ub7b5\ub418\uc5b4 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc55e\uc5d0\uc11c \uc774\uc57c\uae30\ud55c .div_ex1{width:85%}<\/span>\ub780 \uc2a4\ud0c0\uc77c\uc774 \uc788\ub2e4\uace0 \ud558\uba74 \uc0ac\uc2e4, \uc774 \ubd80\ubd84\uc740 *.div_ex1{width:85%}<\/span>\uc778\ub370 \uc5ec\uae30\uc11c *\uc744 \uc0dd\ub7b5\ud55c \uac83\uacfc \uac19\ub2e4.<\/p>\r\n

    \uc694\uc18c(HTML \ubb38\uc11c\uc758 \ud0dc\uadf8)<\/span>\ub294 \ud2b9\uc815 \uc694\uc18c \uc804\uccb4\ub97c \uc120\ud0dd\ud55c\ub2e4. CSS\uc5d0 p{line-height:180%}<\/span>\ub77c\uace0 \uc9c0\uc815\ud558\uba74 HTML \ubb38\uc11c\uc758 \ubaa8\ub4e0 p \uc694\uc18c\ub294 line-height:180%\uc758 \uc2a4\ud0c0\uc77c\uc744 \uac16\ub294\ub2e4. \uc5ec\ub7ec \uc694\uc18c\uc5d0 \uc77c\uad04\uc801\uc73c\ub85c \uac19\uc740 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \ub550 \uac01 \uc694\uc18c\ub97c \uc27c\ud45c(,)<\/span>\ub85c \uad6c\ubd84\ud55c\ub2e4. p,span,li{line-height:180%}<\/span>\ub77c\uace0 \uc9c0\uc815\ud558\uba74 HTML \ubb38\uc11c\uc758 \ubaa8\ub4e0 p, span, li \uc694\uc18c\uc5d0 line-height:180%\uc774\ub780 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4. \uc694\uc18c \uc0ac\uc774\uc5d0 ><\/span>\ub97c \uc0bd\uc785\ud558\uba74 \ud3ec\ud568 \uad00\uacc4\ub97c \ub098\ud0c0\ub0bc \uc218 \uc788\ub2e4. div>p{line-height:180%}<\/span>\ub77c\uace0 \uc9c0\uc815\ud558\uba74 p \uc694\uc18c \uc911 \ubd80\ubaa8 \uc694\uc18c\uac00 div\uc778 \ud56d\ubaa9\uc5d0\ub9cc line-height:180%\uc774\ub780 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4. \uc694\uc18c \uc0ac\uc774\uc5d0 +<\/span>\uac00 \uc788\ub2e4\uba74 \uc55e\uc758 \uc694\uc18c\uc640 \ubd99\uc5b4 \uc788\ub294 \ub4a4\uc758 \uc694\uc18c\uc5d0\ub9cc \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4. div+p{line-height:180%}<\/span>\ub77c\uace0 \uc9c0\uc815\ud558\uba74 div \ubc14\ub85c \ub4a4\uc5d0 \ubd99\uc5b4\uc788\ub294 p \uc694\uc18c\uc5d0\ub9cc \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4.<\/p>\r\n

    \ud55c \uc694\uc18c\uc5d0 class\ub97c \uc5ec\ub7ec \uac1c \uc815\uc758\ud560 \uc218\ub3c4 \uc788\ub2e4. class \uc774\ub984 \uc0ac\uc774\uc5d0 \uacf5\ubc31\uc744 \uc0bd\uc785\ud558\uba74 \ub41c\ub2e4. class=\"className1 className2\"\uc640 \uac19\uc740 \ud615\uc2dd\uc774\ub2e4. \uc774\ub550 \ub450 class\uc5d0 \ub530\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc5b4 HTML \ubb38\uc11c\uc5d0 <p class=\"css_ex1\">Sample Text 2<\/p> <p class=\"css_ex1 css_ex2\">Sample Text 3<\/p><\/span>\uc774\ub77c\ub294 \ubd80\ubd84\uc774 \uc788\uc744 \ub54c class=\"css_ex1\"\uc5d0 \uacf5\ud1b5\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uc9c0\ub9cc, Sample Text 3\uc5d0 \ucd94\uac00\uc801\uc778 \uc18d\uc131\uc744 \uc9c0\uc815\ud558\uace0 \uc2f6\ub2e4\uba74 class=\"css_ex1 css_ex2\"\ucc98\ub7fc class\ub97c \ub450 \uac1c \uc9c0\uc815\ud558\uace0 .css_ex1\uc73c\ub85c \uacf5\ud1b5 \uc2a4\ud0c0\uc77c\uc744, .css_ex2\ub85c \ucd94\uac00\uc801\uc778 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud55c\ub2e4. \uc120\ud0dd\uc790 \uc6b0\uc120\uc21c\uc704\ub97c \ub192\uc774\uae30 \uc704\ud574\uc11c p.css_ex1.css_ex2 \ucc98\ub7fc \uc120\ud0dd\uc790\uc5d0 class\ub97c \uc911\ubcf5\ud574\uc11c \uc9c0\uc815\ud560 \uc218\ub3c4 \uc788\ub2e4. \uc120\ud0dd\uc790 \uc6b0\uc120\uc21c\uc704\ub294 \uc544\ub798\uc5d0 \uc790\uc138\ud788 \uc124\uba85\ud560 \uac83\uc774\ub2e4.<\/p>\r\n

    \uc544\ub798\uc758 \uc608\ub97c \ucc38\uace0\ud558\uba74 \uc694\uc18c>\uc694\uc18c, \uc694\uc18c+\uc694\uc18c\uac00 \uc5b4\ub5bb\uac8c \uc801\uc6a9\ub418\ub294\uc9c0 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\r\n
    <\uc608\uc81c 1><\/caption>
    <html>
    <head>
    <style type=\"text\/css\">
    hr+p{color:red;font-size:28px}<\/span>
    div>p{color:blue;font-size:28px}<\/span>
    hr{width:100%;height:1px;background:#666;;border:1px solid #666}
    <\/style>
    <\/head>
    <body>
    <p>ex1<\/p>
    <div>
    <p>ex2<\/p>
    <table><tr><td>ex3<\/td><\/tr><\/table>
    <p>ex4<\/p>
    <\/div>
    <hr \/>
    <p>ex5<\/p>
    <p>ex6<\/p>
    <\/body>
    <\/html><\/td>

    ex1<\/p>\r\n

    ex2<\/p>\r\n
    ex3<\/td><\/tr><\/tbody><\/table>

    ex4<\/p>\r\n<\/div>

    ex5<\/p>\r\n

    ex6<\/p>\r\n<\/td><\/tr><\/tbody><\/table>


    <\/p>\r\n

    \uc694\uc18c\ub97c \ub098\uc5f4\ud560 \ub54c \uc694\uc18c \uc0ac\uc774\ub97c \ub744\uc6b0\uba74 \ud3ec\ud568 \uad00\uacc4\ub97c \ub098\ud0c0\ub0b8\ub2e4. div ol li{list-style:lower-greek}<\/span>\uc774\ub77c\uace0 \uc9c0\uc815\ud558\uba74 div \uc694\uc18c \uc601\uc5ed \uc548\uc758 ol \uc694\uc18c \ub0b4\ubd80\uc758 li \ud56d\ubaa9\uc5d0 list-style:lower-greek\uc774 \uc801\uc6a9\ub41c\ub2e4. div, ol, li \uc0ac\uc774\uc5d0 \ub2e4\ub978 \ud0dc\uadf8\uac00 \uc788\uc5b4\ub3c4 \ud3ec\ud568 \uad00\uacc4\ub9cc \uc720\uc9c0\ub41c\ub2e4\uba74 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4. \uc608\ub97c \ub4e4\uc5b4 div \uc548\uc5d0 table\uc774 \uc788\uace0 \uadf8 \uc548\uc5d0 ol, li\uac00 \uc788\uc5b4\ub3c4 list-style:lower-greek\uc774\ub780 \uc2a4\ud0c0\uc77c\uc740 \uc5ec\uc804\ud788 \uc801\uc6a9\ub41c\ub2e4.<\/p>\r\n

    \ud2b9\uc131(attribute)<\/span>\uc740 \uc694\uc18c\ucc98\ub7fc \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4. HTML \ubb38\uc11c\uc5d0 <a href=\"http:\/\/circlash.tistory.com\" target=\"_blank\" title=\"circlash \ube14\ub85c\uadf8 \ubc14\ub85c \uac00\uae30\">circlash \ube14\ub85c\uadf8<\/a><\/span>\ub77c\ub294 \ubd80\ubd84\uc774 \uc788\uc744 \ub54c CSS\uc5d0 [target]{text-decoration:underline}<\/span>\uc774\ub77c\uace0 \uc9c0\uc815\ud558\uba74 \ub9c1\ud06c \ubd80\ubd84\uc5d0 target\uc774\ub77c\ub294 \ud2b9\uc131\uc774 \uc788\uc73c\ubbc0\ub85c 'circlash \ube14\ub85c\uadf8'\ub77c\ub294 \ub9c1\ud06c \uc544\ub798\uc5d0 \ubc11\uc904 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4. [title~=circlash]{color:red}<\/span>\ub77c\uace0 \uc9c0\uc815\ud558\uba74 \uc5ed\uc2dc \ub9c1\ud06c title \ud2b9\uc131 \uac12 \uc911\uc5d0 circlash\ub77c\ub294 \ub2e8\uc5b4\uac00 \uc788\uc73c\ubbc0\ub85c 'circlash \ube14\ub85c\uadf8'\ub77c\ub294 \ub9c1\ud06c \uae00\uc528 \uc0c9\uc774 \ube68\uac04\uc0c9\uc73c\ub85c \ubc14\ub010\ub2e4.<\/p>\r\n

    \uac00\uc0c1 \ud074\ub798\uc2a4(pseudo-class)<\/span>\ub294 \uc694\uc18c\uc758 \ud2b9\uc815 \ubd80\ubd84\uc5d0\ub9cc \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \ub54c \uc0ac\uc6a9\ud55c\ub2e4. \uac00\uc7a5 \ud754\ud788 \ubcfc \uc218 \uc788\ub294 \uac83\uc774 :link, :visited, :active, :hover, :focus\ub2e4. \ud2b9\uc815 \uc8fc\uc18c\ub85c \ub9c1\ud06c\ub97c \uac70\ub294 a\ub77c\ub294 \uc694\uc18c\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \ubd80\uc5ec\ud560 \ub54c a:link,a:visited{color:red} a:hover{color:blue}<\/span>\ub77c\uace0 \uc9c0\uc815\ud558\uba74 \ud3c9\uc18c\uc758 \ub9c1\ud06c\ub098 \ubc29\ubb38\ud55c \ub9c1\ud06c\ub294 \ube68\uac04\uc0c9\uc73c\ub85c, \ub9c1\ud06c \uc704\uc5d0 \ub9c8\uc6b0\uc2a4 \ucee4\uc11c\ub97c \uc62c\ub838\uc744 \ub550 \ud30c\ub780\uc0c9\uc73c\ub85c \ud45c\uc2dc\ub41c\ub2e4. \ub2e4\ub978 \uac00\uc0c1 \ud074\ub798\uc2a4 \uc5ed\uc2dc \ube44\uc2b7\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\r\n


    <\/p>\r\n

    2. \uc120\ud0dd\uc790 \uc6b0\uc120\uc21c\uc704<\/h3>

    \uc77c\ubc18\uc801\uc778 \uc0dd\uac01\uacfc \ub2ec\ub9ac \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub294 \uc5ec\ub7ec \uac1c\uac00 \uc874\uc7ac\ud55c\ub2e4. CSS \ud30c\uc77c\uc774 \uc5ec\ub7ec\uac1c\ub780 \uc758\ubbf8\uac00 \uc544\ub2c8\ub2e4. \uc6f9\ube0c\ub77c\uc6b0\uc800 \uc790\uccb4\ub294 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc774 \uc9c0\uc815\ub418\uc5b4 \uc788\uace0 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uc0ac\uc6a9\uc790\ub294 \uc5ec\uae30\uc5d0 \uc790\uc2e0\uc774 \uc0ac\uc6a9\ud560 \uc2a4\ud0c0\uc77c\uc744 \ub530\ub85c \uc9c0\uc815\ud55c\ub2e4. \uac8c\ub2e4\uac00 \uc6f9\uc0ac\uc774\ud2b8 \uc81c\uc791\uc790 \uc5ed\uc2dc \uc790\uc2e0\uc758 \ud398\uc774\uc9c0\ub97c \ud45c\uc2dc\ud560 \uc2a4\ud0c0\uc77c\uc744 \ub530\ub85c \uc9c0\uc815\ud55c\ub2e4. \ub610 \uc774\ubbf8 CSS \ud30c\uc77c\uc5d0 \uc2a4\ud0c0\uc77c\uc774 \uc9c0\uc815\ub418\uc5b4 \uc788\uc5b4\ub3c4 \ud544\uc694\uc5d0 \ub530\ub77c\uc11c \uc778\ub77c\uc778 \uc2a4\ud0c0\uc77c\uc774\ub098 \ub0b4\ubd80 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub85c \ub530\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uae30\ub3c4 \ud55c\ub2e4. \ub530\ub77c\uc11c \uac01 \uc2a4\ud0c0\uc77c \ubc0f \uc120\ud0dd\uc790\uc758 \uc6b0\uc120 \uc21c\uc704\ub97c \uc54c\uc544\uc57c \ub0b4\uac00 \uc6d0\ud558\ub294 \uc2a4\ud0c0\uc77c\uc744 \uc815\ud655\ud788 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\r\n

    \uba3c\uc800 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\uc758 \uc6b0\uc120 \uc21c\uc704\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4. 1\uc774 \ub0ae\uace0 5\uac00 \ub192\ub2e4.
    <\/p>\r\n

    1. User Agent \uc120\uc5b8 - \ube0c\ub77c\uc6b0\uc800 \uc790\uccb4\uc758 \uc120\uc5b8<\/li>
    2. \uc0ac\uc6a9\uc790 \uc120\uc5b8 - \uc77c\ubc18 : \uc0ac\uc6a9\uc790 \uc120\uc5b8 (\uc911\uc694\ub3c4: \ubcf4\ud1b5)<\/li>
    3. \uc81c\uc791\uc790 \uc120\uc5b8 - \uc77c\ubc18 : \uc81c\uc791\uc790 \uc120\uc5b8 (\uc911\uc694\ub3c4: \ubcf4\ud1b5)<\/li>
    4. \uc81c\uc791\uc790 \uc120\uc5b8 - \uc911\uc694 : \uc81c\uc791\uc790 \uc120\uc5b8 (\uc911\uc694\ub3c4: \ub192\uc74c)<\/li>
    5. \uc0ac\uc6a9\uc790 \uc120\uc5b8 - \uc911\uc694 : \uc0ac\uc6a9\uc790 \uc120\uc5b8 (\uc911\uc694\ub3c4: \ub192\uc74c)<\/li><\/ol><\/div>

      \uc5ec\uae30\uc11c User Agent \uc120\uc5b8, \uc0ac\uc6a9\uc790 \uc77c\ubc18 \uc120\uc5b8, \uc0ac\uc6a9\uc790 \uc911\uc694 \uc120\uc5b8\uc740 \uc0dd\uac01\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub41c\ub2e4. User Agent \uc120\uc5b8, \uc0ac\uc6a9\uc790 \uc77c\ubc18 \uc120\uc5b8\uc740 \uc5b4\ucc28\ud53c \uc81c\uc791\uc790 \uc77c\ubc18 \uc120\uc5b8\uc774 \uc774\uae34\ub2e4. \ub610 \uc0ac\uc6a9\uc790 \uc911\uc694 \uc120\uc5b8\uc740 \uc5b4\ub5a4 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub3c4 \uc774\uae38 \uc218 \uc5c6\ub2e4. \uadf8\ub7ec\ub2c8 \uc81c\uc791\uc790 \uc77c\ubc18 \uc120\uc5b8\uacfc \uc81c\uc791\uc790 \uc911\uc694 \uc120\uc5b8\ub9cc \uc0dd\uac01\ud558\uc790.<\/p>\r\n

      \uadf8\ub7f0\ub370 \uc77c\ubc18 \uc120\uc5b8\uc740 \ubb50\uace0 \uc911\uc694 \uc120\uc5b8\uc740 \ubb58\uae4c? \uc77c\ubc18 \uc120\uc5b8\uc740 \uadf8\ub0e5 CSS\uc5d0 \uc785\ub825\ub41c \ub0b4\uc6a9\uc774\ub2e4. \ub05d. \uc911\uc694 \uc120\uc5b8\uc740 \uc18d\uc131 \uac12 \ub4a4\uc5d0 !important<\/span>\ub77c\uace0 \ucd94\uac00\ud55c \uac83\uc774\ub2e4. \ub05d. \uac04\ub2e8\ud558\ub2e4. \uc120\ud0dd\uc790 \uc6b0\uc120\uc21c\uc704\ub97c \uc815\ud655\ud788 \uc54c \uc21c \uc5c6\ub294\ub370 \ub0b4\uac00 \uc6d0\ud558\ub294 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc744 \ub54c !important\ub85c \uc911\uc694 \uc120\uc5b8\uc744 \ud558\uba74 \uc6b0\uc120\uc21c\uc704\uac00 \uae09\uc0c1\uc2b9\ud574\uc11c \ubc14\ub85c \uc801\uc6a9\ub41c\ub2e4.<\/p>\r\n

      \/* \uc0ac\uc6a9\uc790 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8 *\/ p { text-indent: 1em ! important } p { font-style: italic ! important } p { font-size: 18pt }  \/* \uc81c\uc791\uc790 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8 *\/ p { text-indent: 1.5em !important } p { font: normal 12pt sans-serif !important } p { font-size: 24pt }<\/pre><\/div>
      \uc704 \ud45c\ub294 W3C\uc5d0 \uc81c\uc2dc\ub41c !important\uc5d0 \uad00\ud55c \uc6b0\uc120\uc21c\uc704\ub2e4. \uccab \ubc88\uc9f8 text-indent \uc18d\uc131\uc740 !important\uac00 \uc120\uc5b8\ub418\uc5b4 \uc788\uc73c\ubbc0\ub85c level 5\uc778 \uc0ac\uc6a9\uc790 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\uac00 \uc774\uae34\ub2e4. \ub450 \ubc88\uc9f8 font \uc18d\uc131 \uc5ed\uc2dc \uc0ac\uc6a9\uc790 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\uac00 \uc774\uae34\ub2e4. \uadf8\ub7ec\ub098 \uc138 \ubc88\uc9f8 font-size\ub294 !important \uc120\uc5b8\uc774 \uc5c6\uc73c\ubbc0\ub85c \uc81c\uc791\uc790\uc758 \ub450 \ubc88\uc9f8 font \uc18d\uc131\uc774 \uc0ac\uc6a9\uc790\uc758 \uc138 \ubc88\uc9f8 font-size \uc18d\uc131\uc744 \uc774\uae34\ub2e4. \uc81c\uc791\uc790\uc758 \uc138 \ubc88\uc9f8 font-size \uc18d\uc131 \uc5ed\uc2dc !important \uc120\uc5b8\uc774 \uc5c6\uc73c\ubbc0\ub85c \uc81c\uc791\uc790\uc758 \ub450 \ubc88\uc9f8 font \uc18d\uc131\uc774 \uc774\uae34\ub2e4. \uacb0\uad6d \uc815\ub9ac\ud558\uba74 \uc0ac\uc6a9\uc790\uc758 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0 \ud45c\uc2dc\ub418\ub294 p \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c\uc740 p { text-indent:1em; font: italic 12pt sans-serif }<\/span>\uac00 \ub420 \uac83\uc774\ub2e4.<\/p>\r\n
      \uc911\uc694 \uc120\uc5b8\uc5d0 \ub300\ud574\uc120 \uc77c\ub2e8 \uc774 \uc815\ub3c4\ub9cc \ud558\uace0 \uc2e4\uc81c \uc120\ud0dd\uc790 \uc6b0\uc120\uc21c\uc704\ub97c \uc0b4\ud3b4\ubcf4\uc790.<\/p>\r\n
      * {} \/* a=0 b=0 c=0 d=0 -&gt; specificity = 0,0,0,0 *\/\u00a0<\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\">li {} \/* a=0 b=0 c=0 d=1 -&gt; specificity = 0,0,0,1 *\/\u00a0<\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\">li:first-line {}\u00a0<span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\">\/* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 *\/&nbsp;<\/span><\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\"><span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\">ul li {} \/* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 *\/&nbsp;<\/span><\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\"><span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\">ul ol+li {} \/* a=0 b=0 c=0 d=3 -&gt; specificity = 0,0,0,3 *\/&nbsp;<\/span><\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\"><span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\">h1 + *[rel=up] {} \/* a=0 b=0 c=1 d=1 -&gt; specificity = 0,0,1,1 *\/&nbsp;<\/span><\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\"><span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\">ul ol li.red {} \/* a=0 b=0 c=1 d=3 -&gt; specificity = 0,0,1,3 *\/&nbsp;<\/span><\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\"><span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\">li.red.level {} \/* a=0 b=0 c=2 d=1 -&gt; specificity = 0,0,2,1 *\/&nbsp;<\/span><\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\"><span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\">#x34y {} \/* a=0 b=1 c=0 d=0 -&gt; specificity = 0,1,0,0 *\/&nbsp;<\/span><\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\"><span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\">style=\"\" \/* a=1 b=0 c=0 d=0 -&gt; specificity = 1,0,0,0 *\/<\/span><\/xmp><xmp style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; outline: 0px; white-space: pre-line;\"><span style=\"font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; line-height: 23.8px;\"><br \/><\/span><\/xmp><\/div><p style=\"text-align: left; margin-right: auto; margin-bottom: 1em; margin-left: auto; padding: 0px; border: 0px; outline: 0px; text-indent: 0.7em; color: rgb(51, 51, 51); font-size: 14px; line-height: 23.8px; word-spacing: 1px; font-style: italic; width: 720px; font-family: &quot;malgun gothic&quot;;\">* \ucd9c\ucc98 : W3C (<a href=\"http:\/\/www.w3.org\/TR\/CSS21\/cascade.html#specificity\" title=\"\uc6d0\ubb38 \ubcf4\uae30\" target=\"_blank\" style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; color: rgb(0, 0, 0); font-weight: 700;\" rel=\"noopener\">http:\/\/www.w3.org\/TR\/CSS21\/cascade.html#specificity<\/a>)<\/p>\r\n<p style=\"margin: 0.2em auto 1em; padding: 0px; border: 0px; outline: 0px; text-indent: 0.7em; color: rgb(51, 51, 51); font-family: &quot;malgun gothic&quot;, &quot;\ub9d1\uc740 \uace0\ub515&quot;, nanumgothic, \ub098\ub214\uace0\ub515, dotum, \ub3cb\uc6c0, sans-serif; font-size: 14px; line-height: 23.8px; word-spacing: 1px;\">\uc704\uc758 \ud45c\uac00 \ubc14\ub85c \uc120\ud0dd\uc790 \uc6b0\uc120\uc21c\uc704\ub2e4. \ud45c\uc5d0\uc11c a &gt; b &gt; c &gt; d\uc758 \uc21c\uc73c\ub85c \uc6b0\uc120\uc21c\uc704\uac00 \uc801\uc6a9\ub41c\ub2e4. \uc740\uba54\ub2ec\uc774 \uc544\ubb34\ub9ac \ub9ce\uc544\ub3c4 \uae08\uba54\ub2ec\uc744 \uc774\uae38 \uc218 \uc5c6\ub294 \uac83\ucc98\ub7fc b\uac00 \uc544\ubb34\ub9ac \ub192\uc544\ub3c4 a\ub97c \uc774\uae38 \uc218 \uc5c6\ub2e4. style=\"\"\ub85c \uc9c0\uc815\ud558\ub294&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; color: rgb(255, 102, 102);\">\uc778\ub77c\uc778 \uc2a4\ud0c0\uc77c\uc774 a\ub85c \uc6b0\uc120\uc21c\uc704\uac00 \uac00\uc7a5 \ub192\uace0 \uadf8\ub2e4\uc74c\uc740 id\ub85c b\ub2e4. class\uc640 \uac00\uc0c1\ud074\ub798\uc2a4\ub294 c, \uc77c\ubc18 \uc694\uc18c(\ud0dc\uadf8) \ubc0f \uac00\uc0c1\uc694\uc18c\ub294 d\ub2e4.<\/span>&nbsp;\uc8fc\uc758\ud560 \uac83\uc740 \uaddc\ubaa8\uac00 \uc791\uc544\uc9c8\uc218\ub85d(\uc138\ubd80 \ud56d\ubaa9\uc5d0 \ub300\ud574 \uc815\uc758\ud560\uc218\ub85d) \uc6b0\uc120\uc21c\uc704\uac00 \ub192\ub2e4\ub294 \uc0ac\uc2e4\uc774\ub2e4. HTML \ubb38\uc11c\uc5d0&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; color: rgb(255, 102, 102);\">&lt;li class=\"red level\"&gt; &lt;\/li&gt;<\/span>\ub77c\uace0 \uc9c0\uc815\ub418\uc5b4 \uc788\uc744 \ub54c&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; color: rgb(255, 102, 102);\">li.red.level<\/span>\ucc98\ub7fc li\ub77c\ub294 \uc694\uc18c\uc5d0 red, level\uc774\ub77c\ub294 \ub450 \uac1c\uc758 class\ub97c \uc9c0\uc815\ud558\uba74 c\uac00 2\uc810, d\uac00 1\uc810\uc774\ub2e4. \ubc18\uba74,&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; color: rgb(255, 102, 102);\">ul ol li.red<\/span>\ucc98\ub7fc ul \uc694\uc18c \uc548\uc758 ol \uc694\uc18c \ub0b4\ubd80\uc758 li\ub77c\ub294 \uc694\uc18c\uc5d0 red\ub780 class\uac00 \uc9c0\uc815\ub418\uc5c8\uc744 \ub550 ul, ol, li\ub85c d\uac00 3\uc810\uc774\uc9c0\ub9cc, class\ub294 red \ud558\ub098\uc774\ubbc0\ub85c c\ub294 1\uc810\uc774\ub2e4. \ub530\ub77c\uc11c li.red.level\uacfc ul ol li.red\uc5d0 \uc11c\ub85c \ub2e4\ub978 \uc2a4\ud0c0\uc77c \uc18d\uc131\uc774 \uc9c0\uc815\ub418\uc5b4 \uc788\uc744 \ub550 li.red.level\uc5d0 \uc801\uc6a9\ub41c \uc2a4\ud0c0\uc77c\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \ub9cc\uc57d \uc5ec\uae30\uc5d0&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; color: rgb(255, 102, 102);\">li.red .blue<\/span>\ub780 \uc2a4\ud0c0\uc77c\uc774 \uc815\uc758\ub418\uc5b4 \uc788\ub2e4\uba74 \uc774 \uc2a4\ud0c0\uc77c\uc758 \uc120\ud0dd\uc790\uac00 \ub354 \uc791\uc740 \ubc94\uc704\ub97c \uc81c\ud55c\ud558\ubbc0\ub85c red\ub780 class\uc758 li \uc694\uc18c \ud558\uc704\uc758 blue\ub780 class\ub97c \uac16\ub294 \ud2b9\uc815 \uc694\uc18c\uc5d4 li.red .blue\uc5d0 \uc815\uc758\ub41c \uc2a4\ud0c0\uc77c\uc774, \uadf8 \uc678\uc758 li.red.level \uc694\uc18c\uc5d4 li.red.level\uc5d0 \uc815\uc758\ub41c \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ucd9c\ucc98 :&nbsp;http:\/\/circlash.tistory.com\/570 \uc120\ud0dd\uc790\ub780 CSS\uc5d0\uc11c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \ub300\uc0c1\uc744 \uc815\uc758\ud558\ub294 \uae30\ub2a5\uc744 \ud55c\ub2e4. CSS\uc758 \uc138\ubd80 \uc2a4\ud0c0\uc77c \uc801\uc6a9\uc5d0 \ub300\ud574 \uc54c\uace0 \uc788\uc5b4\ub3c4 \uc120\ud0dd\uc790\ub97c \uc54c\uc9c0 \ubabb\ud558\uba74 \ub0b4\uac00 \uc6d0\ud558\ub294 \ubd80\ubd84\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc218 \uc5c6\ub2e4. \uadf8\ub7ec\ub098 \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 \uba87 \uac00\uc9c0\ub9cc \uae30\uc5b5\ud558\uba74 \uac04\ub2e8\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uae30\ubcf8\uc801\uc778 \uc2a4\ud0c0\uc77c \uc9c0\uc815 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4. [\ud0dc\uadf8\ub098 class, id \uc774\ub984=\uc120\ud0dd\uc790] {\uc18d\uc131:\uac12} 1. \uc120\ud0dd\uc790 \uc885\ub958 \uc120\ud0dd\uc790\ub294 \ud06c\uac8c \ub2e4\uc74c\uacfc \uac19\uc774 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[23],"tags":[],"class_list":["post-659","post","type-post","status-publish","format-standard","hentry","category-development_web"],"_links":{"self":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=659"}],"version-history":[{"count":0,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/659\/revisions"}],"wp:attachment":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}