ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

Á¢±Ù¼ºÀ» ÇØÄ¡Áö ¾Ê´Â ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ »ç¿ë
13³â Àü
ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ´ëÇÑ À߸øµÈ »ý°¢
ÀÚ¹Ù½ºÅ©¸³Æ® ¾øÀÌ´Â °³¹ßÀ» ÇÒ ¼ö ¾ø´Ù?
¸¹Àº °³¹ßÀÚµéÀÌ ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ¾øÀÌ´Â °³¹ßÀ» ÇÒ ¼ö ¾ø´Ù°í »ý°¢ÇÑ´Ù. ±×¸¸Å­ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÏ»óÀûÀ¸·Î ¸¹ÀÌ »ç¿ëÇÏ°í, ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ´ëÇؼ­ À߸ø ¿ÀÇØÇÏ°í ÀÖ´Â ºÎºÐÀÌ ¸¹´Ù´Â °ÍÀÌ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®´Â Ŭ¶óÀ̾ðÆ® ȯ°æ¿¡¼­ ÀÛµ¿Çϱ⠶§¹®¿¡ ÇٽɷÎÁ÷¿¡ »ç¿ëÇؼ­´Â ¾ÈµÈ´Ù. ÇÙ½ÉÀûÀÎ ·ÎÁ÷Àº ¼­¹ö»çÀÌµå ¾ð¾î·Î 󸮸¦ ÇÏ°í ÀÚ¹Ù½ºÅ©¸³Æ®´Â ±× ¿·¿¡¼­ UI±¸¼ºÀ» À§Çؼ­ µµ¿ÍÁֱ⸸ ÇØ¾ß ÇÑ´Ù. ¹Ù²ã ¸»Çϸé ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ¾ø¾îµµ ÇÙ½É ·ÎÁ÷Àº ÀÛµ¿À» ÇØ¾ß ÇÑ´Ù. ¸ÕÀú ÀÚ¹Ù½ºÅ©¸³Æ®¾øÀÌ HTML°ú ¼­¹ö»çÀÌµå ¾ð¾î¸¸À¸·Î ¿Ïº®ÇÏ°Ô ÀÛµ¿ ÇÒ ¼ö ÀÖ°Ô °³¹ßÀ» ³¡³½ ÈÄ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇؼ­ ÁÁÀº UI³ª À¯È¿¼º °Ë»ç µîÀ» ÇÏ´Â ºÎºÐÀ» Ãß°¡ ÇÏ´Â ¼ø¼­·Î ¸¸µé¾î¾ß ÇÑ´Ù. ¸¸¾à À̸¦ ¾î±â°í ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ±â´ÉÀÇ ÀϺηΠ»ç¿ëÇϸé Á¢±Ù¼ºÀÌ ¶³¾îÁö´Â °Í »Ó¸¸ ¾Æ´Ï¶ó º¸¾Èµµ ¶³¾îÁö°í µ¥ÀÌÅÍÀÇ ¹«°á¼ºµµ º¸ÀåµÇÁö ¾Ê´Â´Ù.

ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ÀÛµ¿ÇÏÁö ¾Ê´Â ȯ°æµµ °í·Á¸¦ ÇØ Áà¾ß Çϴ°¡?
ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ÀÛµ¿ÇÏÁö ¾Ê´Â ȯ°æÀÌ ÀϹÝÀûÀÎ »óȲÀº ¾Æ´ÏÁö¸¸ ½ºÅ©¸³Æ®¸¦ »ç¿ëÇÒ ¼ö ¾ø´Â ȯ°æ¿¡ ´ëÇÑ °í·Á´Â ¹Ýµå½Ã ÇÊ¿äÇÏ´Ù. ½ÇÁ¦·Î ºê¶ó¿ìÁ®¿¡ µû¶ó¼­´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¹öÁ¯ÀÌ ´Ù¸¦ ¼ö ÀÖ°í °³¹ß ȯ°æ¿¡¼­´Â Àß ÀÛµ¿ÇÏ´ø ±â´ÉÀÌ ¾î¶² »ç¿ëÀÚ È¯°æ¿¡¼­´Â ÀÛµ¿ÇÏÁö ¾ÊÀ» ¼öµµ ÀÖ´Ù. ±×¸®°í »ç¿ëÀÚ Áß¿¡¼­µµ ¿©·¯ ÀÌÀ¯·Î ½º½º·Î ÀÚ¹Ù½ºÅ©¸³Æ® »ç¿ëÀ» ÁßÁöÇÏ°í »ç¿ëÇÏ´Â °æ¿ìµµ ÀÖ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ç¿ëÇÏÁö ¾Ê¾Æµµ ÇÙ½É ±â´ÉÀ» ±¸ÇöÇÒ ¼ö ÀÖÀ½¿¡µµ ºÒ±¸ÇÏ°í ºÒÇÊ¿äÇÑ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ç¿ëÇÏ¿© Á¢±Ù¼ºÀ» ¶³¾î¶ß¸®´Â °ÍÀÌ ¿Ã¹Ù¸¥ ÆäÀÌÁö Á¦ÀÛ ¹æ¹ýÀº ¾Æ´Ï´Ù.

