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