Á¾Çվȳ» - óÀ½ ¾È³» - ±âÃÊÆí ¾È³» - ¹é¼ºÆí ¾È³» - °ü¸®Æí °ü¸®´Ü °Ô½ÃÆÇ


»çÀ̹ö Á¶¼±¿ÕÁ¶ Á¾ÇÕ ¾È³» - °Ô½ÃÆÇ ±â´É ¹× HTML ÅÂ±× ¼³¸í


* ÆĶõ»ö ±ÛÀÚ ºÎºÐÀº Ŭ¸¯ÇÒ ¼ö ÀÖ½À´Ï´Ù. '»çÁ¶ Áö½Ä(Q&A)', 'ÀæÀº Áú¹®(FAQ)', '°ü¸®´Ü(¿äû)' µîÀ» Âü°íÇϽñ⠹ٶø´Ï´Ù. *

¾Æ·¡´Â »çÀ̹ö Á¶¼±¿ÕÁ¶ÀÇ °Ô½ÃÆÇ ±â´É¿¡ ´ëÇÑ ¼³¸íÀÔ´Ï´Ù. »çÀÌÆ® ¸ÊÀº »ó´ÜÀÇ 'Àüü Áöµµ'¿¡ ÀÖ½À´Ï´Ù.
 

[1-1] °Ô½ÃÆÇ ±¸¼º

°Ô½ÃÆÇ ±¸¼º

* ÁÂÃø »ó´ÜÀÇ 'µµ±¸¸ðÀ½'À» ÅëÇØ Á¢¼Ó(·Î±×ÀÎ), ¹®¼­ Á¤·Ä, Ãâ·Â Çü½Ä ÁöÁ¤, ÂÊÁö È®ÀÎ µîÀ» ÇÒ ¼ö ÀÖ½À´Ï´Ù.

* À̸§À» Ŭ¸¯Çϸé 'È£ÆÐ'°¡ ¶ß°í, ´Ù½Ã È£ÆÐâÀÇ »çÁøÀ̳ª À̸§À» Ŭ¸¯ÇÏ¸é °³Àκ° '°ø°³Á¤º¸'¸¦ º¼ ¼ö ÀÖ½À´Ï´Ù. °ø°³Á¤º¸ È­¸é¿¡´Â '¹æ¸í·Ï', '»ç¶û¹æ', '¼­Àç' µîÀÇ °ø°£ÀÌ ¸¶·ÃµÇ¾î ÀÖ°í, 'ÀÌ¿ôµî·Ï'µµ ÇÒ ¼ö ÀÖ½À´Ï´Ù.

 

[1-2] ±Û ¾²±â

±Û ¾²±â (¹®¼­ µî·Ï)

* µµ¿ò¸»À» ³ªÅ¸³»´Â '(?)'À» Ŭ¸¯ÇÏ¸é °¢ ±â´É¿¡ ´ëÇÑ ¼³¸íÀ» º¼ ¼ö ÀÖ½À´Ï´Ù.

* ÆíÁý±â(Editor)¸¦ Ŭ¸¯ÇÏ¸é ´Ù¾çÇÑ ±â´ÉÀ» È°¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. Ç¥ ÀÛ¼º, À̹ÌÁö »ðÀÔ, ¸µÅ© µîÀÌ °¡´ÉÇÕ´Ï´Ù.

* ÆíÁý±â ¸ðµåÀÇ ±¸¼ºÀº ¾Æ·¡¿Í °°½À´Ï´Ù. ¿ª½Ã µµ¿ò¸» '(?)'À» Ŭ¸¯Çϸé ÀÚ¼¼ÇÑ ±â´ÉÀ» È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù.
   ÆíÁý±â(Editor)

* ºñ¹Ð¹®¼­ ÁöÁ¤Àº 'ºñ°ø°³ ÁöÁ¤ÇÔ'¿¡ üũÇÏ¸é µË´Ï´Ù. '¿¹¿Ü ¼³Á¤'À» ÅëÇØ ¿­¶÷ÀÚ¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.

 

 
¾Æ·¡´Â °Ô½Ã¹° ÀÛ¼º½Ã µµ¿òÀÌ µÇ´Â HTML ű׿¡ ´ëÇÑ ±âÃÊÀûÀÎ ¼³¸íÀÔ´Ï´Ù.