¼­¹ö ºÎÇϸ¦ ÁÙÀ̱â À§Çؼ­ ÀÚ¹Ù½ºÅ©¸³Æ®·Î¸¸ À¯È¿¼º °Ë»ç¸¦ ÇÑ´Ù?
ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇؼ­ ¼­¹öÀÇ ºÎÇϸ¦ ÁÙÀÏ ¼ö ÀÖ´Ù´Â °ÍÀº ¸¹Àº »ç¶÷µéÀÌ ¾Ë°í ÀÖÀ» °ÍÀÌ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®·Î ¼±Ã³¸®¸¦ ÇàÇÔÀ¸·Î¼­ ³×Æ®¿÷À̳ª ¼­¹öÀÇ Ã³¸®¸¦ °¨¼Ò½ÃŲ´Ù´Â °ÍÀε¥ ÀÌ°ÍÀ» À߸ø ÀÌÇØÇÏ¿© ÀÚ¹Ù½ºÅ©¸³Æ®¸¸À¸·Î À¯È¿¼ºÀ» üũÇÏ´Â °ÍÀÌ ÁÁ´Ù°í »ý°¢ÇÏ´Â »ç¶÷µéÀÌ ÀÖ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®·Î ¼±Ã³¸®¸¦ ÇÑ°á°ú¹°À» ±×´ë·Î ¹ÏÀ¸¸é ¾ÈµÈ´Ù. »ç¿ëÀÚÃøÀ¸·Î ºÎÅÍ ³Ñ¿À¿Â ¸ðµç °ªÀº ±× °ªÀÇ À¯È¿¼ºÀ» ¿ÏÀüÈ÷ º¸ÀåÇÒ ¼ö ¾ø±â ¶§¹®¿¡ ¼­¹öÃø¿¡¼­µµ À¯È¿¼º üũ¸¦ ÇØ Áà¾ß¸¸ ÇÑ´Ù. ÀÌ°ÍÀº ¼­¹öÀÇ ºÎÇϸ¦ ³ôÀÌ´Â °Í ÀÌÀü¿¡ ÀÚ·áÀÇ ¹«°á¼ºÀ» º¸ÀåÇÏ´Â Áß¿äÇÑ °úÁ¤ÀÌ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ °ÅÄ¡Áö ¾Ê°í ¼­¹ö¿¡ ÀÓÀÇ·Î º¯Á¶µÈ °ªÀ» º¸³»´Â ÀÏÀº ¾ÆÁÖ ½¬¿î ÀÏÀÌ´Ù.

ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ç¿ëÇÏÁö ¾ÊÀ¸¸é UI°¡ ºÒÆíÇØ Áø´Ù?
ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇؼ­ RIA³ª ÁÁÀº UI¸¦ ¸¸µé ¼ö ÀÖ´Â °ÍÀº »ç½ÇÀÌÁö¸¸ À¥È¯°æÀ» ÀÌÇØÇÏ°í ÀϹÝÀûÀÎ À¥ ÀÎÅÍÆäÀ̽º¸¦ ÀÌ¿ëÇؼ­ ¸¸µå´Â °ÍÀÌ ´õ ÁÁÀº UI¸¦ Á¦°øÇÒ ¼ö ÀÖ´Ù. »ç¿ëÀÚ Ä£È­ÀûÀÎ UI¿¡ ´ëÇÑ °í¹ÎÀ» ÇؾßÁö ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ç¿ëÇß´Ù°í ÁÁÀº UI°¡ ³ª¿À´Â °ÍÀº ¾Æ´Ï´Ù. ½ÇÁ¦ÀûÀ¸·Î °¡Àå »ç¿ëÀÚ°¡ ÀÌÇØÇϱ⠽¬¿î UI´Â »ç¿ëÀÚ OS³ª ºê¶ó¿ìÀú¿¡¼­ ±âº»ÀûÀ¸·Î Á¦°øÇÏ´Â ÄÁÆ®·Ñ ÀÎÅÍÆäÀ̽º¸¦ ±×´ë·Î »ç¿ëÇÏ´Â °ÍÀÌ°í ÀÌ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¾øÀ̵µ ÃæºÐÈ÷ °¡´ÉÇÏ´Ù.

ÀÚ¹Ù½ºÅ©¸³Æ®´Â »ç¿ëÀÚ È¯°æ¿¡ ³»·Áº¸³»Áö°í »ç¿ëÀÚÀÇ ºê¶ó¿ìÁ®¿¡¼­ ½ÇÇàÀÌ µÇ±â ¶§¹®¿¡ ÀÌ¿¡ ÀÇÁ¸Çؼ­ ÇÁ·Î±×·¥À» ¸¸µé°Ô µÇ¸é º¸¾È, Á¢±Ù¼º¿¡ ¹®Á¦°¡ »ý±â±â ½±´Ù. ÀÌ·¯ÇÑ ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ Æ¯Â¡À» Á¤È®È÷ ÀÌÇØÇÏÁö ¸øÇÑ À߸øµÈ °³¹ß ¹æ¹ýÀ̳ª »ó½Äµé ¶§¹®¿¡ ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ¿À¿ëµÇ°í ÀÖ´Â °æ¿ì°¡ ¸¹´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®´Â ¾îµð±îÁö³ª º¸Á¶ÀûÀÎ ¼ö´ÜÀ̶ó´Â °ÍÀ» ÀÌÇØÇÏ°í ÇÙ½ÉÀûÀÎ ±â´ÉÀ» ÇØÄ¡Áö ¾Ê´Â Çѵµ¿¡¼­ »ç¿ëÇÏ´Â °ÍÀÌ ¹«¾ùº¸´Ù Áß¿äÇÏ´Ù.

