| 3. ½ºÅ¸ÀÏ Àû¿ë
ÀÌ ´Ü°è¿¡¼´Â µÎ°¡Áö ÀÛ¾÷À» ÇÑ´Ù. ¸ÕÀú ¸Þ´ºÆÇÀÇ ±ÛÀÚÅ©±â¸¦ 10ÆùÆ®·Î ÁÙÀ̰í, ¸µÅ© ÅØ½ºÆ®¿¡ ³ªÅ¸³ª´Â ¹ØÁÙÀ» ¾ø¾Ø´Ù. µÎ¹øÂ°·Î´Â ¸Þ´ºÆÇÀÇ ¹öư À̹ÌÁöÀ§¿¡ ¸¶¿ì½º Ä¿¼°¡ À§Ä¡ÇßÀ» ¶§ ¸¶Ä¡ ¹öưÀÌ ´¸®¾îÁø °Í°ú °°Àº È¿°ú¸¦ ³½´Ù.
¿©±â¼ [New]¸¦ ¼±ÅÃÇÏ¿© »õ·Î¿î ½ºÅ¸ÀÏÀ» Á¤ÀÇÇϴµ¥ ÀÌ ¿¹Á¦¿¡¼´Â ¸µÅ© ÅØ½ºÆ®¿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇϹǷΠ»õ·Î¿î »ç¿ëÀÚÁ¤ÀÇ ½ºÅ¸ÀÏÀ» ÀÌ¿ëÇÏÁö ¾Ê°í ³»ÀåµÇ¾î ÀÖ´Â ½ºÅ¸ÀÏÀ» ÆíÁýÇÏ¿© »ç¿ëÇϵµ·Ï ÇÑ´Ù. New Style ´ëÈ»óÀÚ¿¡¼ Use CSS Selector¸¦ ¼±ÅÃÇÏ¸é ¾Æ·¡¿Í °°ÀÌ ¸µÅ© ÅØ½ºÆ®¿¡ ´ëÇØ ¼öÁ¤ÇÒ ¼ö ÀÖ´Â ¸ñ·ÏÀÌ ¸®½ºÆ®¹Ú½º¿¡ Ç¥½ÃµÇ´Âµ¥ ¿©±â¼ [a:link]¸¦ ¼±ÅÃÇÑ´Ù. ¿©±â¼ [a:link]´Â ¸µÅ©°¡ °É¸° ÅØ½ºÆ®¿¡ ´ëÇÑ ¼Ó¼ºÀ» ÁöÁ¤Çϴ ű×À̰í [a:visited]´Â ¸µÅ©¸¦ ´·¯ ¿¬°áµÈ À¥ÆäÀÌÁö¿¡ ÇÑÂ÷·Ê ÀÌ»ó ¹æ¹®ÇßÀ» ¶§ Ç¥½ÃµÇ´Â ¼Ó¼ºÀ», ±×¸®°í [a:active]´Â »ç¿ëÀÚ°¡ ¸µÅ©ÅؽºÆ®¸¦ Ŭ¸¯ÇÏ´Â ¼ø°£¿¡ Ç¥½ÃµÇ´Â ÅØ½ºÆ®¿¡ ´ëÇÑ ¼Ó¼ºÀ» ÁöÁ¤ÇØ ÁÙ ¼ö ÀÖ´Ù. [OK] ¹öưÀ» Ŭ¸¯Çϸé [a:link]¿¡ ´ëÇÑ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÒ ¼ö ÀÖ´Â ´ëÈ»óÀÚ°¡ ¾Æ·¡¿Í °°ÀÌ ¶á´Ù.
|
|
½ºÅ¸ÀÏ ´ëÈ»óÀÚ¿¡¼´Â ÆùÆ®ÀÇ Á¾·ù¿Í Å©±â, »ö±òµî ±âº»ÀûÀÎ °Íµé¿¡¼ºÎÅÍ ±ÛÀÚ°£°Ýµî ÀÏ¹Ý ¿öµåÇÁ·Î¼¼¼¿¡¼ Ç¥ÇöÇÒ ¼ö ÀÖ´Â ¾ç½Ä±îÁö ¼¼¹ÐÇÏ°Ô Á¶ÀýÇÒ ¼ö ÀÖ´Ù. ¿©±â¼´Â ±ÛÀÚÅ©±â¸¦ 10À¸·Î ÇÏ°í »ö±òÀº Ǫ¸¥»öÀ¸·Î ÁöÁ¤ÇÑ´Ù. ±×¸®°í Decoration ¿¡¼ none¿¡ üũÇϵµ·Ï ÇÑ´Ù. Decoration ¿¡¼ none¿¡ üũ¸¦ ÇÏ°ÔµÇ¸é ½ºÅ¸ÀÏÀÌ Àû¿ëµÇ´Â ÇØ´ç ¸µÅ©ÀÇ ¹ØÁÙÀÌ ³ªÅ¸³ªÁö ¾Ê´Â´Ù. ½ºÅ¸ÀÏ¿¡ ´ëÇÑ Á»´õ ÀÚ¼¼ÇÑ ¼³¸íÀº ½ºÅ¸ÀϺκп¡¼ ¾Ë¾Æº¸µµ·Ï ÇÑ´Ù. ÀÌÁ¦ ´Ù½Ã Edit Style Sheet ´ëÈ»óÀÚ·Î µ¹¾Æ°¡ À̹ø¿£ [a:visited]¸¦ ¼±ÅÃÇÏ°í¼ ¾Õ¿¡¼¿Í µ¿ÀÏÇÏ°Ô ½ºÅ¸ÀÏÀ» Á¤ÇØÁØ´Ù. ´Ù¸¸ »ö±òÀº »¡°£»öÀ¸·Î ÁöÁ¤À» ÇÑ´Ù.
Áö±Ý±îÁö ÀÛ¾÷ÇÑ ³»¿ëÀ» ÀúÀåÇÏ°í¼ ºê¶ó¿ìÀú·Î °á°ú¸¦ È®ÀÎÇØº¸ÀÚ. ¿ÞÂʰú °°ÀÌ º¸ÀÏ °ÍÀÌ´Ù. ÀÌ ¸Þ´ºÆÇÀº Àü´Ü°è¿¡¼ ¸¸µé¾ú´ø ¸Þ´ºÆÇº¸´Ù ÈξÀ ±ò²ûÇϰí Á¤µ·µÈ ´À³¦À» ÁØ´Ù. ÀÌÁ¦ µÎ¹øÂ°·Î´Â »ç¿ëÀÚ°¡ °¢ ¸Þ´ºÇ׸ñÀ§¿¡ ¸¶¿ì½º Ä¿¼¸¦ À§Ä¡½ÃÄ×À» ¶§ °¢ ¸Þ´ºÇ׸ñ ÅØ½ºÆ®¿·ÀÇ ¹öưÀ̹ÌÁö°¡ ´¸®¾îÁø °Í°ú °°Àº À̹ÌÁö·Î ´ëüµÇ´Â À̹ÌÁö ·Ñ¿À¹ö ÀÛ¾÷À» Çϵµ·Ï ÇÑ´Ù.
|
|
|
|
¸Þ´ºÆÇÀÇ Ã¹¹øÂ° ¹öưÀ» ¼±ÅÃÇÑ »óÅ¿¡¼ EventsâÀÇ [+]¹öưÀ» ´©¸£¸é ¿ÞÂʱ׸²°ú °°ÀÌ ÇöÀçÀÇ »óȲ¿¡¼ ¼±Åð¡´ÉÇÑ ÀÚ¹Ù½ºÅ©¸³Æ® À̺¥Æ®ÀÌ ¸ñ·ÏÀÌ Ç¥½ÃµÈ´Ù. ¿©±â¼ (onMouseOver)¸¦ ¼±ÅÃÇÑ´Ù. ÀÌ¾î ¿À¸¥ÂÊÀÇ Actionsâ¿¡¼ [+] ¹öưÀ» ´©¸£¸é ¿ª½Ã ÇöÀçÀÇ »óȲ¿¡¼ Àû¿ë°¡´ÉÇÑ À̺¥Æ® ´ëÀÀ ÇÔ¼öÀÇ ¸ñ·ÏÀÌ Ãâ·ÂµÇ´Âµ¥ ¿©±â¼ Swap Image¸¦ ¼±ÅÃÇÑ´Ù. À̰ÍÀÇ Àǹ̴ ¸¶¿ì½º Æ÷ÀÎÅͰ¡ ÇØ´ç ¹öưÀ§¿¡ ³õÀÌ°Ô µÇ´Â À̺¥Æ®°¡ ¹ß»ýÇÏ¸é ±×¿¡ ´ëÀÀÇÏ¿© ÇöÀçÀÇ À̹ÌÁö¸¦ ´Ù¸¥ À̹ÌÁö·Î ¹Ù²Ùµµ·Ï ¸í·ÉÇÏ´Â °ÍÀÌ´Ù. Swap Image¸¦ ¼±ÅÃÇÏ¸é ¿À´ÃÂʰú °°ÀÌ ÇϳªÀÇ Ã¢ÀÌ ¶ß´Âµ¥ ¿©±â¼ ¹Ù²Ü À̹ÌÁö µ¥ÀÌÅ͸¦ ¼±ÅÃÇÏ¸é µÈ´Ù. ÀÂÊ ¸®½ºÆ®¹Ú½º¿¡´Â ÇöÀç À¥ÆäÀÌÁö¿¡ Á¸ÀçÇÏ´Â À̹ÌÁöÀÇ À̸§µéÀÌ Ãâ·ÂµÇ¾î ÀÖ´Ù. ¾Õ¿¡¼ ÁذÍó·³ °¢°¢ button1, button2, button3 ÀÇ À̸§À» °®´Â ¹öư À̹ÌÁöµéÀÌ ¸Þ´ºÆÇ ·¹À̾¿¡ Á¸ÀçÇϰí ÀÖÀ½À» ¾Ë ¼ö ÀÖ´Ù. [Set Source to]¿¡´Â ¹Ù·Î ÇØ´ç À̹ÌÁö¹öư(¿©±â¼´Â button1 À̸§À» °®´Â ¹öư)À§·Î ¸¶¿ì½º Æ÷ÀÎÅͰ¡ À§Ä¡ÇÒ ¶§ µû·Î º¸¿©ÁÙ ´ëü À̹ÌÁö¸¦ Àû¾îÁÖ¸é µÈ´Ù. ÀÌ¿Í °°Àº ÀÛ¾÷À» ³ª¸ÓÁö µÎ°³ÀÇ ¹öư¿¡ ´ëÇØ¼µµ µ¿ÀÏÇÏ°Ô ¼öÇàÇÑ´Ù. |
|
ÀÌÁ¦ À¥ÆäÀÌÁö »ó¿¡¼ ¸¶¿ì½º Æ÷ÀÎÅͰ¡ ¹öưÀ§¿¡ ³õÀÌ°Ô µÇ¸é ÇØ´ç À̹ÌÁö´Â [Set Source to]¿¡¼ Á¤ÇØÁØ À̹ÌÁö·Î ¹Ù²î°Ô µÈ´Ù. ±×·¯³ª ¸¶¿ì½º Æ÷ÀÎÅͰ¡ ÇØ´ç ¹öư¹ÛÀ¸·Î ¹þ¾î³ª°Ô µÇ¾îµµ ¹Ù²î¾îÁø À̹ÌÁö´Â ±×´ë·Î ³ªÅ¸³¯ °ÍÀÌ´Ù. ÀÌ¿Í °°Àº °ÍÀ» ¸·±âÀ§Çؼ À̹ø¿£ ¸¶¿ì½º Æ÷ÀÎÅͰ¡ ÇØ´ç ¹öư¹ÛÀ¸·Î ¹þ¾î³µÀ» ¶§ ´Ù½Ã ¿ø·¡ÀÇ À̹ÌÁö·Î ¹Ù²Ù¾îÁÖ´Â ÀÛ¾÷À» ÇØ¾ß Çϴµ¥ ¾Õ¿¡¼¿Í µ¿ÀÏÇÑ °úÁ¤À» °ÅÄ¡¸é µÈ´Ù. ´ë½Å À̹ø¿£ Eventsâ¿¡¼ onMouseOutÀ» Actionsâ¿¡¼± Swap Image Restore¸¦ ¼±ÅÃÇÑ´Ù. |
|
ÀÌÁ¦ Áö±Ý±îÁö ÀÛ¾÷ÇÑ ³»¿ëÀ» ÀúÀåÇÏ°í¼ ºê¶ó¿ìÀú·Î À¥ÆäÀÌÁö¸¦ ºÒ·¯µé¿© °á°ú¸¦ È®ÀÎÇØº¸ÀÚ. ¿ÞÂʰú °°ÀÌ ¸¶¿ì½º Æ÷ÀÎÅͰ¡ µÎ¹øÂ° ¸Þ´ºÀ§¿¡ ³õÀÌ°Ô µÇ¸é ¹öưÀÌ ´¸®¾îÁø °Í°ú °°Àº À̹ÌÁö·Î ¹Ù²î°Ô µÇ´Â °ÍÀ» È®ÀÎÇÒ ¼ö ÀÖ´Ù. ´ÙÀ½´Ü°è¿¡¼´Â ¿Ï¼ºµÈ ¸Þ´ºÆÇÀ» À¥ÆäÀÌÁö°¡ ÀÐÇôÁö°í ³ª¼ À§¿¡¼ ¾Æ·¡·Î ¿òÁ÷À̵µ·Ï timelineÀ» ÀÌ¿ëÇØ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ³»º¸µµ·Ï ÇÑ´Ù. |