'HTML'Àº 'HyperText Markup Language'ÀÇ ¾àÀڷμ­, ÀÎÅͳݻóÀÇ ¹®¼­¸¦ ¸¸µé ¶§ »ç¿ëÇÏ´Â ÇÁ·Î±×·¡¹Ö ¾ð¾î °¡¿îµ¥ ÇϳªÀÔ´Ï´Ù. 'ű×(Tag)'´Â HTML¸¦ ±¸¼ºÇÏ´Â °¢°¢ÀÇ ¸í·É¾îÀÔ´Ï´Ù.

°Ë»ö »çÀÌÆ®¿¡¼­ 'HTML ű×', 'HTML ±âÃÊ ¹®¹ý' µîÀÇ °Ë»ö¾î·Î °Ë»öÇÏ¸é ¼ö¸¹Àº ¹®¼­µéÀ» Á¢ÇÒ ¼ö ÀÖ½À´Ï´Ù.
 

[2-1] HTML ¹®¹ýÀÇ ±âÃÊ

HTML ¹®¹ýÀº '½ÃÀÛ'°ú '¸¶¹«¸®' ºÎºÐÀ¸·Î µÇ¾î ÀÖ½À´Ï´Ù.

¿¹¸¦ µé¸é, '<HTML>' ·Î ½ÃÀÛÇßÀ¸¸é '</HTML>'·Î ¸¶¹«¸®ÇÏ´Â ½ÄÀÇ ´ëĪ ±¸Á¶¸¦ ¶ç°í ÀÖ½À´Ï´Ù.

ÀÎÅÍ³Ý ÀͽºÇ÷η¯ µîÀÇ À¥ ºê¶ó¿ìÀú¸¦ ÅëÇØ »çÀ̹ö Á¶¼±¿ÕÁ¶¿¡ Á¢¼ÓÇÑ ÈÄ, À¥ ºê¶ó¿ìÀú »ó´ÜÀÇ 'º¸±â' ¸Þ´º³ª ¸¶¿ì½º ¿À¸¥ÂÊ ¹öÆ°À» Ŭ¸¯ÇÑ ÈÄ '¼Ò½º º¸±â'¸¦ ¼±ÅÃÇÏ¸é ±¸Ã¼ÀûÀÎ HTML ÅÂ±× »ç¿ë·Ê¸¦ È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù.

±âº»ÀûÀ¸·Î ´ÙÀ½°ú °°Àº Çü½ÄÀ¸·Î µÇ¾î ÀÖ´Â °ÍÀ» ¾Ë ¼ö ÀÖ½À´Ï´Ù.

 
<html>
<head>
<title>»çÀ̹ö Á¶¼±¿ÕÁ¶</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
  ...
</body>
</html>
 

<html> ... </html>
<head> ... </head>
<title> ... </title>
<body> ... </body>

: HTML ¹®¼­¶ó´Â Ç¥½ÃÀÔ´Ï´Ù.
: ¹®¼­ ¸Ó¸®¸» ºÎºÐÀÔ´Ï´Ù. ¹®¼­ Á¤º¸¸¦ ´ã°í ÀÖ½À´Ï´Ù.
: ¹®¼­ Á¦¸ñÀÔ´Ï´Ù. head ÅÂ±× ¾È¿¡ À§Ä¡ÇÕ´Ï´Ù.
: ½ÇÁ¦ È­¸é¿¡ º¸¿©Áö´Â º»¹® ³»¿ëÀÔ´Ï´Ù.