ÀÚ¹Ù½ºÅ©¸³Æ® ¼±¾ð
<script language="Javascript">
//code
</script>ÀÚ¹Ù½ºÅ©¸³Æ®´Â <script> ¿¤¸®¸ÕÆ®·Î ¼±¾ðÀ» ÇÑ´Ù. ¸ðµç <script>¿¤¸®¸ÕÆ®´Â typeÀ» ¸í½ÃÇØ ÁÖ¾î¾ß ÇÏ°í ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ typeÀº "text/javascript" ÀÌ´Ù. ¸¹Àº °æ¿ì language ¸¸À» ¼±¾ðÇؼ­ ÀÚ¹Ù½ºÅ©¸³Æ®¹öÁ¯À» ¸í½ÃÇϴµ¥ ¹Ýµå½Ã typeµµ °°ÀÌ ¸í½Ã¸¦ ÇØ ÁÖ¾î¾ß ÇÑ´Ù.

<script type="text/javascript">
//code
</script><a>ÀÇ href ¼Ó¼º°ú ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ »ç¿ë
href´Â Hypertext REFerenceÀÇ ¾àÀÚÀÌ´Ù. ´Ù½Ã ¸»Çؼ­ hypertextÀÇ À§Ä¡¸¦ ³ªÅ¸³»´Â uri¸¦ ±× °ªÀ¸·Î °®´Â´Ù. ÇÏÁö¸¸ ¸¹Àº °æ¿ì ÀÌ href¾È¿¡ "javascript:myFunction()"°ú °°ÀÌ À߸øµÈ ±¸¹®À» ÀÌ¿ëÇÏ´Â °ÍÀ» º¼ ¼ö ÀÖ´Ù. ÀÌ¿Í °°ÀÌ href¾È¿¡ À߸øµÈ °ªÀÌ µé¾î°¡°Ô µÉ °æ¿ì, ºÏ¸¶Å©³ª »õâ, »õÅÇÀ¸·Î ¿­±â µîÀÇ href °ü·ÃµÈ ºê¶ó¿ìÀúÀÇ ±â´ÉµéÀÌ Á¤»óÀûÀ¸·Î ÀÛµ¿ÇÏÁö ¾Ê°Ô µÈ´Ù. µû¶ó¼­ href¾È¿¡´Â Ç×»ó uri°¡ µé¾î°¡µµ·Ï ÇÏ°í ÀÚ¹Ù½ºÅ©¸³Æ® Àû¿ëÀº onclick°ú °°Àº À̺¥Æ® ¼Ó¼ºÀ» ÀÌ¿ëÇØ¾ß ÇÑ´Ù.

ÀÇ¹Ì ¾ø´Â href °ªÀ» »ç¿ëÇÑ °æ¿ì
»ç¿ëÀÚÀÇ ¸µÅ© Ŭ¸¯ÀÌ ¸µÅ©¿Í °ü·ÃÀÌ ÀÖ°í À̸¦ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇؼ­ 󸮸¦ ÇÏ¾ß ÇÏ´Â °æ¿ì°¡ ÀÖ´Ù¸é ¿ì¼±Àº ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »©°íµµ ÆäÀÌÁöÀÇ À̵¿À» ÇÒ ¼ö ÀÖ°Ô href¿¡ ÀûÀýÇÑ °ªÀ» ³Ö¾î ÁÖ¾î¾ß ÇÑ´Ù. ÀÌ¿Í °°Àº °æ¿ì·Î ÅǸ޴º¸¦ µé ¼ö ÀÖ´Ù. ÅǸ޴ºÀÇ °æ¿ì ÅÇÀ» ´©¸£¸é ÇØ´ç ÅÇ°ú °ü·ÃÀÖ´Â ÄÁÅÙÃ÷¸¦ º¸¿©ÁÖ´Â ½ÄÀ¸·Î ÀÛµ¿ÇÏ°Ô µÈ´Ù. javasript°¡ ¾ø´Ù¸é ÅÇÀ» Ŭ¸¯ÇßÀ» ¶§ ÇØ´ç ÄÁÅÙÃ÷·Î À̵¿À» ÇÏ´Â ½ÄÀ¸·Î ±¸Çö µÇ¸é µÈ´Ù. href ¾ÈÀÇ °ªÀ¸·Î ÆäÀÌÁö ¾È¿¡¼­ÀÇ ÇØ´ç ÄÁÅÙÃ÷ ¾ÞÄ¿ ÁÖ¼Ò¸¦ ³Ö´Â °ÍÀ¸·Î °£´ÜÈ÷ ±¸Çö µÈ´Ù.

