1-3-3.ÀÚ¹Ù½ºÅ©¸³Æ®

HTMLÀº ¹®¼­ÀÇ ³»¿ëÀ» Á¤ÀÇÇÏ°í CSS´Â ¹®¼­ÀÇ µðÀÚÀÎÀ» ±â¼úÇÑ´Ù. À¥ ºê¶ó¿ìÀú´Â ¼­¹ö¿¡¼­ ¹ÞÀº ¹®¼­¸¦ Çؼ®ÇÏ¿© ±¸Á¶¸¦ ¸¸µé°í µðÀÚÀÎÀ» ÀÔÇô »ç¿ëÀÚ¿¡°Ô º¸¿©ÁØ´Ù. ÀÌ µÎ ¾ð¾î°¡ Á¤ÀÇÇÏ´Â À¥ ÆäÀÌÁö´Â ¾ó¸¶µçÁö º¹ÀâÇÏ°í È­·ÁÇÒ ¼ö ÀÖÁö¸¸ Á¤ÀûÀÌ¸ç ¿òÁ÷ÀÓÀÌ ¾ø´Ù. º¸¿©Áֱ⸸ ÇÒ »Ó »ç¿ëÀÚÀÇ Á¶ÀÛ¿¡ ¹ÝÀÀÇÏÁö´Â ¸øÇÑ´Ù.

»ç¿ëÀÚ¿Í »óÈ£ ÀÛ¿ëÇÏ·Á¸é ¸¶¿ì½º Ä¿¼­°¡ À̵¿ÇÏ´Â °÷À» °­Á¶ÇÏ°í »ç¿ëÀÚÀÇ Å¬¸¯À̳ª Å°º¸µå ÀԷ¿¡µµ ¹ÝÀÀÇØ¾ß ÇÑ´Ù. »óÈ£ ÀÛ¿ëÀº ½ÇÇàÁß¿¡ ÀϾ´Â ÀÏÀ̹ǷΠ¼±¾ðÀûÀÎ ¸¶Å©¾÷À¸·Î´Â ó¸®ÇÒ ¼ö ¾øÀ¸¸ç ÀÔ·ÂÀ» ÆǺ°ÇÏ¿© ÀûÀýÈ÷ ¹ÝÀÀÇÏ´Â Äڵ尡 ÇÊ¿äÇÏ´Ù. À¥ ÆäÀÌÁö¿¡ »ç¿ëµÇ´Â ÄÚµå´Â ÀÚ¹Ù½ºÅ©¸³Æ®, VB½ºÅ©¸³Æ® µîÀÌ ÀÖ¾ú´Âµ¥ Áö±ÝÀº ÀÚ¹Ù½ºÅ©¸³Æ®·Î ÅëÀϵǾú´Ù.

ÀÚ¹Ù½ºÅ©¸³Æ®´Â À¥ ÆäÀÌÁöÀÇ Çʼö ¿ä¼Ò´Â ¾Æ´ÏÁö¸¸ HTML5ÀÇ »õ·Î¿î ±â´É ´ëºÎºÐÀÌ ÀÚ¹Ù½ºÅ©¸³Æ® »ç¿ëÀ» ÀüÁ¦ÇϹǷΠÀÌÁ¦´Â HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ºÐ¸®ÇÏ¿© »ý°¢ÇÒ ¼ö ¾ø´Ù. ĵ¹ö½º³ª À¥ ¼ÒÄÏ µîÀÇ °í±Þ API´Â ÀÚ¹Ù½ºÅ©¸³Æ®·Î¸¸ Á¦¾îÇÒ ¼ö ÀÖ¾î À¥ °³¹ßÀÚ°¡ ¹Ýµå½Ã ¹è¿ö¾ß ÇÏ´Â °ú¸ñÀÌ´Ù. Çö´ëÀÇ À¥ °³¹ßÀº °ÅÀÇ ¿¹¿Ü¾øÀÌ ¼¼ °¡Áö ¾ð¾î°¡ µ¿½Ã¿¡ »ç¿ëµÇ¸ç °¢ÀÚ ¸ÃÀº ¿µ¿ªÀÌ ºÐ¸íÈ÷ Á¤ÇØÁ® ÀÖ´Ù.

 

¾ð¾î

¿ªÇÒ

´ã´çÀÚ

HTML

³»¿ë°ú ±¸Á¶

