»ç¿ëÀÚ°¡ ¸¶¿ì½º¸¦ ¿¬°á¿¡ ¿Ã·Á³ùÀ» ¶§ Àû¿ëµÉ a ¿¤·¹¸àÆ®ÀÇ ½ºÅ¸ÀÏÀ» ¼³Á¤ÇÑ´Ù.

Àμö
cssSelector : (½ºÅ¸ÀÏ ¼±ÅÃÀÚ)
¼Ó¼ºÀ» °¡Áú¼ö ÀÖ´Â ¿¤·¹¸àÆ®()³ª Ŭ¶ó½º(class) À̸§ ȤÀº ÀνÄÀÚ(id)ÀÌ´Ù.

: (¼Ó¼º ¹®ÀÚ¿­)
½ºÅ¸ÀÏ ¼Ó¼ºÀº a ¿¤·¹¸àÆ®ÀÇ ¿¬°áÀÌ µÇ°Å³ª È°¼ºÈ­ µÇ¾úÀ» ¶§ÀÇ ½ºÅ¸ÀÏÀ» ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

Ư±â

¿¬°á À§¿¡ ¸¶¿ì½º¸¦ ¿Ã¸®°í Ŭ¸¯ÇÏÁö ¾Ò¾ÒÀ» ¶§ ¿¬°á¿¡ Àû¿ëµÇ´Â ½ºÅ¸ÀÏÀÌ´Ù. Ŭ¸¯ÇÏ¿´À» ¶§´Â :active °¡»ó Ŭ¶ó½º°¡ Àû¿ëµÈ´Ù.

ÀϹÝÀûÀ¸·Î :hover °¡»ó Ŭ¶ó½º(pseudo-class)´Â ¿¬°á¿¡ ÀÛ¿ëÇÏ´Â ´Ù¸¥ °¡»ó Ŭ¶ó½º :active, :link¿Í :visited¿Í ÇÔ²² »ç¿ëÇÑ´Ù.

ÀÌ :hover °¡»ó Ŭ¶ó½º(pseudo-class)ÀÇ µðÆúÆ®°ªÀº ºê¶ó¿ìÀú¿¡ µû¶ó ´Ù¸£´Ù.

Àû¿ë
°³Ã¼scriptCSS IE ¹öÀü
ÂüÁ¶
:active :hover :link :visited

ÀÌ °¡»ó Ŭ¶ó½º´Â CSS2(Cascading Style Sheets, Level 2)¿¡¼­ Á¤ÀǵǾú´Ù.


¸¶¿ì½º¿Ã¸² ¿¬°á °¡»ó Ŭ¶ó½º

¿¬°á À§¿¡ ¸¶¿ì½º¸¦ ¿Ã·Áº¸¶ó. °¡»ó Ŭ¶ó½º :hover·Î font-weight¿Í color ¾ÖÆ®¸®ºäÆ®¸¦ ¼³Á¤ÇÑ´Ù.

<STYLE>A:hover { font-weight:bold; color:red;background-color:aqua}</STYLE>
<A href="../style/color.html" onclick="return false">¸¶¿ì½º¿Ã¸² ¿¬°á °¡»ó Ŭ¶ó½º</A>

´ÙÀ½ µÎ°¡Áö´Â °°ÀÌ Àû¿ëµÈ´Ù

<STYLE>:hover { font-weight:bold; color:red;background-color:aqua}</STYLE>
<STYLE>A:hover { font-weight:bold; color:red;background-color:aqua}</STYLE>