<a href="#notice-list"><img src="notice-tab.gif" alt="Notice" /></a>
±×¸®°í ÀÌ ¸¶Å©¾÷À» ±âº»À¸·Î ÇÏ¿© À̺¥Æ® ¼Ó¼ºÀ¸·Î ¿øÇÏ´Â ±â´ÉÀ» ³Ö¾îÁÖ¸é µÈ´Ù.

<a href="#notice-list" onclick="showNoticeTab(); return false;"><img src="notice-tab.gif" alt="Notice" /></a>
onclickÀ¸·Î ÅÇÀ» º¸¿©ÁØ ÈÄ false¸¦ ¸®ÅÏÇÏ¿© ÇØ´ç ¾ÞÄ¿·Î À̵¿ÇÏÁö ¾Êµµ·Ï ó¸® ÇÑ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ÀÛµ¿À» ÇÒ ¶§¿¡´Â Ŭ¸¯Çϸé Á¤»óÀûÀ¸·Î ÅÇÀ¸·Î ÀÛµ¿À» ÇÒ °ÍÀÌ°í, ±×·¸Áö ¾ÊÀ» °æ¿ì¿¡´Â ÇØ´ç ÄÁÅÙÃ÷·Î À̵¿À» ÇÏ¿© ³ôÀº Á¢±Ù¼ºÀ» À¯ÁöÇÒ ¼ö ÀÖ´Ù.

¸¸¾à ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ¸µÅ©¿Í °ü·ÃÀÌ ¾ø´Â °æ¿ì¿¡´Â <a>ű׸¦ »ç¿ëÇؼ­ ½ºÅ©¸³Æ®¸¦ Àû¿ëÇÏ¸é ¾ÈµÈ´Ù. º¸Åë ƯÁ¤ È¿°ú¸¦ ÁÖ´Â °ÍÀÌ ÀÌ·¯ÇÑ °Í¿¡ ÇØ´ÙÇÏ°Ô µÇ´Âµ¥ ÀÌ °æ¿ì ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ÀÛµ¿À» ÇÏÁö ¾Ê¾Æµµ ÄÁÅÙÃ÷ ÀÌÇØ¿¡ Å©°Ô ¹®Á¦°¡ µÇÁö ¾Ê´Â °æ¿ìÀÌ´Ù.

<img src="button.gif" style="cursor: pointer;" onclick="myAction()" />
È¿°ú¸¦ À§ÇÑ ÀÚ¹Ù½ºÅ©¸³Æ®´Â ´Ü¼øÈ÷ onclickÀ» ÀÌ¿ëÇؼ­ Àû¿ëÀ» ÇÏ°í <a>¸¦ »ç¿ëÇÏÁö ¾Ê´Â´Ù. ±×¸®°í »ç¿ëÀÚ°¡ ¸¶¿ì½º Æ÷ÀÎÅ͸¦ ¿Ã·ÈÀ» ¶§ ¼Õ¸ð¾çÀ¸·Î ³ª¿À´Â °ÍÀº ½ºÅ¸ÀϷΠó¸®ÇÏ¸é µÈ´Ù.

Æ˾÷âÀ» ¿­ ¶§(window.open)
<img src="openWindow.gif" onclick="window.open('popup.html', '', 'widht=300,height=200')"><a href="#"><img src="openWindow.gif" onclick="window.open('popup.html', '', 'widht=300,height=200')"></a>
href¿¡ #°ú °°Àº ÀÇ¹Ì ¾ø´Â °ªÀ» ³Ö°Å³ª onclick ¾È¿¡ °æ·Î¸¦ ó¸®ÇÏ´Â °æ¿ì°¡ Àִµ¥ Æ˾÷âÀº ¸µÅ©ÀÌ°í ÆäÀÌÁö°¡ º°µµ·Î Á¸Àç Çϱ⠶§¹®¿¡ <a>¸¦ ÀÌ¿ëÇؼ­ ±â´ÉÀ» ±¸ÇöÇÏ°í href¿£´À ÇØ´ç Æ˾÷ÀÇ °æ·Î¸¦ ³Ö¾î¾ß ÇÑ´Ù.