Áï, º»¹®À» ÀÛ¼ºÇÏ´Â °ø°£Àº 'body' ºÎºÐÀÔ´Ï´Ù. º»¹®¿¡¼­ »ç¿ëµÇ´Â ÁÖ¿ä ű״ ´ÙÀ½°ú °°½À´Ï´Ù.

 
<br>
<hr>
<p> ... </p>
<div> ... </div>
<font size="2"> ... </font>
<font color="red"> ... </font>
<b> ... </b>
<u> ... </u>
<del> ... </del>
<a href="ÁÖ¼Ò"> ... </a>
<img src="ÁÖ¼Ò">
<table></table>
: ÁÙ ¹Ù²Þ
: ¼öÆò¼± (µÎ²² ¼³Á¤Àº <hr size="1"> µî)
: ¹®´Ü ±¸ºÐ
: ³»¿ë ºÐÇÒ
: ±ÛÀÚ Å©±â ÁöÁ¤
: ±ÛÀÚ »ö ÁöÁ¤
: °­Á¶ (¶Ç´Â <strong> ... </strong> »ç¿ë)
: ¹ØÁÙ
: »èÁ¦¼±
: ¹®¼­ ¸µÅ© (º» ¹®¼­ÀÇ 2-2 Ç׸ñ ÂüÁ¶)
: ±×¸²
: ǥ

ÆùÆ® ¼³Á¤¿¡¼­ '<font size="2" color="red"> ... </font>'ó·³ Å©±â¿Í »ö»óÀ» ÇÑ ¹ø¿¡ ¼³Á¤ÇÒ ¼öµµ ÀÖ½À´Ï´Ù.

À§ ÅÂ±× Áß¿¡¼­ '<p> ... </p>', '<div> ... </div>' ¿¡´Â 'align' ¿É¼ÇÀ» »ç¿ëÇÏ¿© Á¿ì Á¤·ÄÀ» ÇÒ ¼ö ÀÖ½À´Ï´Ù.

 
<p align="center"> ... </p>
<p align="left"> ... </p>
<p align="right"> ... </p>
<p align="justify"> ... </p>
<div align="center"> ... </div>
<div align="left"> ... </div>
<div align="right"> ... </div>
<div align="justify"> ... </div>
: Áß¾Ó(°¡¿îµ¥) Á¤·Ä
: ÁÂÃø(¿ÞÂÊ) Á¤·Ä
: ¿ìÃø(¿À¸¥ÂÊ) Á¤·Ä
: ¾çÂÊ ¸ÂÃã

Ç¥(table)ÀÇ ±¸¼º ÇüŸ¦ °£·«ÇÏ°Ô ¼³¸íÇÏ¸é ´ÙÀ½°ú °°½À´Ï´Ù.

 
<table>
<tr>
<td>
  ...
</td>
</tr>
</table>
: Ç¥ ½ÃÀÛ
: ÁÙ ½ÃÀÛ
: Ä­(¼¿) ½ÃÀÛ
: ³»¿ë
: Ä­ Á¾·á
: ÁÙ Á¾·á
: Ç¥ Á¾·á

Ç¥¿¡ »ç¿ëµÉ ¼ö ÀÖ´Â ¿É¼ÇÀº ´ÙÀ½°ú °°½À´Ï´Ù.

 
width
height
bgcolor
border
bordercolor
cellpadding
cellspacing
align
valign
colspan
rowspan
: Æø
: ³ôÀÌ
: ¹è°æ»ö
: ¼± µÎ²²
: ¼± »ö»ó
: Ä­(¼¿) ³»ºÎ ¿©¹é
: Ä­(¼¿) °£°Ý
: Á¿ì Á¤·Ä (center, left, right)
: »óÇÏ Á¤·Ä (top, middle, bottom)
: Ä­(¼¿) Á¿캴ÇÕ
: Ä­(¼¿) »óÇϺ´ÇÕ
: <table>, <td>¿¡¼­ »ç¿ë
: <table>, <td>¿¡¼­ »ç¿ë
: <table>, <td>¿¡¼­ »ç¿ë
: <table>¿¡¼­ »ç¿ë
: <table>¿¡¼­ »ç¿ë
: <table>¿¡¼­ »ç¿ë
: <table>¿¡¼­ »ç¿ë
: <table>, <td>¿¡¼­ »ç¿ë
: <td>¿¡¼­ »ç¿ë
: <td>¿¡¼­ »ç¿ë
: <td>¿¡¼­ »ç¿ë