±âȹÀÚ

CSS

Ç¥Çö°ú µðÀÚÀÎ

µðÀÚÀ̳Ê

ÀÚ¹Ù½ºÅ©¸³Æ®

µ¿ÀÛ°ú »óÈ£ ÀÛ¿ë

°³¹ßÀÚ

 

¾ð¾î°£ÀÇ ¿ªÇÒ ºÐ´ãÀº ¿©·¯ °¡Áö ÀÌÁ¡À» Á¦°øÇÑ´Ù. °¢ ´ã´çÀÚ°¡ ¸ÃÀº ºÎºÐ¸¸ ºÐ¾÷Çؼ­ °³¹ßÇÒ ¼ö ÀÖÀ¸¸ç º´·Ä ÁøÇ൵ °¡´ÉÇÏ¿© ÇÁ·ÎÁ§Æ®ÀÇ Àü¹®¼º°ú °³¹ß ¼Óµµ°¡ Çâ»óµÈ´Ù. ¶Ç Àß ¸¸µç ½ºÅ¸ÀϽÃÆ®³ª Äڵ带 ½±°Ô Àç»ç¿ëÇÒ ¼ö ÀÖ¾î »ý»ê¼ºÀÌ Çâ»óµÇ°í ¹®¼­·®ÀÌ ÀÛ¾ÆÁ® À¥ÀÇ Æ®·¡Çȵµ ´ëÆø °¨¼ÒÇÏ¿´´Ù. ´ÙÀ½ ¿¹Á¦·Î ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ µ¿ÀÛ ¹æ½ÄÀ» ±¸°æÇØ º¸ÀÚ.

 

jstime.html

<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8">

     <title>jstime</title>

</head>

<body>

     <h2 id="nowtime">ÇöÀç ½Ã°£</h2>

     <script>

         setInterval(function() {

              var now = new Date();

              var nowtime = "ÇöÀç ½Ã°£Àº " + now.getFullYear() + "³â " +

                   (now.getMonth() + 1) + "¿ù " +   now.getDate() + "ÀÏ " +

                   now.getHours() + ":" + now.getMinutes() +

                   ":" + now.getSeconds() + "ÀÔ´Ï´Ù.";

              document.getElementById("nowtime").innerHTML = nowtime;

              }, 1000);

     </script>

</body>

</html>

 

<script> ÅÂ±× ¾È¿¡ ¹º°¡ º¹ÀâÇÑ Äڵ尡 ÀÛ¼ºµÇ¾î Àִµ¥ ¾ÆÁ÷Àº ³»¿ëÀ» ´Ù ÀÌÇØÇÒ ÇÊ¿ä°¡ ¾ø´Ù. ºê¶ó¿ìÀúÀÇ ½Ã°£ÀÌ ÁÖ±âÀûÀ¸·Î °»½ÅµÈ´Ù. Á¤ÀûÀÎ È­¸é¸¸ º¸¿©ÁÖ´Â °ÍÀÌ ¾Æ´Ï¶ó ½º½º·Î ½Ã°£À» °»½ÅÇÏ´Â Àû±ØÀûÀÎ µ¿ÀÛÀ» ±¸ÇöÇÑ °ÍÀÌ´Ù. À¥ ºê¶ó¿ìÀú´Â ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ Äڵ带 Çؼ®ÇÏ¿© Á¶°Ç¿¡ µû¶ó Äڵ带 ½ÇÇàÇÏ¿© À¥ ÆäÀÌÁö¸¦ Á¶ÀÛÇÑ´Ù.

´ÙÀ½ ¿¹Á¦´Â »ç¿ëÀÚÀÇ ¸¶¿ì½º Ŭ¸¯¿¡ ¹ÝÀÀÇÑ´Ù. »ç¿ëÀÚ°¡ º¸³»´Â Ŭ¸¯ À̺¥Æ®¸¦ ¹Þ¾Æ ÆäÀÌÁöÀÇ ¸ð¾çÀ» µ¿ÀûÀ¸·Î ¹Ù²Ù´Â »óÈ£ ÀÛ¿ëÀ» º¸¿©ÁØ´Ù.

 

jsbutton.html

<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8">

     <title>jsbutton</title>

     <script>

         function changeCaption(cap) {

              document.getElementById("fruit").innerText = cap;

         }

     </script>

</head>