<a href="popup.html" onclick="window.open(this.href, 'popupName', 'width=300,height=200'); return false;"><img src="openWindow.gif"></a>
ÀÌ·² °æ¿ì »ç¿ëÀÚ°¡ ÀÚ½ÅÀÇ Àǵµ ´ë·Î Æ˾÷âÀ» »õâ, »õÅÇ µîÀ¸·Î ¿­ ¼ö ÀÖ°í ½ÉÁö¾î Áñ°Ü ã±âµµ ÇÒ ¼ö ÀÖ´Ù.

ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇÑ ÆäÀÌÁö À̵¿
À¥»çÀÌÆ®¸¦ ÀÌ¿ëÇÏ´Ù º¸¸é Æû¿¡¼­ °ªÀ» ÀÔ·ÂÇÏ°í ¼­¹ÔÀ» ÇÏ´Â ¼ø°£ "µû´Ù´Ù´Ú" ÇÏ´Â ½ÄÀ¸·Î Ŭ¸¯À» ¿©·¯¹ø ÇÑ °Í°ú °°Àº ¼Ò¸®°¡ ³ª´Â °æ¿ì¸¦ Á¢ÇÏ°Ô µÈ´Ù. ÇÁ·Î¼¼½º°¡ ¿©·¯ÆäÀÌÁö¿¡ °ÉÃļ­ ÀϾ°Ô µÇ´Âµ¥ ÀÌ Ã³¸®¸¦ ÀÚ¹Ù½ºÅ©¸³Æ®·Î 󸮸¦ Çؼ­ ÀÌ·¯ÇÑ Çö»óÀÌ ¹ß»ýÀ» ÇÏ°Ô µÈ´Ù.

<script type="text/javascript">document.location.href="redirection.html";</script>
À§¿Í °°ÀÌ ÆäÀÌÁö¸¦ À̵¿ Çϰųª ¾Æ·¡¿Í °°ÀÌ <form>À» ÀÌ¿ëÇؼ­ °ªÀ» ³Ñ±â´Â °æ¿ì°¡ ÀÌ·¯ÇÑ °æ¿ìÀÌ´Ù.

<form name="login_form">
        <input type="hidden" name="user_id" value="myid" />
        <input type="hidden" name="user_pwd" value="mypassword" />
        <input type="hidden" name="redirect_url" value="http://mysite.com/login/" />
        <input type="hidden" name="somevalue" value="blahblah" />
        ...
</form>
<script type="text/javascript">
f = document.forms.login_form;
f.action = "http://login.oursite.com/login/";
...
f.submit();
</script>½ÉÇÑ °æ¿ì ¾Æ·¡¿Í °°ÀÌ ÀüÇô ÀÇ¹Ì ¾ø´Â ÆûÀ» ÀÌ¿ëÇϱ⵵ ÇÑ´Ù.

<form method="post" name="sg_form" action="http://www.qubi.com/" target="_top">
</form>
<script> sg_form.submit(); //3</script>
À§¿Í °°Àº ÆäÀÌÁöµéÀº html ¹®¹ý»ó ¿À·ù°¡ ÀÖ´Â ÆäÀÌÁö µéÀÌ°í ÀÌ ¶§¹®¿¡ ÀÛµ¿ÀÌ ¾È µÉ ¼öµµ ÀÖ´Ù. <form>¿¤¸®¸ÕÆ®³ª <script>¿¤¸®¸ÕÆ®´Â »óÀ§¿¡ <body>³ª <head>¿¤¸®¸ÕÆ®°¡ ÀÖ¾î¾ß Çϴµ¥ À§¿Í °°Àº °æ¿ì ÀÌ·¯ÇÑ ¿¤¸®¸ÕÆ®°¡ ¾ø±â ¶§¹®¿¡ html·Î Çؼ®ÀÌ ¾ÈµÇ¾î ½ºÅ©¸³Æ®°¡ ÀÛµ¿ µÇÁö ¾Ê°Å³ª °ªÀÌ ³Ñ¾î°¡Áö ¾ÊÀ» ¼öµµ ÀÖ´Ù. ±×¸®°í <form>¿¡ submit <input>ÀÌ ¾ø±â ¶§¹®¿¡ ÀÚ¹Ù½ºÅ©¸³Æ®·Î submitÀÌ ÀϾÁö ¾ÊÀ» ¼öµµ ÀÖ´Ù.

ÀÌ¿Í °°ÀÌ ÆäÀÌÁö¸¦ À̵¿Çϰųª °ªÀ» ³Ñ±æ ÇÊ¿ä°¡ ÀÖÀ» ¶§ ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ÀÇÁ¸Çؼ­ À̸¦ ó¸®ÇÏ°Ô µÇ¸é Ŭ¶óÀ̾ðÆ®ÀÇ È¯°æ¿¡ µû¶ó¼­ µ¿ÀÛÀÌ ½ÇÆÐÇÒ ¼ö ÀÖ´Ù. µû¶ó¼­ ÀÌ·¯ÇÑ Ã³¸®´Â ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼­ ó¸® ÇÏÁö ¸»°í ¼­¹ö Ãø¿¡¼­ httpÇì´õ Á¤º¸¸¦ ÀÌ¿ëÇؼ­ ó¸®ÇØ¾ß ÇÑ´Ù.