¿¹¸¦ µé¾î ´ÙÀ½°ú °°Àº ű׷ΠµÈ Ç¥´Â ¿ìÃø°ú °°½À´Ï´Ù. Àß »ìÆ캸¸é Ç¥ ű×ÀÇ ±¸¼º°ú Çü½ÄÀ» ¾Ë ¼ö ÀÖ½À´Ï´Ù.

 
<table border="1" cellpadding="1" width="200">
   <tr>
      <td width="60">AAA</td>
      <td width="60">BBB</td>
      <td width="80">CCC</td>
   </tr>
   <tr>
      <td width="120" colspan="2" bgcolor="blue">
      <font color="white">ABC</font>
      </td>
      <td width="80" align="center">LMN<br>XYZ</td>
   </tr>
</table>
AAA BBB CCC
ABC LMN
XYZ

ÁÙ ½ÃÀÛÀÌ <tr>, Á¾·á°¡ </tr>À̹ǷÎ, Ç¥¿¡ ÇÑ ÁÙÀ» Ãß°¡ÇÏ·Á¸é <tr>...</tr> ºÎºÐÀ» º¹»çÇؼ­ ÇÊ¿äÇÑ ºÎºÐ(´Ù¸¥ °÷ÀÇ </tr> µÚ)¿¡ ºÙ¿©³Ö±â¸¦ ÇÏ¸é µË´Ï´Ù. ´Ü, Ä­ÀÇ Á¿캴ÇÕ, »óÇϺ´ÇÕÀÌ ÀÖÀ¸¸é Á¦´ë·Î Ç¥ÇöµÇÁö ¾Ê½À´Ï´Ù.

Æø°ú ³ôÀÌ´Â Çȼ¿(width="200")·Î Çصµ µÇ°í, ÀüüÀûÀÎ °ø°£¿¡¼­ÀÇ ÆÛ¼¾Æ®(width="100%")·Î Çصµ µË´Ï´Ù.

Ç¥, Ä­(¼¿), ±ÛÀÚ(ÆùÆ®) µî¿¡ »ö»óÀ» ¼³Á¤ÇÒ ¶§´Â, ±âº»ÀûÀÎ »öÀº ¿µ¾î ´Ü¾î·Î ±âÀçÇصµ µÇ°í(black, white, red, blue, green µî), RGB »ö»ó ÄÚµå·Î Ç¥½ÃÇصµ µË´Ï´Ù(°ËÀº»ö #000000, Èò»ö #FFFFFF, »¡°£»ö #FF0000 µî).

* °Ô½ÃÆÇÀÇ 'ÆíÁý±â(Editor) ¸ðµå'¿Í 'HTML ¼Ò½º ¸ðµå'¸¦ ¹ø°¥¾Æ °¡¸ç HTML ÅÂ±× »ç¿ëÀ» ¿¬½ÀÇØ º¸½Ê½Ã¿À.

* ±âÁ¸ÀÇ º»¹®À̳ª Ç¥¸¦ È°¿ëÇÏ·Á ÇÒ ¶§, ÀÌ·¯ÇÑ HTML ¹®¹ý(ű×ÀÇ '½ÃÀÛ'°ú '¸¶¹«¸®')¿¡ µû¶ó '¼Ò½º º¸±â'¿¡¼­ ÇÊ¿äÇÑ ºÎºÐÀ» º¹»çÇÏ¸é ¹®¼­ ÀÛ¼º½Ã ¿À·ù ¹ß»ýÀÌ ÃÖ¼ÒÈ­µË´Ï´Ù. HTML ¼Ò½º ¸ðµå¿¡¼­ ºÙ¿©³Ö±â ÇÏ¸é µË´Ï´Ù.

* ³ª¸ð, µå¸²À§¹ö, ÇÁ·ÐÆ®ÆäÀÌÁö µî°ú °°Àº À¥ ¿¡µðÅ͸¦ È°¿ëÇÏ¸é ¼Õ½±°Ô HTML ¹®¼­¸¦ ÆíÁýÇÒ ¼ö ÀÖ½À´Ï´Ù.

 

[2-2] °Ô½ÃÆÇ¿¡¼­ÀÇ HTML ÅÂ±× È°¿ë

±Û ¾²±â ±âº» ¸ðµå´Â 'TEXT + HTML'ÀÔ´Ï´Ù. Áï, ÀÏ¹Ý ÅؽºÆ®¿Í ±âº»ÀûÀÎ HTML ű׸¦ ¸ðµÎ ÀνÄÇϱ⠶§¹®¿¡, 'ÆíÁý±â(Editor)' ¸ðµå°¡ ¾Æ´Ï´õ¶óµµ ű׸¦ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. '¸µÅ©' ¹æ¹ýÀ» ¼³¸íÇÏ¸é ´ÙÀ½°ú °°½À´Ï´Ù.

1) ¹®¼­ ¸µÅ© : ÇöÀç È­¸é¿¡ ¿­¸®°Ô ÇÒ ¶§

 
<a href="ÁÖ¼Ò">À̸§</a>

