ȨÆäÀÌÁö¿Í HTML
¢º ȨÆäÀÌÁö
; À¥À» ÅëÇÏ¿© ÀÏ´Ü ¾î´À °÷¿¡ Á¢¼ÓÀ» Çϸé, ÀÏÁ¤·®ÀÇ ³»¿ëÀÌ Àü¼ÛµÇ¾î ¿Â´Ù.
À¥¿¡¼ ÇϳªÀÇ ÆäÀÌÁö¶ó°í ÇÏ´Â °ÍÀº ÀÌ·¸°Ô Çѹø Á¢¼ÓÀ¸·Î º¸³»¾îÁ®¼ ÇϳªÀÇ À©µµ¿ì¸¦ ÅëÇÏ¿©
º¼ ¼ö ÀÖ´Â ³»¿ëÀ» ¸»ÇÑ´Ù. ÇϳªÀÇ HTML ¹®¼°¡ (±×¸² ÆÄÀϵéÀ» Æ÷ÇÔÇؼ) ÇϳªÀÇ ÆäÀÌÁö°¡ µÇ´Â
°ÍÀÌ´Ù. ÀÌ·¯ÇÑ ÆäÀÌÁöµé Áß, ÃʱâȸéÀ̶ó°íµµ ÇÒ ¼ö Àִ óÀ½ Á¢ÇÏ°Ô µÇ´Â ÆäÀÌÁö¸¦ ȨÆäÀÌÁö
¶ó ÇÑ´Ù.
; ȨÆäÀÌÁö´Â Å©°Ô µÎ°¡Áö·Î ºÐ·ùÇÒ ¼ö ÀÖ´Ù. Çϳª´Â ±â¾÷À̳ª ´ëÇÐ, ¿¬±¸±â°üÀÇ È¨ÆäÀÌÁöÀ̸ç,
´Ù¸¥ Çϳª´Â °³ÀΠȨÆäÀÌÁöµéÀÌ´Ù. °³ÀΠȨÆäÀÌÁö¿¡ Á¢¼ÓÇϱâ À§Çؼ´Â ÇØ´ç ÁÖ¼Ò ´ÙÀ½¿¡
±× »ç¶÷ÀÇ °èÁ¤À» ' ~ ' ´ÙÀ½¿¡ µ¡ºÙ¿© ÁÖ¾î¾ß ÇÑ´Ù.
http://some.site.co.kr/ ¾î¶² ±â¾÷ÀÇ È¨ÆäÀÌÁö
http://some.site.co.kr/~someone/ someoneÀÇ °³ÀΠȨÆäÀÌÁö
; Ŭ¶óÀ̾ðÆ® ÇÁ·Î±×·¥À» ÅëÇÏ¿© ȨÆäÀÌÁö¿¡ Á¢¼ÓÇÏ°Ô µÇ¸é, ¼¹ö ÇÁ·Î±×·¥¿¡¼ ȨÆäÀÌÁö¿¡
ÇØ´çÇÏ´Â HTML ¹®¼¸¦ º¸³»ÁÖ°Ô µÈ´Ù. ȨÆäÀÌÁö¿¡´Â ÀÚ½ÅÀÇ °£´ÜÇÑ ¼Ò°³¿Í ´Ù¸¥ ¹®¼·ÎÀÇ
¸µÅ©¸¦ Æ÷ÇÔÇÏ°Ô µÈ´Ù. ³ÐÀº Àǹ̿¡¼ ȨÆäÀÌÁö¶ó°í Çϸé Á¢¼ÓÇÏ¿´À» ¶§ ³ª¿À´Â ù ÆäÀÌÁö »Ó¸¸
¾Æ´Ï¶ó ±× °÷À» ÅëÇؼ Á¦°øµÇ´Â ¸ðµç ÆäÀÌÁöµéÀ» ÀǹÌÇϱ⵵ ÇÑ´Ù.
ÀϹÝÀûÀ¸·Î ȨÆäÀÌÁö¸¦ ÀÛ¼ºÇÑ´Ù°í ÇÏ´Â °ÍÀº ÀÌ·¯ÇÑ ÆäÀÌÁöµéÀ» ÀÛ¼ºÇÏ´Â °ÍÀ» ÀǹÌÇÑ´Ù.
¢º HTML
; À¥¿¡¼ »ç¿ëµÇ´Â ¹®¼´Â ÀÏ¹Ý ¹®¼¿Í´Â ±â´ÉÀÌ ´Ù¸£´Ù. ÅؽºÆ® »Ó¸¸¾Æ´Ï¶ó ¸ÖƼ¹Ìµð¾î¶ó ºÒ¸®´Â
À½¼º, È»ó µî°ú °°Àº ´Ù¸¥ ¹Ìµð¾îµéÀ» ¹®¼³»¿¡ Æ÷ÇÔÇϸç, ¶ÇÇÑ ´Ù¸¥ ¹®¼¿¡ ¿¬°á µÇ¾îÀֱ⵵
ÇÏ´Ù. ÀÌ·¯ÇÑ Æ¯Â¡À» °¡Áø ¹®¼¸¦ ÇÏÀÌÆÛ ÅؽºÆ®(hyper text)¶ó°í Çϴµ¥, À¥¿¡¼´Â ±×³É HTML
(HyperText Markup Language) ¹®¼¶ó°í ¸»Çϱ⵵ ÇÑ´Ù.
; HTML ¹®¼´Â ¿Ï¼ºÇü ÅؽºÆ®·Î ÀÛ¼ºµÈ ÀÏ¹Ý ÅؽºÆ® Çü½ÄÀÇ ¹®¼ÀÌ´Ù. ¿Ï¼ºÇü ÅؽºÆ®´Â
À©µµ¿ìÁî¿¡¼ »ç¿ëµÇ´Â Çü½ÄÀ¸·Î ¸Þ¸ðÀå¿¡¼ ±âº»ÀûÀ¸·Î ÀúÀåÇÏ´Â Çü½ÄÀÌ´Ù.
; Mark-up Language¶ó´Â °ÍÀº ÀÏ¹Ý ÅؽºÆ® Çü½Ä¿¡¼ ¹®¼ Áß°£¿¡ ¹®ÀÚ³ª ¹®ÀåÀÇ ÇüÅ¿¡ ´ëÇÑ ¸í·É
tag(Ç¥½Ä)À» µ¡ºÙÀÓÀ¸·Î½á ¹®¼ÀÇ Çü½ÄÀ» ¸¸µç´Ù.
[¼Ò½ºÄÚµå]
< h2 >HTML ¹®¼ ÀÛ¼ºÀÇ ¿¹< /h2 >
ÀÌ ¹®ÀåÀº < b >HTML ¹®¼ ÀÛ¼º< /b >ÀÇ ¿¹ÀÌ´Ù.< br >
[Ãâ·Âȸé]
HTML ¹®¼ ÀÛ¼ºÀÇ ¿¹
ÀÌ ¹®ÀåÀº HTML ¹®¼ ÀÛ¼ºÀÇ ¿¹ÀÌ´Ù.
¿©±â¿¡¼ '< '¿Í ' >'·Î µÑ·¯½ÎÀÎ ºÎºÐµéÀÌ tagµéÀÌ´Ù.
< h2 >´Â ¹®¼ÀÇ Á¦¸ñÀ» ³ªÅ¸³»´Â tagÀ̸ç < b >´Â °Á¶Ã¼(bold)·Î ³ªÅ¸³»¶ó´Â ÀǹÌÀÌ´Ù.
ÀÌ·¯ÇÑ tagµéÀº ±âº»ÀûÀ¸·Î < tag >text< /tag >ÀÇ Çü½ÄÀ» ÃëÇÏ°Ô µÈ´Ù.
tagÀ¸·Î µÑ·¯½×ÀÎ ºÎºÐµéÀÌ ÁöÁ¤µÈ ¼Ó¼ºÀ¸·Î Ãâ·ÂµÇ°Ô µÈ´Ù.
< br >Àº Çà¹Ù²ÞÀ» ÀǹÌÇÏ´Â tagÀ¸·Î ÀÌ·¯ÇÑ °æ¿ì´Â ½ÖÀ» ÀÌ·ç¾î »ç¿ëµÇÁö ¾Ê°í µ¶¸³µÇ¾î È¥ÀÚ¼
»ç¿ëµÉ ¼ö ÀÖ´Ù.
ÀÌ·¯ÇÑ tagµéÀº ´ë¹®ÀÚ¿Í ¼Ò¹®ÀÚ¸¦ ±¸º°ÇÏÁö ¾Ê´Â´Ù. < BR >, < Br >, < br > ¸ðµÎ µ¿ÀÏÇÑ ÀǹÌÀÌ´Ù.
tagµéÀÇ Á¾·ù¿Í »ç¿ë¹ýÀº ÀÌÈÄ¿¡ ¼³¸íµÉ °ÍÀÌ´Ù.
¡Ø ȨÆäÀÌÁö¸¦ ¸¸µé±â À§Çؼ´Â ÀÌ·¯ÇÑ tagÀÇ Á¾·ù¿Í ¾²ÀÓ»õ¸¦ ¾Ë°í ÀûÀýÀÌ tag¸¦ ¹®¼¿Í
»ç¿ëÇÏ´Â ¹ýÀ» ¹è¿ì¸é µÈ´Ù
1. HTML ¹®¼ÀÇ ±âº»±¸Á¶
HTML ¹®¼ÀÇ ±âº» ±¸Á¶´Â Å©°Ô ¸Ó¸®(head)°ú ¸öü(body)ºÎºÐÀ¸·Î ³ª´µ¾î Áø´Ù. ¸Ó¸´±ÛÀº ¹®¼ÀÇ
Á¦¸ñ(title)ÀÌ ±â¼úµÇ¸ç ¸öü¿¡´Â ¹®¼ÀÇ ³»¿ëÀÇ µé¾î°¡°Ô µÈ´Ù.
´ÙÀ½Àº ÀÌ·¯ÇÑ ±¸Á¶¸¦ ±â¼ú ÇÏ´Â ±âº»ÀûÀÎ HTML tagÀ» ³ªÅ¸³½´Ù.
< html > ------ HTML ¹®¼ÀÇ ½ÃÀÛÀ» Ç¥½Ã
< head >
¹®¼ÀÇ ÇìµåºÎºÐ
< /head >
< body >
¹®¼ÀÇ ¸öü
ÀÌ°÷¿¡ ¹®¼ÀÇ ³»¿ëÀÌ Á¸Àç
:
:
< /body >
< /html > ------ HTML ¹®¼ÀÇ ³¡À» Ç¥½Ã
¡Ø ½ÇÁ¦ ¹®¼ÀÇ ³»¿ëÀº < body >¿Í < /body >·Î µÑ·¯½ÎÀÎ tag ³»¿¡ µé¾î°¡°Ô µÈ´Ù.
2. ¹®¼Á¦¸ñ - < Title > ... < /Title >
ºê¶ó¿ìÀúÀÇ »ó´Ü ŸÀÌƲ¹Ù(title bar)¿¡´Â ÇØ´ç ÆäÀÌÁöÀÇ Á¦¸ñ(title)ÀÌ ³ª¿À°Ô µÈ´Ù.
ÀÌ title¿¡ ÇØ´çÇÏ´Â ºÎºÐÀº HTML¹®¼ÀÇ < HEAD > tag »çÀÌ¿¡ ÀûÇôÁ®¾ß ÇÑ´Ù.
ÀÌ °÷¿¡´Â ¹®¼ÀÇ ³»¿ëÀ» °¡Àå Àß ³ªÅ¸³»´Â ¸î ´Ü¾î Á¤µµÀÇ Á¦¸ñÀ» »ç¿ëÇÏ¸é µÈ´Ù.
< html >
< head >
< title >ÁÖÀÏÀÌÀÇ È¨ÆäÀÌÁö< /title >
< /head >
< body >
< /body >
< /html >
< Title >ÁÖÀÏÀÌÀÇ È¨ÆäÀÌÁö< /Title >·Î ÀÔ·ÂµÈ ºÎºÐÀÌ À¥ºê¶ó¿ìÀú »ó´Ü¿¡ ³ªÅ¸³³´Ï´Ù.
¡Ø ¸Þ¸ðÀåÀ» »ç¿ëÇÏ¿© ȨÆäÀÌÁö ¸¸µé±â
1. [½ÃÀÛ]¢ºÇÁ·Î±×·¥¢ºº¸Á¶ÇÁ·Î±×·¥¢º¸Þ¸ðÀåÀ» ¼±ÅÃÇÏ¿© À©µµ¿ìÁîÀÇ ¸Þ¸ðÀåÀ» ½ÇÇà½Ãŵ´Ï´Ù.
HTML ¹®¹ý°ú ¹®¼ÀÇ ³»¿ëÀ» ÀÔ·ÂÇÕ´Ï´Ù.
2. ÀÔ·ÂÀÌ ³¡³ª¸é [ÆÄÀÏ]¢ºÀúÀåÀ» ¼±ÅÃÇÕ´Ï´Ù.
3. ÀúÀåȸéÀÌ ³ªÅ¸³ª¸é
ÆÄÀÏÀ̸§ : index.html
À¸·Î ÀÔ·ÂÇÏ°í [ÀúÀå]À» ¼±ÅÃÇÕ´Ï´Ù.
¡Ø À¥ºê¶ó¿ìÀú¿¡¼ ÀúÀåÇÑ HTMLÈÀÏ ºÒ·¯¿À±â
1. À¥ºê¶ó¿ìÀúÀÇ ¸Þ´ºÇ¥½ÃÁÙ¿¡¼ [ÆÄÀÏ]¢º¿±â ¸¦ ¼±ÅÃÇÕ´Ï´Ù.
2. '¿±â' ´ëÈ»óÀÚ¿¡¼ [ã¾Æº¸±â]¸¦ ¼±ÅÃÇÏ°í ¿øÇÏ´Â Æú´õ¿Í ÆÄÀÏÀ» ¼±ÅÃÇÑ ´ÙÀ½ [¿±â] Çϸé
ÆÄÀÏÀ» À¥ºê¶ó¿ìÀú·Î ÀоîµéÀÏ ¼ö ÀÖ½À´Ï´Ù.
¡Ø TagÀÇ ¼Ó¼º(attribute)
; Tag´Â < tag > ó·³ Ç¥ÇöµÇ¸ç ¸î°¡Áö ¼Ó¼ºÀ» Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù. ÀÌ·¯ÇÑ ¼Ó¼ºµéÀº ¸ðµÎ »ç¿ëÇؾß
ÇÏ´Â °ÍÀÌ ¾Æ´Ï¶ó º¯°æÇÏ°íÀÚ ÇÏ´Â °ÍÀ» ¼±ÅÃÀûÀ¸·Î »ç¿ëÇÏ¸é µÈ´Ù.
< Tag ¼Ó¼º="¼Ó¼º°ª" >
¿¹) ¸Ó¸´±ÛÀ» ³ªÅ¸³»´Â < h2 > tag¿¡´Â ´ÙÀ½°ú °°Àº ¼Ó¼ºÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù.
< h2 align="center" >ÀÌ ¸Ó¸´±ÛÀº °¡¿îµ¥·Î Á¤·ÄµÈ´Ù< /h2 >