ÀÌ·¯ÇÑ Áß°£°úÁ¤¿¡¼­ÀÇ Ã³¸®¸¦ ¼­¹öÃø¿¡¼­ ¸ðµÎ ó¸® ÇÏ´Â °ÍÀÌ °¡Àå ¹Ù¶÷Á÷ ÇÏÁö¸¸ ¾î¿ ¼ö ¾øÀÌ »ç¿ëÀ» ÇؾßÇÒ °æ¿ì¿¡´Â - ±×·² °æ¿ì°¡ ¸¹Áö´Â ¾Ê°ÚÁö¸¸ ±âÁ¸ÀÇ È£È¯¼ºÀ» À§Çؼ­ - DTD¼±¾ðÀ̳ª <html> ·çÆ® ¿¤¸®¸ÕÆ®, <head>, <body>¿Í °°ÀÌ Çʼö ¿¤¸®¸ÕÆ®µéÀÌ Á¸ÀçÇÏ´Â ¿Ï°áµÈ ÆäÀÌÁö¸¦ »ç¿ë Çϵµ·Ï ÇÏ°í, ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ÀÛµ¿ÇÏÁö ¾Ê´Â °æ¿ì¸¦ À§Çؼ­ <form>¿¡ submit¹öÆ°µµ Á¦°øÀ» ÇÏ°í, °á°ú ¸Þ¼¼Áöµµ alert¿Ü¿¡ ÀÏ¹Ý text¿Í <a>¸¦ ÀÌ¿ëÇÑ ¸µÅ©¸¦ Á¦°øÇϵµ·Ï ÇØ¾ß ÇÑ´Ù.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Redirect</title>
</head>
<body>
<script type="text/javascript">
/*
some processes...
*/
alert('ÀÌ·¡Àú·¡ÇÑ ÀÌÀ¯·Î ´Ù½Ã µ¹¾Æ °©´Ï´Ù.');
document.location.href="redirection.html";
</script>
<p><a href="redirection.html">ÀÌ·¡Àú·¡ÇÑ ÀÌÀ¯·Î ´Ù½Ã µ¹¾Æ °©´Ï´Ù.</a></p>
</body>
</html>
charsetÀÌ ¾ø´Â °æ¿ì ºê¶ó¿ìÁ®ÀÇ ±âº» ¼³Á¤À¸·Î alertÀÌ ÀÛµ¿Çϱ⠶§¹®¿¡ ºê¶ó¿ìÁ®ÀÇ ±âº» ¼³Á¤ÀÌ ko-krÀÌ ¾Æ´Ñ °æ¿ì ÇѱÛÀÌ ±úÁö°Ô µÈ´Ù. ¹®¼­ÀÇ mime-typeµµ text/htmlÀÎÁö È®ÀÎÇØ¾ß ÇÑ´Ù.

<form>¿¡¼­ÀÇ ÀÚ¹Ù½ºÅ©¸³Æ® »ç¿ë
ÀϹÝÀûÀ¸·Î <form>Àº »ç¿ëÀÚ°¡ ÀÔ·ÂÇÑ °ªÀ» ¼­¹öÃø¿¡ Àü´ÞÇÏ´Â ¿ªÇÒÀ» ÇÏ°í ±× Àü´ÞÀº <form>ÀÇ submit ±â´ÉÀ» ÅëÇؼ­ ÀÌ·ç¾î Áø´Ù. ÀÌ·¯ÇÑ ÆûÀ» ±¸Çö ÇÒ ¶§¿¡ ÀϹÝÀûÀ¸·Î ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ »ç¿ëÇÏ´Â °æ¿ì°¡ ¸¹´Ù.

submit
ÆûÀº ±× ÀÚüÀûÀ¸·Î °ªÀ» º¸³»´Â ¼­¹Ô±â´ÉÀ» Á¦°øÇÏ°í ÀÖ´Ù. <input type="submit" />À̳ª <input type="image" />ÀÌ ¼­¹Ô±â´ÉÀ» ÇÏ´Â ÄÁÆ®·ÑÀε¥ ÆûÀÇ °ª À¯È¿¼º üũ¸¦ ÇÏ´Â °úÁ¤¿¡¼­ ÀÌ·¯ÇÑ ÆûÀÇ ÀÚüÀûÀÎ ¼­¹Ô±â´ÉÀ» ÀÌ¿ëÇÏÁö ¾Ê°í ÀÚ¹Ù½ºÅ©¸³Æ®·Î Æû ¼­¹ÔÀ» ÇÏ´Â °æ¿ì°¡ ÀÖ´Ù.

<script type="text/javascript">
function submitForm() {
        loginForm.submit();
}
</script>
<form id="loginForm" name="loginForm" action="">
        User Id <input type="text" name="loginId">
        User Password <input type="password" name="loginPassword"><br>
        <img src="login.gif" onclick="submitForm()">
</form>
À§¿Í °°Àº °æ¿ì Æû¿¡ ¼­¹Ô±â´ÉÀÌ ¾ø±â ¶§¹®¿¡ ºê¶ó¿ìÁ®¿¡ µû¶ó¼­ script·Î ¼­¹ÔÀÌ ¾ÈµÇ´Â °æ¿ìµµ ÀÖ°í ¼­¹Ô ´ë½Å¿¡ À̹ÌÁö°¡ µé¾î°¡ Àֱ⠶§¹®¿¡ ÀǹÌÀûÀ¸·Îµµ ¸ÂÁö ¾Ê°Ô µÈ´Ù. µû¶ó¼­ ÆûÀ» Á¦ÀÛÇÒ ¶§¿¡´Â ¹Ýµå½Ã ¼­¹Ô±â´ÉÀ» <input>À» ÀÌ¿ëÇؼ­ Á¦°øÇØ¾ß ÇÑ´Ù.