<body>

     <p id="fruit">°úÀÏ</p>

     <form>

         <input type="button" value="Apple" onClick="changeCaption('Apple')">

         <input type="button" value="Orange" onClick="changeCaption('Orange')">

     </form>

</body>

</html>

 

¾Æ·¡ÂÊÀÇ ¹öÆ°À» ´©¸£¸é À§ÂÊ ¹®´ÜÀÇ ÅؽºÆ®°¡ ¹Ù²ï´Ù. »ç¿ëÀÚÀÇ ¸¶¿ì½º Á¶ÀÛ¿¡ ¹ÝÀÀÇÏ¿© À¥ ÆäÀÌÁö°¡ ¸¶Ä¡ ÀÀ¿ë ÇÁ·Î±×·¥Ã³·³ µ¿ÀÛÇÑ´Ù. ĵ¹ö½º¿Í ÇÔ²² »ç¿ëÇÏ¸é ±×¸²À» ±×¸± ¼öµµ ÀÖ°í Å°º¸µå ÀԷ¿¡ ¹ÝÀÀÇÏ¿© È­·ÁÇÑ ½Ç½Ã°£ °ÔÀÓÀ» Á¦ÀÛÇÒ ¼öµµ ÀÖ´Ù.

  

ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¹®¹ýÀº C++À̳ª ÀÚ¹Ù¿¡ ºñÇؼ­´Â »ó´ëÀûÀ¸·Î ´Ü¼øÇÏ´Ù. ±×·¯³ª ¾Æ¹«¸® ´Ü¼øÇØ º¸¿©µµ ÇϳªÀÇ ¿Ïº®ÇÑ ¾ð¾îÀÌ¸ç ³ª¸§´ë·Î º¹ÀâÇÑ ¹®¹ý ü°è°¡ À־ °³¹ßÀ» ÀüÇô ÇØ º¸Áö ¾ÊÀº Ãʺ¸ÀÚ°¡ ¼±¶æ ¹è¿ì±â´Â ¸¸¸¸Ä¡ ¾Ê´Ù. Á¤È®ÇÑ ¹®¹ýÀ» ¹è¿ì´Â °Íµµ ½±Áö ¾ÊÁö¸¸ ÀÀ¿ëÀÇ ¿©Áö°¡ ¿ö³« ¸¹¾Æ Á¦´ë·Î È°¿ëÇϱâ´Â ´õ ¾î·Æ´Ù. HTMLÀ̳ª CSS¿Í´Â ¼öÁØÀÌ ´Ù¸¥ °ú¸ñÀ̹ǷΠÃæºÐÇÑ ½Ã°£À» ÅõÀÚÇؼ­ ²Ä²ÄÈ÷ ÇнÀÇØ¾ß ÇÑ´Ù.

´ÙÇàÈ÷ jQuery °°Àº Àß ¸¸µé¾îÁø ¶óÀ̺귯¸®°¡ ¸¹ÀÌ °ø°³µÇ¾î ÀÖ¾î ½Ç¹«¿¡¼­´Â °£ÆíÇÏ°Ô Àû¿ëÇÒ ¼ö ÀÖ´Ù. ÇÏÁö¸¸ ÃÖ¼ÒÇÑ ±âº» ¹®¹ýÀº ¾Ë°í ÀÖ¾î¾ß Ư¼öÇÑ »óȲ¿¡µµ ´ëóÇÒ ¼ö ÀÖ°í ÀÀ¿ëµµ °¡´ÉÇÏ´Ù. ±âÁ¸ ¾ð¾î¿¡ Àͼ÷ÇÑ °³¹ßÀÚ¶ó ÇÏ´õ¶óµµ ÀÚ¹Ù½ºÅ©¸³Æ®¸¸ÀÇ µ¶Æ¯ÇÑ Æ¯Â¡°ú ÇÔÁ¤ÀÌ ¸¹¾Æ ¸¸¸¸ÇÏ°Ô º¸°í ´ýº­¼­´Â ¾ÈµÇ¸ç Á¤½ÅÀ» ÁýÁßÇÏ¿© ÀÍÈú ÇÊ¿ä°¡ ÀÖ´Ù. Áö½Äº¸´Ù´Â ¼÷·ÃµÈ °æÇèÀÌ ¿ä±¸µÇ´Â °ú¸ñÀÌ´Ù.