http://www.hackerschool.org/HS_Boards/zboard.php?id=Free_Lectures&no=1395 [º¹»ç]
/* °ÀǸ¦ ½áº¸´Â °ÍÀº ÀÌ°Ô Ã³À½À̳׿ä... ¹¹ ¾î¶²½ÄÀ¸·Î ½á¾ß ÇÒÁö´Â ¸ð¸£Áö¸¸, ¹è¿î ³»¿ëÀ» º¹½ÀÇÏ´Â Â÷¿øÀ¸·Î ±×³É Çѹø ½áº¾´Ï´Ù. */
1. HTML À̶õ?
HyperText Markup LanguageÀÇ ¾àÀڷμ, À¥ ¹®¼¸¦ ¸¸µé±â À§ÇÏ¿© »ç¿ëÇÏ´Â ±âº»ÀûÀÎ ÇÁ·Î±×·¡¹Ö ¾ð¾îÀÇ ÇÑ Á¾·ùÀÌ´Ù. ÇÏÀÌÆÛÅؽºÆ®¸¦ ÀÛ¼ºÇϱâ À§ÇØ °³¹ßµÇ¾ú´Ù. - ³×À̹ö ¹é°ú»çÀü ÂüÁ¶
2. HTML ±âÃÊ
¿¹Á¦(1)
<html> - html¼Ò½º¶ó´Â °ÍÀ» ¾Ë¸²°ú ½ÃÀÛ
<head> - ¸Ó¸® ºÎºÐÀÇ ½ÃÀÛÀ» ¾Ë¸²
<title>Hello, HTML!</title> - ¸Ó¸® ºÎºÐ¾È¿¡ Á¦¸ñ ű׸¦ ½ÃÀÛ°ú Á¾·á
</head> - ¸Ó¸® ºÎºÐÀÇ Á¾·á¸¦ ¾Ë¸²
<body> - ¸öü ºÎºÐÀÇ ½ÃÀÛÀ» ¾Ë¸²
<h1>What is HTML?</h1> - ¸öü¾ÈÀÇ ºÎÁ¦¸ñ ű׸¦ ½ÃÀÛ°ú Á¾·á
<p>HyperText Markup Language</p> - ¹®´ÜÀÇ ½ÃÀÛ°ú Á¾·á
</body> - ¸öü ºÎºÐÀÇ Á¾·á¸¦ ¾Ë¸²
</html> - html¼Ò½º Á¾·á
À§¸¦ º¸½Ã¸é ¾ÆÁÖ °£´ÜÇÑ HTML¼Ò½º°¡ ÀÖ½À´Ï´Ù. ÀÌ HTML¼Ò½º¸¦ º¸½Ã¸é °¢ÀÌ Áø °ýÈ£( < > )µéÀÌ ¸¹ÀÌ º¸ÀÏÅÙµ¥, ÀÌ°ÍÀ» ű׶ó°í ºÎ¸¨´Ï´Ù. ű״ ¸¹Àº ±â´ÉÀ» Çϴµ¥ ÅÂ±× Áß, ´ëÇ¥ÀûÀÎ °ÍÀÌ <html>,<head>,
<title>,<body> ÀÔ´Ï´Ù. ÀÌ Å±׵éÀº html ¼Ò½º³»ÀÇ ±¸Á¶¸¦ Àâ¾ÆÁÖ´Â ¿ªÇÒÀ» Çϱ⿡ ¾ÆÁÖ Áß¿äÇÑ ¿ä¼Ò¶ó°í º¼ ¼ö ÀÖ½À´Ï´Ù. <html>Àº ÀÌ ¼Ò½ºÄڵ尡 htmlÀ̶ó´Â °ÍÀ» ¾Ë¸®°í ½ÃÀÛÀ» À§ÇÑ Ç¥½ÃÀÇ ¿ªÇÒÀ» ÇÕ´Ï´Ù. <head>´Â ¸Ó¸® ºÎºÐÀÇ ½ÃÀÛÀ» ¾Ë¸®´Â ű×ÀÔ´Ï´Ù. ÇØÄ¿½ºÄð¿¡ Á¢¼ÓÇÏ¿© Á¦¸ñÇ¥½ÃÁÙÀ» º¸¸é "+ÇØÄ¿½ºÄð Ä¿¹Â´ÏƼ+ by HACKERSCHOOL.org"¸¦ º¼ ¼ö ÀÖ½À´Ï´Ù. ÀÌ°Ô html¼Ò½ºÀÇ <head>ºÎºÐ ÀÔ´Ï´Ù. ±×·¯¹Ç·Î Hello,HTML!À̶ó´Â ¹®ÀåÀº <head>ºÎºÐ À̹ǷΠÀ¥À» »ý¼ºÇÑ´Ù¸é Á¦¸ñÇ¥½ÃÁÙ¿¡ Ç¥½Ã°¡ µÇ°ÚÁÒ. ±×·¯³ª <head>ºÎºÐ¸¸À» ¼±¾ðÇؼ´Â ¾ÈµÇ°í, <title>À̶ó´Â ű׵µ ¼±¾ðÇÏ¿©¾ß ÇÕ´Ï´Ù. <title>À» ¼±¾ðÇÏÁö ¾Ê°ÔµÈ´Ù¸é, Á¦¸ñÀº ¾ø°í ´ë½ÅÇؼ ¸¸¾à XP¸¦ »ç¿ëÇÑ´Ù¸é Internet Explorer¸¸ Ç¥½Ã°¡ µÉ °ÍÀÔ´Ï´Ù. Áß¿äÇÑ ³»¿ëÀÌ´Ï ²À ¾Ë¾ÆµÎ½Ã±æ ¹Ù¶ø´Ï´Ù.
±×¸®°í <body>µµ ±¸Á¶¸¦ Àâ¾ÆÁÖ´Â Áß¿äÇÑ ¿ªÇÒ¿¡ ÇÑ ¸òÀ» ÇÕ´Ï´Ù. <body>´Â À¥¿¡ Ç¥½ÃµÉ ³»¿ëÀ» ´ã°í Àִ ű×ÀÔ´Ï´Ù. <body>¾ÈÀÇ ³»¿ë¿¡´Â <h1>°ú <p>¶ó´Â °ÍÀÌ Á¸ÀçÇϴµ¥, ¿©±â¼ h´Â heading(Á¦¸ñ)À», p´Â paragraph(¹®´Ü)À̶ó°í Çؼ®ÇÏ½Ã¸é µË´Ï´Ù. Áï ÀÌ Á¤ÀÇ¿Í °°ÀÌ °¢°¢ÀÇ ¿ªÇÒÀ» ¼öÇàÇÕ´Ï´Ù. <h1>Àº Á¦¸ñ1À» ¶æÇϸç <h*>(*´Â 1ºÎÅÍ 6±îÁöÀÇ ÀÚ¿¬¼ö)ºÎÁ¦¸ñÀ» ¿©·¯°³ÀÇ ¼ýÀÚ·Î hµÚ¿¡ ºÙ¿©¼ Ç¥ÇöÇÒ ¼ö Àִµ¥ ¼ýÀÚ°¡ Ä¿Áú¼ö·Ï ±Û²ÃÀÇ Å©±â´Â ÀÛ¾ÆÁý´Ï´Ù. ¶Ç <p>´Â ¹®´ÜÀ¸·Î¼, À¥¿¡ Æò¹üÇÑ ¹®´ÜÀ» Ãâ·ÂÇÏ´Â ±â´ÉÀ» ÇÕ´Ï´Ù.
¿¹Á¦ (2)
<html>
<head>
<title>Hello, HTML!</title>
</head>
<body>
<h1>What is HTML?</h1>
<p>HyperText Markup Language</p>
<h1>What is HTML?</h1>
<p>
HyperText Markup Language
</p>
<h2>What is HTML?</h2>
<p>HyperText Markup Language</p>
</body>
</html>
¿¹Á¦1ÀÇ ¼Ò½ºº¸´Ù ÈξÀ º¹ÀâÇØ Á³½À´Ï´Ù. ÇÏÁö¸¸ ÀüÇô ¾î·ÆÁö ¾Ê½À´Ï´Ù. ű״ ²À ÇÑ ÁÙ¿¡¸¸ À§Ä¡ ÇÏ¿©¾ß ÇÏ´Â °ÍÀÌ ¾Æ´Ï°í °°Àº ÁÙ¿¡ ÀÖ´ø ´Ù¸¥ ÁÙ¿¡ ÀÖ´ø »ó°üÀº ¾ø½À´Ï´Ù. ´Ù¸¸, Á¾·áű׸¦ ²À µÚ¿¡ ºÙ¿©ÁÖ¾î¾ß ÇÑ´Ù´Â °ÍÀÔ´Ï´Ù.(¿¹¿Üµµ ÀÖ½À´Ï´Ù.)
*Á¾·á ű׶õ?
</p>¿Í °°ÀÌ Å±׾ȿ¡ '/'°¡ ¾Õ¿¡ ºÙ´Â ű׸¦ ¶æÇÕ´Ï´Ù. ÀÌ°ÍÀº ÇÑ Å±׸¦ ³¡³½´Ù´Â Ç¥½Ã·Î <p>¿Í </p>¸¦ '¸ÅÄ¡ ű×' ¶ó°í ÇÕ´Ï´Ù.
* ¿¤¸®¸ÕÆ®¶õ?
¿¤¸®¸ÕÆ®´Â ¼¼°¡Áö·Î ÀÌ·ç¾îÁý´Ï´Ù. ½ÃÀÛÅÂ±×¿Í ³»¿ë±×¸®°í Á¾·áű×. ÀÌ ¸»Àº
<p>HyperText Markup Language</p> ¸¦ ¿¹·Î µéÀÚ¸é <p>,HyperText Markup Language,</p>·Î ³ª´©¾îÁý´Ï´Ù. ÀÌ ¼¼°¡Áö¸¦ ÅëƲ¾î ÁÙ¿© ¿¤¸®¸ÕÆ®¶ó°í ÁÙ¿© ºÎ¸£´Â °ÍÀÔ´Ï´Ù.
¸¶Áö¸·À¸·Î <h2>¶ó´Â űװ¡ ÀÖ½À´Ï´Ù. »õ·Î¿î°Ô ¾Æ´Õ´Ï´Ù. ´ÜÁö hµÚ¿¡ 2¸¦ ºÙ¿©ÁÖ¾úÀ» »ÓÀÔ´Ï´Ù. <h>´Â ºÎÁ¦¸ñÀ¸·Î¼ µÚ¿¡ ºÙÀº ¼ýÀÚ°¡ Ä¿Áú¼ö·Ï À¥¿¡ Ç¥½ÃµÇ´Â ±ÛÀÚ°¡ ÀÛ¾ÆÁø´Ù°í ÇÏ¿´ÁÒ.
3. ¿¬½À¹®Á¦
<html>
<head>
<title>Who am I</title>
</head>
<body>
<h1>What is your name?</h1>
<p>xxx</p>
<h1>How old are you?</h1>
<p>
xx
</p>
<h2>Where do you live?</h2>
<p>xxx</p>
</body>
</html>
±×³É ¸¸µé¾î º¸¾Ò½À´Ï´Ù. Çѹø ºÐ¼®Çغ¸¼¼¿ä! ÀÌ»óÀ¸·Î ÇãÁ¢ÇÑ °ÀÇ ¿´½À´Ï´Ù.
|
Hit : 6135 Date : 2010/02/18 12:50
|