<form id="loginForm" name="loginForm" action="">
        <p>
                <label for="loginId">User Id</label>
                <input type="text" id="loginId" name="loginId" /><br />
                <label for="loginPassword">User Password</label>
                <input type="password" id="loginPassword" name="loginPassword" />
        </p>
        <p>
                <input type="image" src="login.gif" alt="Login" />
        </p>
</form>
¸¹Àº °æ¿ì <html>Á¦ÀÛ °úÁ¤¿¡¼­ ¼­¹ÔÀ» <img>·Î ³Ö´Â °æ¿ì°¡ Àִµ¥ ÀÌ °æ¿ì À̸¦ ±×³É »ç¿ëÇÏ¸é ¾ÈµÇ°í ÀûÀýÇÑ <input>À¸·Î ¹Ù²Ù¾î¼­ »ç¿ëÇØ¾ß ÇÑ´Ù.

validation
Ŭ¶óÀ̾ðÆ® Ãø¿¡¼­ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇÑ À¯È¿¼º °ËÁõÀº <form>ÀÇ ¼­¹Ô À̺¥Æ®¸¦ ijġÇÏ´Â ¹æ½ÄÀ¸·Î ±¸ÇöÇØ¾ß ÇÏ°í ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ÆûÀ» ¼­¹ÔÇÏ´Â ¹æ½ÄÀ» »ç¿ëÇÏ¸é ¾ÈµÈ´Ù.

<script type="text/javascript">
function submitForm() {
        if (!loginForm.loginId.value) {
                alert("¾ÆÀ̵𸦠³Ö¾îÁÖ¼¼¿ä.");
                loginForm.loginId.focus();
        } else if (!loginForm.loginPassword.value) {
                alert("ºñ¹Ð¹øÈ£¸¦ ³Ö¾îÁÖ¼¼¿ä.");
                loginForm.loginPassword.focus();
        } else {
                loginForm.submit();
        }
}
</script>
<form id="loginForm" name="loginForm" action="">
        ¾ÆÀ̵ð <input type="text" name="loginId">
        ºñ¹Ð¹øÈ£ <input type="password" name="loginPassword"><br>
        <img src="login.gif" onclick="submitForm()">
</form>

À§¿Í °°Àº °æ¿ì ÀÚ¹Ù½ºÅ©¸³Æ®¸¸À» ÀÌ¿ëÇؼ­ ÆûÀ» ¼­¹ÔÇÏ°í Àֱ⠶§¹®¿¡ ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ¾øÀÌ HTML¸¸À¸·Î´Â ±â´ÉÀÌ ÀÛµ¿ÇÏÁö ¾Ê´Â´Ù.

<script type="text/javascript">
function submitForm(formEl) {
        //TrimAll(formEl);

        var errorMessage = null;
        var objFocus = null;

        if (formEl.loginId.value.length == 0) {
                errorMessage = "¾ÆÀ̵𸦠³Ö¾îÁÖ¼¼¿ä.";
                objFocus = formEl.loginId;
        } else if (formEl.loginPassword.value.length == 0) {
                errorMessage = "ºñ¹Ð¹øÈ£¸¦ ³Ö¾îÁÖ¼¼¿ä.";
                objFocus = formEl.loginPassword;
        }

        if(errorMessage != null) {
                alert(errorMessage);
                objFocus.focus();
                return false;
        }
        return true;
}
</script>

<form id="loginForm" name="loginForm" action="" onsubmit="return submitForm(this)">
        <label for="loginId">¾ÆÀ̵ð</label> <input type="text" id="loginId" name="loginId" />
        <label for="loginPassword">ºñ¹Ð¹øÈ£</label> <input type="password" id="loginPassword" name="loginPassword" /><br />
        <input type="image" src="login.gif" alt="Login" />
</form>

ÀÌ¿Í °°ÀÌ onsubmit À̺¥Æ®¸¦ ÀÌ¿ëÇؼ­ ÆûÀÇ À¯È¿¼ºÀ» üũÇÏ°í ±× °á°ú¸¦ true³ª false·Î º¸³»ÁÜÀ¸·Î½á ÆûÀÌ ½ºÅ©¸³Æ®¿¡ µû¶ó¼­ ¼­¹ÔÀ» ÁøÇàÇϰųª ¸ØÃâ ¼ö ÀÖ°í, onsubmit À̺¥Æ®°¡ ¹ß»ýÇÏÁö ¾Ê¾Æµµ »ç¿ëÀÚ´Â ÆûÀ» »ç¿ëÇÒ ¼ö Àֱ⠶§¹®¿¡ Á¢±Ù¼ºÀÌ ³ô¾ÆÁö°Ô µÈ´Ù.

