¼±ÅÃÀÚ 2


À̹ø¿¡´Â ¼±ÅÃÀÚ¿¡ °üÇÑ µÎ¹øÂ° ½Ã°£ÀÔ´Ï´Ù. ¿©±â¿¡¼­´Â ID ¼±ÅÃÀÚ(ID Selector)¿Í ¹®Àå ¼±ÅÃÀÚ(Contextual Selector)¿¡ °üÇØ¼­ ¾Ë¾Æº¸°Ú´Âµ¥¿ä. ÀÌ ¿Ü¿¡µµ Universal selector, Child selector, Adjacent sibling selector°¡ ÀÖÁö¸¸ ÀÚÁÖ »ç¿ëµÇ´Â ºÎºÐÀÌ ¾Æ´Ï¹Ç·Î À̰÷¿¡¼­´Â »ý·«ÇϰڽÀ´Ï´Ù.


ID (ID Selector)

  • ID¼±ÅÃÀÚ´Â CLASS ¼±ÅÃÀÚ¿Í ºñ½ÁÇϸç, ¸¶Ä§Ç¥(.) ´ë½Å ¿ì¹°Á¤ÀÚ(#) ±âÈ£¸¦ »ç¿ëÇÏ¿© selector¸¦ ½ÃÀÛÇÕ´Ï´Ù.
  • Â÷ÀÌÁ¡ ;
    CLASS´Â Àû¿ë¹üÀ§°¡ ³Ð¾î HTMLÀÇ ¸ðµç ű׿¡ »ðÀÔÇÏ¿© Àû¿ëÇÒ ¼ö ÀÖ´Â ¹Ý¸é ID´Â ÇÑ ÆäÀÌÁö¿¡ À¯ÀÏÇÏ°Ô ÇÑ ±ºµ¥¸¸ Àû¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. Áï, CLASS´Â ÇÑ ¹®¼­¿¡¼­ °°Àº À̸§ÀÌ Á¸ÀçÇØµµ µÇÁö¸¸ ID´Â ´Ü ÇϳªÀÇ À̸§¸¸ Á¸ÀçÇØ¾ß ÇÕ´Ï´Ù.
  • ID´Â ÇÑ È¨ÆäÀÌÁö ¾È¿¡ Çϳª¸¸ Á¸ÀçÇØ¾ß ÇϹǷΠID ¼±ÅÃÀÚ ¾Õ¿¡´Â Àû¿ëÇϰíÀÚ ÇÏ´Â ¼±ÅÃÀÚ¸¦ ¹Ýµå½Ã ±âÀçÇØ ÁÖ¾î¾ß ÇÑ´Ù. (¢Ð ¿©·¯ ű׿¡ Àû¿ëÇÒ ¼ö ÀÖ´Â CLASSÀÇ ¿ÏÀüÀÚÀ¯Çü½Ä°ú ´Ù¸£ÁÒ?)

  1. < STYLE >°ú < /STYLE > ³»ºÎ¿¡ ID¸¦ ¼³Á¤ÇÕ´Ï´Ù.
  2. ID¸¦ ¼³Á¤ÇÒ ¶§´Â Ç×»ó #nameÇü½ÄÀ¸·Î ÁöÁ¤À» Çϸç, nameÀº Á¦ÀÛÀÚ°¡ ÀÓÀÇ·Î ¼³Á¤ÇÏ¸é µË´Ï´Ù.
  3. ÀÌÁ¦ < BODY >¿Í < /BODY >¿¡ ID¸¦ ºÒ·¯¿Ã ½ºÅ¸ÀÏ ±â´ÉÀ» »ðÀÔÇÕ´Ï´Ù.
  4. ÅÂ±× ³»ºÎ¿¡ id = "name" Çü½ÄÀ¸·Î ÁöÁ¤ÇÏ¸é µË´Ï´Ù.


¡Ø ¿¹Á¦¸¦ ÅëÇØ¼­ »ìÆìº¼±î¿ä? ^^*

< HTML>
< HEAD>
< TITLE> ID¸¦ ¼±ÅÃÀÚ·Î »ç¿ëÇϱâ< /TITLE>
< STYLE TYPE="text/css">

#one {color:red ; font-family:±¼¸² ; font-size:20pt;}
#two {color:black ; font-family:±¼¸² ; font-size:15pt;}
#three {color:blue ; font-faminly:±¼¸² ; font-size:12pt;}

< /STYLE>

< /HEAD>
< BODY>
< DIV ID="one"> ID»ç¿ë¿¹Á¦ ÀÔ´Ï´Ù.< /DIV>
< P ID="two">ID¸¦ »ç¿ëÇÒ ¶§´Â ID¾Õ¿¡ ¿ì¹°Á¤ÀÚ(#) Ç¥½Ã¸¦ ÇØ¾ß ÇÕ´Ï´Ù.< /P>
< P ID="three">ID´Â class¿Í À¯»çÇÏ°Ô Àû¿ëµË´Ï´Ù.< /P>

< /BODY>
< /HTML>
ID¸¦ ¼±ÅÃÀÚ·Î »ç¿ëÇϱâ
ID»ç¿ë¿¹Á¦ ÀÔ´Ï´Ù.

ID¸¦ »ç¿ëÇÒ ¶§´Â ID¾Õ¿¡ ¿ì¹°Á¤ÀÚ(#) Ç¥½Ã¸¦ ÇØ¾ß ÇÕ´Ï´Ù.

ID´Â class¿Í À¯»çÇÏ°Ô Àû¿ëµË´Ï´Ù.



¼±ÅÃÀÚÀÇ À̸§ ¼³Á¤Çϱâ

  1. CLASS¿Í IDÀÇ ¼±ÅÃÀÚ À̸§Àº »ç¿ëÀÚ°¡ ÀÓÀÇ·Î ¼³Á¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.
  2. CLASSÀÇ °æ¿ì´Â Ű¿öµå, IDÀÇ °æ¿ì´Â #nameÀÔ´Ï´Ù. Áï, name°ú Ű¿öµå¿¡ ÇØ´çµÇ´Â °ÍÀÌ ¼±ÅÃÀÚÀÇ À̸§ÀÔ´Ï´Ù.
  3. ¼±ÅÃÀÚÀÇ À̸§À¸·Î »ç¿ëÇÒ ¼ö ÀÖ´Â ¹®ÀÚ´Â a - z, A - Z, ¼ýÀÚ 0 - 9, ÇÏÀÌÇÂ(-) µîÀÔ´Ï´Ù. ´Ü, ¹®ÀÚÀÇ Ã¹ ÀÚ´Â ÇÏÀÌÇÂ(-)À¸·Î ½ÃÀÛÇÒ ¼ö ¾ø½À´Ï´Ù. (¿¹ : -id01)
  4. HTML¹®¼­´Â ´ë¼Ò¹®ÀÚ¸¦ ±¸º°ÇÏÁö ¾ÊÀ¸¹Ç·Î id01, ID01, Id01À» ¸ðµÎ µ¿ÀÏÇÏ°Ô ÀνÄÇÕ´Ï´Ù.

CLASS¿Í IDÀÇ Â÷ÀÌÁ¡

CLASS¿Í ID´Â ¾ÆÁÖ Èí»çÇÑ ±â´ÉÀ» Çϱ⠶§¹®¿¡ »ç½Ç»ó ±¸º°À» ÇÑ´Ù´Â °ÍÀÌ »ó´çÈ÷ ¾î·Æ½À´Ï´Ù. ÇÏÁö¸¸, ÇÑ °¡Áö Â÷ÀÌÁ¡ÀÌ ÀÖ½À´Ï´Ù. °£´ÜÇÑ ¿¹¸¦ µé¾îº¸°Ú½À´Ï´Ù.

< HTML >
< HEAD >
< TITLE >class¿Í idÀÇ Â÷ÀÌÁ¡< /TITLE >
< STYLE type="text/css" >

#one{color:blue ; font-size:9pt;}
.two{color:red ; font-size:9pt;}
< /STYLE >
< /HEAD>
< BODY>
< P id="one">³ª´Â id¸¦ Àû¿ëÇÑ ¿¹Á¦ÀÔ´Ï´Ù.< /P >
< P class="two">³ª´Â class¸¦ Àû¿ëÇÑ ¿¹Á¦ ÀÔ´Ï´Ù.< /P >
< /BODY >
< /HTML >

class¿Í idÀÇ Â÷ÀÌÁ¡

³ª´Â id¸¦ Àû¿ëÇÑ ¿¹Á¦ÀÔ´Ï´Ù.

³ª´Â class¸¦ Àû¿ëÇÑ ¿¹Á¦ ÀÔ´Ï´Ù.



À§¸¦ Çѹø º¸¼¼¿ä. È¿°ú°¡ ¶È°°ÁÒ? À̰ÍÀ¸·Î º¸¾Æ ID¿Í CLASS´Â ±â´É¸é¿¡ À־ ÀüÇô Â÷À̰¡ ¾ø½À´Ï´Ù.
ÇÏÁö¸¸.. ID´Â ÇöÀçÀÇ ±â´É¿¡ È®Àå±â´ÉÀ» ³»Æ÷Çϰí ÀÖ´Ù°í ÇÕ´Ï´Ù. Áï, CSS¸¦ È®ÀåÇÏ¿© ½ºÅ©¸³ÆÃ ±â´ÉÀ» ³ÖÀº DHTMLÀ» À¥ ¹®¼­¿¡ Àû¿ëÇÏ·Á¸é °íÀ¯ÇÑ À̸§ÀÌ ÇÊ¿äÇÕ´Ï´Ù. ID¼±ÅÃÀÚ´Â ¹®¼­ ¾È¿¡¼­ ÇϳªÀÇ °íÀ¯ÇÑ À̸§À» °¡Áö±â ¶§¹®¿¡ ½ºÅ©¸³Æ® ½ºÅ¸ÀÏÀ» Á¦¾îÇÒ ¶§ »ç¿ëÇÕ´Ï´Ù.

Á¤¸®¸¦ ÇØº¸¸é....
  • ¿©·¯ element¿¡ °°Àº ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÒ ¶§´Â CLASS¸¦ »ç¿ëÇϰí, ½ºÅ©¸³Æ®·Î ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Á¦¾îÇÒ ¶§ ID¸¦ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
  • ID¸¦ Selector·Î »ç¿ëÇÏ´Â °ÍÀº ƯÁ¤ element¿¡ ÁöÁ¤ÇÏ´Â inline style°ú ±âº»ÀûÀ¸·Î °°½À´Ï´Ù.


¹®Àå (Contextual Selector)

±âÁ¸ÀÇ "HTMLÀ» ¼±ÅÃÀÚ·Î »ç¿ëÇϱâ"¿¡¼­´Â ÇϳªÀÇ Å±׸¦ ¼±ÅÃÀÚ·Î »ç¿ëÇßÁö¸¸, ¿©±â¼­ ¹è¿ï ¹®Àå¼±ÅÃÀÚ(Contextual Selectors)´Â µÎ °³ÀÇ Å±׸¦ ¼±ÅÃÀÚ·Î »ç¿ëÇÕ´Ï´Ù. HTML ¹®¼­ÀÇ Å±׿¡ »ç¿ëµÇ´Â ƯÁ¤ ű׿¡¸¸ ¼­½ÄÀ» Àû¿ëÇϰíÀÚ ÇÒ ¶§ »ç¿ëµÇ¸ç ƯÁ¤ ű״ Á¤ÀÇµÈ Å±׾ȿ¡¼­¸¸ È¿·ÂÀ» ¹ßÈÖÇÕ´Ï´Ù.
CSS2¿¡¼­´Â ¹®Àå¼±ÅÃÀÚ(Contextual Selectors)¸¦ ÀÚ½Ä ¼±ÅÃÀÚ(Descendant Selectors)·Î °£ÁÖÇÕ´Ï´Ù.


< STYLE type= "text/css" >

ÅÂ±× Å±×{½ºÅ¸ÀϼӼº:¼Ó¼º°ª}

< /STYLE >



  • ¾Æ·¡ÀÇ ¿¹Á¦¸¦ º¸¸é < STYLE>°ú < /STYLE> ³»ºÎ¿¡ P¿Í STRONG, P¿Í EM, P¿Í I µî µÎ °³°¡ ¼±ÅÃÀÚ·Î »ç¿ëµÇ¾ú½À´Ï´Ù.
  • Á¾ÀüÀÇ »ç¿ë¹ýÀ¸·Î´Â ¾Æ·¡ÀÇ ¿¹Ã³·³, < P>ÅÂ±× ¾È¿¡ ÀÏºÎ ÅØ½ºÆ®¸¦ ´Ù¸¥ ű׸¦ »ç¿ëÇØ¼­ Ç¥ÇöÇϱⰡ ºÒ°¡´É Çß½À´Ï´Ù.
    À̶§ ÅÂ±×¿Í Å±׸¦ ³ª¶õÈ÷ Àû¾îÁÖ¸é, < P>ÅÂ±× ¾È¿¡ ´Ù¸¥ ű׸¦ ³Ö¾î °¢±â ´Ù¸¥ Ç¥ÇöÀ» ÇÒ ¼ö ÀÖ½À´Ï´Ù. ¿©±â¼­ ÁÖÀÇ ÇÒ »çÇ×Àº ÅÂ±×¿Í Å±׻çÀÌ´Â ¹Ýµå½Ã ¶ç¾î¾²±â¸¦ ÇØ¾ß ÇÕ´Ï´Ù.

¡Ø ¿¹Á¦¸¦ º¼±î¿ä? ^^*

< HTML>
< HEAD>
< TITLE> ¹®Àå ¼±ÅÃÀÚ< /TITLE>
< STYLE TYPE="text/css">

< style type="text/css">
P STRONG { color : red ; font-style : italic }
P EM { color : blue ; font-weight : bold }
P I { letter-spacing : 1em }
¢Ð ÅÂ±×¿Í ÅÂ±× »çÀÌ´Â
¹Ýµå½Ã ¶ç¾î¾²±â¸¦ Çϼ¼¿ä!!

< /STYLE>
< /HEAD>
< BODY>
< P>html ¹®¼­ÀÇ Å±׿¡ »ç¿ëµÇ´Â < STRONG>ƯÁ¤ ¼Ó¼º¿¡¸¸ ¼­½ÄÀ» Àû¿ëÇϰíÀÚ ÇÒ ¶§
»ç¿ëµÈ´Ù. < /STRONG>< /P>
< P>ÀÔ·Â ¹æ¹ýÀº ÅÂ±×¿Í ¼Ó¼ºÀ» < EM>ÇÑ Ä­ °ø¹éÀ» µÎ°í ±âÀçÇÏ¸é µÈ´Ù. < /EM>< /P>
< P>ƯÁ¤ ¼Ó¼ºÀº < I>Á¤ÀÇµÈ ÅÂ±× ¾È¿¡¼­¸¸ È¿·ÂÀ» ¹ßÈÖÇÑ´Ù. < /I>< /P>
< /BODY>
< /HTML>
¹®Àå ¼±ÅÃÀÚ

html ¹®¼­ÀÇ Å±׿¡ »ç¿ëµÇ´Â ƯÁ¤ ¼Ó¼º¿¡¸¸ ¼­½ÄÀ» Àû¿ëÇϰíÀÚ ÇÒ ¶§ »ç¿ëµÈ´Ù.

ÀÔ·Â ¹æ¹ýÀº ÅÂ±×¿Í ÅÂ±× »çÀÌ¿¡ ÇÑ Ä­ °ø¹éÀ» µÎ°í ±âÀçÇÏ¸é µÈ´Ù.

ƯÁ¤ ¼Ó¼ºÀº Á¤ÀÇµÈ ÅÂ±× ¾È¿¡¼­¸¸ È¿·ÂÀ» ¹ßÈÖÇÑ´Ù.