2) ¹®¼­ ¸µÅ© : »õ·Î¿î âÀ¸·Î ¿­¸®°Ô ÇÒ ¶§

 
<a href="ÁÖ¼Ò" target="_blank">À̸§</a>

3) À̹ÌÁö ¸µÅ© : ±×¸²À̳ª »çÁøÀ» Ç¥½ÃÇÒ ¶§

 
<img src="À̹ÌÁö ÁÖ¼Ò">

»ç¿ë·Ê)

 
<a href="http://www.1392.org">»çÀ̹ö Á¶¼±¿ÕÁ¶</a>
<a href="http://www.1392.org" target="_blank">»çÀ̹ö Á¶¼±¿ÕÁ¶</a>
<img src="http://www.1392.org/1392grim/1392flag.gif">

4. ¹®¼­ ¶Ç´Â À̹ÌÁöÀÇ ÁÖ¼Ò È¹µæ ¹æ¹ý

 
1) ¹®¼­



2) À̹ÌÁö
¤¡) ¸µÅ©ÇÏ·Á´Â ¹®¼­ÀÇ 'ÆÄÀÏ'-'µî·ÏÁ¤º¸' ¶Ç´Â '¼Ó¼º'À» Ŭ¸¯ÇÑ ÈÄ, 'ÁÖ¼Ò(URL)' ºÎºÐÀ» º¹»ç
¤¤) ¸µÅ©ÇÏ·Á´Â ¹®¼­¿¡¼­ ¸¶¿ì½º ¿À¸¥ÂÊ ¹öÆ°À» Ŭ¸¯ÇÑ ÈÄ, 'µî·ÏÁ¤º¸' ¶Ç´Â '¼Ó¼º'À» ¼±ÅÃ
¤§) ¸µÅ©µÈ ¹®¼­ÀÏ °æ¿ì, ¸µÅ© ºÎºÐ¿¡ ¸¶¿ì½º ¿À¸¥ÂÊ ¹öÆ° ¼±Åà ÈÄ¿¡ '¹Ù·Î°¡±â º¹»ç' ¼±ÅÃ

¤¡) Ç¥½ÃÇÏ·Á´Â ±×¸²À» ¼±Åà ÈÄ, ¿À¸¥ÂÊ ¹öÆ°À¸·Î 'µî·ÏÁ¤º¸' ¶Ç´Â '¼Ó¼º'À» È®ÀÎ ¹× º¹»ç


5. ÆíÁý±â(Editor) È°¿ë
ÆíÁý±â(Editor)

* ¹®¼­Çü½ÄÀ» 'only TEXT'·Î ¼³Á¤Çϸé űװ¡ Àû¿ëµÇÁö ¾Ê½À´Ï´Ù. ÅÂ±× ³»¿ëÀÌ ±×´ë·Î È­¸é¿¡ Ãâ·ÂµË´Ï´Ù.

* HTML ű׷ΠµÈ ¹®¼­¸¦ ÀÔ·ÂÇÒ ¶§¿¡´Â ¹®¼­Çü½ÄÀ» 'only HTML'·Î ¼³Á¤ÇØ¾ß ¿À·ù ¹ß»ýÀÌ ÃÖ¼ÒÈ­µË´Ï´Ù.




µÚ·Î À̵¿