°Ô½ÃÆÇ µî¿¡¼­ ±â´ÉÀ» ¸ðµÎ ÀÚ¹Ù½ºÅ©¸³Æ®·Î ÇÏ´Â °æ¿ì
°Ô½ÃÆÇ¿¡¼­ ÆäÀÌÁöÀÇ À̵¿À» ÀÚ¹Ù½ºÅ©¸³Æ®¸¸À¸·Î ÇÏ´Â °ÍÀ» ¸¹ÀÌ º¼ ¼ö ÀÖ´Ù. ¾Æ·¡¿Í °°ÀÌ »ç¿ëÀÚ ÀÎDzÀÌ ¾ø´Â ºó <form>À» Çϳª ¸¸µé°í ÀÌ°Í°ú ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇؼ­ ±ÛÀ» Àаųª ÆäÀÌÁö¸¦ À̵¿ÇÏ´Â °ÍÀÌ´Ù.

<form method="post" name="vars">
        <input type="hidden" name="articleId" value="23" />
        <input type="hidden" name="page" value="3" />
        <input type="hidden" name="keysord" value="" />
        <input type="hidden" name="searchType" value="" />
        <!-- µîµî -->
</form>

...

<a href="javascript:ArticleRead()">±ÛÀбâ</a>
<a href="javascript:GoList()">¸®½ºÆ® º¸±â</a>

urlÀÌ °£´ÜÇØ Áö°í ´Ù·ç±â ½±´Ù´Â ÀÌÀ¯·Î ÀÌ·¯ÇÑ ¹æ½ÄÀ¸·Î °³¹ßÀ» ÇÏ´Â °æ¿ì°¡ ¸¹Àº °Í °°Àºµ¥ Àý´ë·Î »ç¿ëÇؼ­´Â ¾ÈµÇ´Â ¹æ½ÄÀÌ´Ù.

¿ì¼± À§¿Í °°ÀÌ ¸ðµç ±â´ÉÀ» ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇؼ­ ±¸ÇöÀ» ÇÏ°Ô µÇ¸é ÀÚ¹Ù½ºÅ©¸³Æ® ¿À·ù°¡ Àְųª ÇÚµåÆù°ú °°ÀÌ ÀÚ¹Ù½ºÅ©¸³Æ®°¡ Á¤»óÀûÀ¸·Î ÀÛµ¿ ÇÏÁö ¾Ê´Â »óȲ¿¡¼­´Â Á¢±ÙÀ» ÇÒ ¼ö ¾ø°Ô µÈ´Ù. ¶ÇÇÑ ¸ðµç º¯¼ö¸¦ post¸¦ ÅëÇؼ­ Àü´ÞÇϱ⠶§¹®¿¡ url¿¡ Ç¥½Ã°¡ µÇÁö ¾Ê°í ÇØ´ç ÆäÀÌÁö¸¦ µû·Î ºÏ¸¶Å© ÇÑ´ÙµçÁö ÀúÀåÀ» ÇÒ ¼ö°¡ ¾ø°ÔµÈ´Ù. °Ô½ÃÆÇÀÇ °æ¿ì ÇØ´ç °Ô½Ã¹°·ÎÀÇ Á¢±ÙÀ» ½±°Ô ÇØ ÁÖ¾î¾ß Çϴµ¥ »ç¿ëÀÚ°¡ urlÀ» ¾Ë ¼ö ¾ø°Ô ÇÔÀ¸·Î½á Á¢±ÙÀ» ¿øõÀûÀ¸·Î ¸·°Ô µÈ´Ù.

ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇÏÁö ¾Ê°íµµ <a>¿Í url¸¸À¸·Îµµ ÀÛµ¿ °¡´ÉÇÑ ÆäÀÌÁö¸¦ ¸¸µé°í QueryStringÀ» È¿À²ÀûÀ¸·Î ´Ù·ç´Â ¹æ¹ýÀ» ¸ð»öÇÏ¿© °³¹ßÀ» ÁøÇàÇÏ´Â °ÍÀÌ °¡Àå ÁÁÀº ¹æ¹ýÀÌ´Ù.
ÃßõÃßõ : 325 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,885
input ÀÔ·Â ÇÊµå ¾ÕµÚ °ø¹é ½Ç½Ã°£ Á¦°Å
2,884
Placeholder Æ÷Ä¿½º½Ã °¨Ãß±â
2,883
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
2,882
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
2,881
sessionStorage.getItem ¿Í sessionStorage.setItem
2,880
Á¦ÀÌÄõ¸® ·£´ýÀ¸·Î ¹è°æ»ö º¯°æ
2,879
preg match¿¡ °üÇÑ Á¤±Ô½Ä
2,878
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
2,875
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
2,874
iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
2,873
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
2,872
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
2,871
ºÎÆ®½ºÆ®·¦ CSS
2,870
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
2,869
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
2,868
PHP preg match all()
2,867
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
2,866
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
2,865
PHP ÇÔ¼ö Á¤¸®
2,864
¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
2,863
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
2,862
PHP Á¤±Ô½Ä Á¤¸®
2,861
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,860
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
2,859
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
2,858
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
2,857
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
2,856
[HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.