W3C15 Á¤·Ä, ÆùÆ® ½ºÅ¸ÀÏ°ú ¼öÆò ÁÙTrio ȨÆäÀÌÁö
¸ñÂ÷
  1. ¾ç½ÄÈ­(formatting)
    1. ¹è°æ»ö
    2. Á¤·Ä(alignment)
    3. À¯µ¿(float) ¿ÀºêÁ§Æ®
  2. ÆùÆ®(font)
    1. ÆùÆ® ½ºÅ¸ÀÏ ¿¤·¹¸àÆ®: TT, I, B, BIG, SMALL, STRIKE, S, U
    2. ÆùÆ® º¯°æÀÚ(modifier) ¿¤·¹¸àÆ®: FONT,BASEFONT
  3. ÁÙ(rule): HR ¿¤·¹¸àÆ®

ÀÌ Ç׸ñ¿¡¼­´Â ÀÌ ±Ô°ÝÀÇ º¸´Â(visual) ¿¤·¹¸àÆ®ÀÇ ¾ç½ÄÈ­(formatting)¿¡ »ç¿ë µÉ ¼ö ÀÖ´Â ÀϺΠHTML ¿¤·¹¸àÆ®(element)¿Í ¾ÖÆ®¸®ºäÆ®(attribute)µé¿¡ ´ëÇØ ¾Ë¾Æ º»´Ù. ÀÌ Áß ¸¹Àº °ÍÀÌ ºÒ·®ÇÑ °ÍÀÌ´Ù.

15.1 ¾ç½ÄÈ­(formatting)

15.1.1 ¹è°æ»ö

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

bgcolor = color [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¹®¼­ º»Ã¼(body) ¶Ç´Â Ç¥(table) Ä­(cell)ÀÇ ¹è°æ»öÀ» ÁöÁ¤ÇÑ´Ù.

ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¹®¼­ º»Ã¼(BODY ¿¤·¹¸àÆ®) ¶Ç´Â Ç¥(TABLE, TR, TH, TD ¿¤·¹¸àÆ®)ÀÇ ¹è°æ»öÀ» ÁöÁ¤ÇÑ´Ù. ±ÛÀÚ »ö»óÀ» ÁöÁ¤Çϱâ À§ ÇÑ Ãß°¡ÀûÀÎ ¾ÖÆ®¸®ºäÆ®¸¦ BODY¿¡ »ç¿ë ÇÒ ¼ö ÀÖ´Ù.

¹è°æ»ö Á¤º¸¸¦ ½ºÅ¸ÀϽ¬Æ®·Î ÁöÁ¤ ÇÒ ¼ö ÀÖÀ¸¹Ç·Î ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ºÒ·®ÇÑ °ÍÀÌ µÇ¾ú´Ù.

15.1.2 Á¤·Ä(alignment)

align ¾ÖÆ®¸®ºäÆ®·Î Ç¥(table), À̹ÌÁö, ¿ÀºêÁ§Æ®(object), ¹®´Üµé, µî ºí·°(block) ¿¤·¹¸àÆ®¸¦ È­¸é À§¿¡¼­ Á¤·ÄÀÌ °¡´ÉÇÏ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ¸¹Àº HTML ¿¤·¹¸àÆ®µéÀ» ¼³Á¤ ÇÒ ¼ö ÀÖÀ¸³ª, ¶§·Î´Â ¿¤·¹¸àÆ®¿¡ µû¶ó ±× °ªÀÇ °¡´É ÇÑ ¹üÀ§°¡ ´Ù¸£´Ù. ¿©±â¼­´Â ´ÜÁö ÅؽºÆ®¿¡¼­ align(Á¤·Ä) ¾ÖÆ®¸®ºäÆ®ÀÇ ÀÇ¹Ì ¸¸À» ¾Ë¾Æ º»´Ù.

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

align = left | center | right | justify [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ±× ÁÖÀ§ ³»¿ë¿¡ ´ë ÇÑ ¼öÆòÀûÀÎ Á¤·Ä À§Ä¡¸¦ ÁöÁ¤Çϸç, °¡´ÉÇÑ °ªÀº:
  • left: ÅؽºÆ® ¿­µéÀ» ¿ÞÂÊ¿¡ ºÙ¿© Ç¥Çö.
  • center: ÅؽºÆ® ¿­µéÀ» Áß¾Ó¿¡ Ç¥Çö.
  • right: ÅؽºÆ® ¿­µéÀ» ¿À¸¥ÂÊ¿¡ ºÙ¿© Ç¥Çö.
  • justify: ÅؽºÆ® ¿­µéÀ» ¾çÂÊ¿¡ ¸ÂÃß¾î Ç¥Çö.

µðÆúÆ®´Â ±âº» ±ÛÀÚ ¹æÇâ¿¡ µû¶ó ´Ù¸¥µ¥, ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·ÎÀÇ ÅؽºÆ®¿¡¼­ µðÆúÆ®´Â align=leftÀÌ°í, ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·ÎÀÇ ÅؽºÆ®¿¡¼­ µðÆúÆ®´Â align=rightÀÌ´Ù.

ºÒ·®ÇÑ ¿¹Á¦:
ÀÌ ¿¹Á¦´Â ÇìµùÀ» È­¸é Áß¾Ó¿¡ À§Ä¡½ÃÅ´.

<H1 align="center">³ª¹«¸¦ ¾î¶»°Ô È­¸é¿¡ ¹èÄ¡ ½ÃÅ°´Â°¡</H1>

¿¹¸¦ µé¾î, CSS¸¦ »ç¿ëÇÏ¿©, °°Àº È¿°ú¸¦ ³»·Á¸é ´ÙÀ½°ú °°´Ù.

<HEAD>
 <TITLE>³ª¹«¸¦ ¾î¶»°Ô È­¸é¿¡ ¹èÄ¡ ½ÃÅ°´Â°¡</TITLE>
 <STYLE type="text/css">
   H1 { text-align: center}
 </STYLE>
<BODY>
 <H1>³ª¹«¸¦ ¾î¶»°Ô È­¸é¿¡ ¹èÄ¡ ½ÃÅ°´Â°¡</H1>

¿©±â¼­ ¸ðµç H1 ¼±¾ðµéÀ» Áß¾Ó¿¡ ¹èÄ¡ ÇßÀ½À» ÁÖ½ÃÇ϶ó. ¿¤·¹¸àÆ®¿¡ class ¾ÖÆ®¸®ºäÆ®¸¦ ¼³Á¤ ÇÔÀ¸·Î¼­ ±× ½ºÅ¸ÀÏÀÇ Àû¿ë ¹üÀ§¸¦ ÁÙÀÏ ¼ö ÀÖ´Ù.

<HEAD>
 <TITLE>³ª¹«¸¦ ¾î¶»°Ô È­¸é¿¡ ¹èÄ¡ ½ÃÅ°´Â°¡</TITLE>
 <STYLE type="text/css">
   H1.wood {text-align: center}
 </STYLE>
<BODY>
 <H1 class="³ª¹«¸¦ ¾î¶»°Ô È­¸é¿¡ ¹èÄ¡ ½ÃÅ°´Â°¡</H1>

ºÒ·®ÇÑ ¿¹Á¦:
ÀÌ¿Í À¯»çÇÏ°Ô, HTMLÀÇ align ¾ÖÆ®¸®ºäÆ®·Î ¹®´ÜÀ» È­¸éÀÇ ¿À¸¥ÂÊ¿¡ Á¤·Ä½ÃÅ°·Á¸é:

 <P align="right">... ¹®´ÜÀÇ ÅؽºÆ® ...

CSS·Î´Â:

<HEAD>
 <TITLE>³ª¹«¸¦ ¾î¶»°Ô È­¸é¿¡ ¹èÄ¡ ½ÃÅ°´Â°¡</TITLE>
 <STYLE type="text/css">
   P.mypar {text-align: right}
 </STYLE>
<BODY>
 <P class="mypar">... ¹®´ÜÀÇ ÅؽºÆ® ...

ºÒ·®ÇÑ ¿¹Á¦:
ÀÏ·ÃÀÇ ¹®´ÜµéÀ» ¿À¸¥ÂÊ¿¡ Á¤·Ä ÇÏ·Á¸é, DIV ¿¤·¹¸àÆ®·Î ±×µéÀ» ±¸·ìÁö¿î´Ù.

<DIV align="right">
 <P>... ÅؽºÆ®ÀÇ Ã¹¹ø° ¹®´Ü ...
 <P>... ÅؽºÆ®ÀÇ µÎ¹ø° ¹®´Ü ...
 <P>... ÅؽºÆ®ÀÇ ¼¼¹ø° ¹®´Ü ...
</DIV>

CSS·Î, ÅؽºÆ® Á¤·Ä Ư¼ºÀº ¸ðü(parent) ¿¤·¹¸àÆ®·Î ºÎÅÍ Àü´Þ(inherite) µÇ¹Ç·Î, ´ÙÀ½°ú °°ÀÌ »ç¿ë ÇÒ ¼ö ÀÖ´Ù.

<HEAD>
 <TITLE>³ª¹«¸¦ ¾î¶»°Ô È­¸é¿¡ ¹èÄ¡ ½ÃÅ°´Â°¡</TITLE>
 <STYLE type="text/css">
   DIV.mypars {text-align: right}
 </STYLE>
<BODY>
 <DIV class="mypars">
   <P>...ÅؽºÆ®ÀÇ Ã¹¹ø° ¹®´Ü ...
   <P>...ÅؽºÆ®ÀÇ µÎ¹ø° ¹®´Ü ...
   <P>...ÅؽºÆ®ÀÇ ¼¼¹ø° ¹®´Ü ...
 </DIV>

Àüü ¹®¼­¸¦ Áß¾Ó¿¡ ¹èÄ¡Çϱâ À§ÇÏ¿©, CSS·Î:

<HEAD>
 <TITLE>³ª¹«¸¦ ¾î¶»°Ô È­¸é¿¡ ¹èÄ¡ ½ÃÅ°´Â°¡</TITLE>
 <STYLE type="text/css">
   BODY {text-align: center}
 </STYLE>
<BODY>
 ... º»Ã¼(body)°¡ Áß¾Ó¿¡ ¹èÄ¡µÈ´Ù...
</BODY>

CENTER ¿¤·¹¸àÆ®´Â DIV ¿¤·¹¸àÆ®¿¡ align ¾ÖÆ®¸®ºäÆ®¸¦ "center"·Î ÁöÁ¤ ÇÑ °Í°ú ²À °°´Ù. ÀÌ CENTER ¿¤·¹¸àÆ®´Â ºÒ·®ÇÑ °ÍÀÌ´Ù.

15.1.3 À¯µ¿(float) ¿ÀºêÁ§Æ®

À̹ÌÁö¿Í ¿ÀºêÁ§Æ®´Â ÀζóÀο¡ Á÷Á¢ ±âÀçÇÒ ¼ö ÀÖ°í, ¶Ç´Â ÀÓ½ÃÀûÀ¸·Î ¿ÀºêÁ§Æ®ÀÇ ¾ç ÂÊÀ¸·Î À¯µ¿ µÉ ¼ö ÀÖ´Â ÅؽºÆ®´Â Å׵θ®¿¡ ´ëÇØ ÆäÀÌÁöÀÇ ÇÑ ÂÊ¿¡ À¯µ¿µÇ¾î ³ªÅ¸³¯ ¼ö ÀÖ´Ù.

¿ÀºêÁ§Æ® À¯µ¿(float)

¿ÀºêÄÊÆ®, À̹ÌÁö, Ç¥(table), ÇÁ·¹ÀÓ(frame) µîÀÇ align ¾ÖÆ®¸®ºäÆ®´Â ¿ÀºêÁ§Æ®¸¦ ¿ÞÂÊ È¤Àº ¿À¸¥ÂÊ Å׵θ®·Î À¯µ¿ÇÏ°ÔÇÑ´Ù. ¿ÀºêÁ§Æ® À¯µ¿(float)Àº ÀϹÝÀûÀ¸·Î »õ ¿­(line)¿¡¼­ ½ÃÀÛÇÑ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ´ÙÀ½ °ªÀ» °®´Â´Ù.

ºÒ·®ÇÑ ¿¹Á¦:
´ÙÀ½ ¿¹Á¦´Â ¾î¶»°Ô IMG ¿¤·¹¸àÆ®°¡ È­¸éÀÇ ÇöÀç ¿ÞÂÊ Å׵θ®·Î À¯µ¿(float)Çϴ°¡¸¦ º¸¿© ÁØ´Ù.

 <IMG align="left" src="http://foo.com/animage.gif" alt="my boat">

ÀϺΠÁ¤·Ä ¾ÖÆ®¸®ºäÆ®(attribute)´Â °ª "center"µµ Çã¿ëÇϴµ¥, ÀÌ´Â À¯µ¿(float) ½ÃÅ°Áö ¾Ê°í, ¿ÀºêÁ§Æ®¸¦ ÇöÀç Å׵θ®µéÀÇ Áß¾Ó¿¡ À§Ä¡ ½ÃŲ´Ù. ±×·¯³ª, P¿Í DIV¿¡¼­, °ª "center"´Â ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ» Áß¾Ó¿¡ À§Ä¡½ÃŲ´Ù.

¿ÀºêÁ§Æ® ÁÖÀ§ÀÇ ÅؽºÆ® À¯µ¿

BR ¿¤·¹¸àÆ®¸¦ ÁöÁ¤ÇÏ´Â ¾ÖÆ®¸®ºäÆ®´Â ¿ÀºêÁ§Æ®(object) ÁÖÀ§ÀÇ ÅؽºÆ® È帧À» Á¦¾îÇÑ´Ù.

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

clear = none | left | right | all [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© »ý±ä ÁٹٲÞ(line break) ´ÙÀ½, º¸´Â ºê¶ó¿ìÀú°¡ ´ÙÀ½ ¿­(line)À» ¾îµð¿¡ ³ªÅ¸ ³»¾ß Çϴ°¡¸¦ ÁöÁ¤ÇÑ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â À̹ÌÁö, Ç¥(table), µî ¿ÀºêÁ§Æ®¸¦ À¯µ¿À» ½ÃŲ´Ù. °¡´ÉÇÑ °ªÀº:
  • none: ´ÙÀ½ ¿­(line)ÀÌ Á¤»óÀûÀ¸·Î ½ÃÀ۵ȴÙ. µðÆúÆ® °ªÀÌ´Ù.
  • left: ´ÙÀ½ ¿­ÀÌ À¯µ¿ ¿ÀºêÁ§Æ® ´ÙÀ½ ¿­ ¿ÞÂÊ Å׵θ®¿¡¼­ ½ÃÀ۵ȴÙ.
  • right: ´ÙÀ½ ¿­ÀÌ À¯µ¿ ¿ÀºêÁ§Æ® ´ÙÀ½ ¿­ ¿À¸¥ÂÊ Å׵θ®¿¡¼­ ½ÃÀ۵ȴÙ.
  • all: ´ÙÀ½ ¿­ÀÌ À¯µ¿ ¿ÀºêÁ§Æ® ´ÙÀ½ ¿­ ¾ç ÂÊ Å׵θ®µé »çÀÌ¿¡¼­ ½ÃÀ۵ȴÙ.

´ÙÀ½ º¸´Â ¾¾³ª¸®¿À(scenario)¿¡¼­, ÅؽºÆ®´Â BR¿¡ ÀÇÇÏ¿© ¿­ÀÌ ¹Ù²ð ¶§ ±îÁö À̹ÌÁöÀÇ ¿À¸¥ÂÊÀ» È帥´Ù.

*********  -------
|       |  -------
| image |  --<BR>
|       |
*********

¸¸ÀÏ clear ¾ÖÆ®¸®ºäÆ®°¡ noneÀ¸·Î ¼³Á¤µÇ¸é, BR ´ÙÀ½ ¿­Àº À̹ÌÁöÀÇ ¿À¸¥ÂÊ Å׵θ®ÀÇ ¹Ù·Î ¾Æ·¡¼­ ½ÃÀ۵ȴÙ.

*********  -------
|       |  -------
| image |  --<BR>
|       |  ------
*********

ºÒ·®ÇÑ ¿¹Á¦:
¸¸ÀÏ ¾ÖÆ®¸®ºäÆ® clear°¡ left ¶Ç´Â all·Î ¼³Á¤µÇ¸é, ´ÙÀ½ ¿­Àº ¾Æ·¡ 󷳵ȴÙ.

*********  -------
|       |  -------
| image |  --<BR clear="left">
|       |
*********
-----------------

½ºÅ¸ÀϽ¬Æ®¸¦ »ç¿ëÇÏ¿©, ¸ðµç ÁٹٲÞ(line break)µéÀÌ ¿ÞÂÊ Å׵θ®(margin)¿¡ ´ëÇØ À¯µ¿ÇÏ´Â À̹ÌÁö, Ç¥, µîÀ» ÀÌ ¿ÀºêÁ§Æ®ÀÇ ¹æ½ÄÀ¸·Î ÀÛ¿ëÇϵµ·Ï ÁöÁ¤ ÇÒ ¼ö ÀÖ´Ù. CSS·Î À̸¦ ´ÙÀ½°ú °°ÀÌ ÇÒ ¼ö ÀÖ´Ù.

<STYLE type="text/css">
 BR { clear: left }
</STYLE>

ÀÌ ÀÛ¿ëÀ» ƯÁ¤ BR ¿¤·¹¸àÆ®¿¡ ¼³Á¤Çϱâ À§ÇÏ¿©, ½ºÅ¸ÀÏ Á¤º¸¿Í id ¾ÖÆ®¸®ºäÆ®¸¦ °áÇÕ ÇÒ ¼ö ÀÖ´Ù.

<HEAD>
 ...
 <STYLE type="text/css">
   BR#mybr { clear: left }
 </STYLE>
</HEAD>
<BODY>
<P>...
*********  -------
|       |  -------
| table |  --<BR id="mybr">
|       |
*********
-----------------
...
</BODY>

15.2 ÆùÆ®(font)

´ÙÀ½ HTML ¿¤·¹¸àÆ®µéÀº ÆùÆ® Á¤º¸¸¦ ÁöÁ¤ÇÑ´Ù. ±×°ÍµéÀÌ ¸ðµÎºÒ·®ÇÑ °ÍÀº ¾Æ´ÏÁö¸¸, À̵éÀÇ »ç¿ëº¸´Ù´Â ½ºÅ¸ÀϽ¬Æ®¸¦ »ç¿ëÇÏ´Â °ÍÀÌ ÁÁ´Ù.

15.2.1 ÆùÆ® ½ºÅ¸ÀÏ ¿¤·¹¸àÆ®:
    TT, I, B, BIG, SMALL, STRIKE, S, U

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle; | %phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle; | %phrase;)
 %attrs;                              -- %coreattrs, %i18n, %events --
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: ÇÊ¿ä ÇÔ

´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

ÆùÆ®(font) ½ºÅ¸ÀÏ(style) ¿¤·¹¸àÆ®ÀÇ Ç¥ÇöÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù. ´ÙÀ½Àº Âü°í ¸¸À» À§ÇÑ ¼³¸íÀÌ´Ù.

TT: ÅÚ·¹Å¸ÀÌÇÁ(teletype)³ª ±ÛÀÚ °£°ÝÀÌ ÀÏÁ¤ÇÑ(monospace) ÅØƮƮ¸¦ Ç¥Çö.
I: ÀÌŸ¯(italic) ÅؽºÆ® ½ºÅ¸ÀϷΠǥÇö.
B: ±½Àº(bold) ÆùÆ® ½ºÅ¸ÀϷΠǥÇö.
BIG: Å« ±ÛÀڷΠǥÇö.
SMALL: ÀÛÀº ±ÛÀڷΠǥÇö.
STRIKE¿Í S: ºÒ·®ÇÑ °ÍÀÌ´Ù. »èÁ¦ Ç¥½Ã(strike-through) ½ºÅ¸ÀÏ Ç¥Çö.
U: ºÒ·®ÇÑ °ÍÀÌ´Ù. ¹ØÁ٠ģ(underlined) ±ÛÀڷΠǥÇö.

´ÙÀ½ ¹®ÀåÀº ¿©·¯ ÅؽºÆ® ŸÀÔµéÀ» º¸¿© ÁØ´Ù.

<P><b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small> text.

ÀÌ ´Ü¾îµéÀº ´ÙÀ½°ú °°ÀÌ Ç¥ÇöµÈ´Ù.

´Ù¾çÇÑ ÆùÆ® ½ºÅ¸ÀÏÀ» Ç¥Çö ÇÑ ¿¹Á¦

½ºÅ¸ÀϽ¬Æ®(style sheet)¸¦ »ç¿ëÇÏ¿© ÈξÀ dzºÎÇÏ°í ´Ù¾çÇÑ È¿°ú¸¦ ³»´Â °ÍÀÌ °¡´ÉÇÏ´Ù. CSS·Î Ǫ¸¥»öÀÇ ÀÌŸ¯ ÅؽºÆ®·Î ¹®´ÜÀ» ÁöÁ¤ÇÏ·Á¸é:

<HEAD>
 <STYLE type="text/css">
   P.mypar {font-style: italic; color: blue}
 </STYLE>
</HEAD>
<P id="mypar">... Ǫ¸¥»öÀÇ ÀÌŸ¯ ÅؽºÆ® ...

ÆùÆ® ½ºÅ¸ÀÏ ¿¤·¹¸àÆ®µéÀº ÀûÁ¤ÇÏ°Ô ³×½ºÆÃ(nest) µÇ¾î¾ß ÇÑ´Ù. ³×½ºÆà µÈ ÆùÆ® ½ºÅ¸ÀÏÀÇ Ç¥ÇöÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù.

15.2.2 ÆùÆ® º¯È¯(modifier) ¿¤·¹¸àÆ®: FONT, BASEFONT

FONT¿Í BASEFONT´Â ºÒ·®ÇÑ °ÍÀÌ´Ù.

º¯ÀÌ(transitional) DTDÀÇ °ø½ÄÀû Á¤ÀǸ¦ ÂüÁ¶Ç϶ó.

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

size = cdata [´ë¼Ò¹®ÀÚ Á߸³: CN]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÆùÆ®(font)ÀÇ Å©±â¸¦ ÁöÁ¤Çϸç, °¡´ÉÇÑ °ªÀº:
  • 1°ú 7 »çÀÌ Á¤¼ö·Î ÆùÆ®¸¦ °íÁ¤ Å©±â·Î ¼³Á¤Çϴµ¥, »ç¿ëµµ±¸¿¡ µû¶ó Ç¥ÇöÀÌ ´Ù¸¦ ¼ö ÀÖ°í, ¸ðµç 7 ±Ô°ÝÀ» Ç¥ÇöÇÏÁö ¸øÇÏ´Â »ç¿ëµµ±¸µµ ÀÖ´Ù.
  • ÆùÆ® Å©±âÀÇ »ó´ëÀûÀÎ Áõ°¡. ±× °ªÀÌ "+1"À̸é ÇÑ ´Ü°è Å« ±ÛÀÚÀÌ°í, ±× °ªÀÌ "-3"ÀÌ¸é ¼¼ ´Ü°è ÀÛÀº ±ÛÀÚÀÌ¸ç ¸ðµç ±ÛÀÚ Å©±â´Â 1°ú 7 »çÀÌÀÇ °ªÀÌ´Ù.
color = color [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ±ÛÀÚ »ö»óÀ» ÁöÁ¤ÇÑ´Ù.
face = cdata [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â »ç¿ëµµ±¸°¡ ¼øÀ§¿¡ µû¶ó °Ë»öÇÏ¿©¾ß ÇÏ´Â Äĸ¶·Î ºÐ¸®µÈ ÆùÆ® À̸§µéÀÇ ¸ñ·ÏÀ» ÁöÁ¤ÇÑ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

FONT ¿¤·¹¸àÆ®´Â ±× ³»¿ëÀÇ ÅؽºÆ® ÆùÆ® Å©±â¿Í »ö»óÀ» º¯°æ½ÃŲ´Ù.

BASEFONT ¿¤·¹¸àÆ®´Â size ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇÏ¿© ±âº» ÆùÆ® Å©±â¸¦ ¼³Á¤ÇÑ´Ù. FONT·Î ÆùÆ® Å©±â¸¦ º¯°æÇϸé, BASEFONT·Î ¼³Á¤ÇÑ ±âº» ÆùÆ® Å©±â¿¡ »ó´ëÀûÀÎ °ÍÀÌ ¾ò¾îÁø´Ù. ¸¸ÀÏ BASEFONT°¡ ÁöÁ¤µÇÁö ¾Ê¾ÒÀ¸¸é, µðÆúÆ® ±âº» ÆùÆ® Å©±â´Â 3ÀÌ´Ù.

ºÒ·®ÇÑ ¿¹Á¦:
´ÙÀ½ ¿¹Á¦´Â FONT¿¡¼­ »ç¿ë ÇÒ ¼ö ÀÖ´Â 7 ÆùÆ® Å©±âµé »çÀÌÀÇ Â÷ÀÌ°¡ º¸¿© ÁØ´Ù.

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

ÀÌ´Â ´ÙÀ½°ú °°ÀÌ Ç¥Çö µÉ °ÍÀÌ´Ù.

´Ù¾çÇÑ ÆùÆ® Å©±âµé·Î Ç¥Çö µÈ ¿¹Á¦

´ÙÀ½Àº ±âº» ÆùÆ® Å©±â 3¿¡¼­ ºÎÅÍ »ó´ëÀûÀÎ ÆùÆ® Å©±âµéÀÇ È¿°ú¸¦ º¸¿©ÁÖ´Â ¿¹Á¦ÀÌ´Ù.

±âº» ÆùÆ®·Î ºÎÅÍ ´Ù¾çÇÑ ÆùÆ® Å©±âµéÀ» Ç¥Çö ÇÑ ¿¹Á¦

±âº» ÆùÆ® Å©±â´Â FONT ¿¤·¹¸àÆ®¸¦ »ó´ëÀûÀÎ ÆùÆ® Å©±â º¯°æÀ¸·Î »ç¿ëÇÏ¿© º¯°æ ½ÃÄ×À» ¶§ ¿Ü¿¡´Â, Çìµù(heading)¿¡ Àû¿ëµÇÁö ¾Ê´Â´Ù.

15.3 ÁÙ(rule): HR ¿¤·¹¸àÆ®

<!ELEMENT HR - O EMPTY -- ¼öÆò ÁÙ(rule) -->
<!ATTLIST HR
 %coreattrs;                          -- id, class, style, title --
 %events;
>

½ÃÀÛű×: ÇÊ¿ä ÇÔ, Á¾·áű×: »ç¿ë ±ÝÁö

¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ

align = left | center | right [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÁÙÀÇ ÁÖÀ§ ³»¿ë¿¡ ´ë ÇÑ ¼öÆò Á¤·ÄÀ» ÁöÁ¤Çϸç, °¡´É ÇÑ °ªÀº:
  • left: ÁÙÀ» ¿ÞÂÊ¿¡ ºÙ¿© Ç¥Çö.
  • center: ÁÙÀ» Áß¾Ó¿¡ Ç¥Çö.
  • right: ÁÙÀ» ¿À¸¥ÂÊ¿¡ ºÙ¿© Ç¥Çö.

µðÆúÆ®´Â align=centerÀÌ´Ù.

noshade [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ°ÍÀÌ ¼³Á¤µÇ¸é, ÀÌ ºÒ¸°(boolean) ¾ÖÆ®¸®ºäÆ®´Â »ç¿ëµµ±¸¿¡°Ô ÀüÅëÀûÀÎ µÎ »ö»óÀÇ ÁÙ("groove") ´ë½Å ÁÙÀ» ±½Àº(solid) »ö»óÀ¸·Î Ç¥ÇöÇÑ´Ù.
size = pixels [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÁÙÀÇ ³ôÀ̸¦ ÁöÁ¤ÇÑ´Ù. µðÆúÆ® °ªÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù.
width = length [´ë¼Ò¹®ÀÚ ±¸º° ¾øÀÌ: CI]
ºÒ·®ÇÑ °ÍÀÌ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÁÙÀÇ ³Êºñ¸¦ ÁöÁ¤ÇÑ´Ù. µðÆúÆ® ³Êºñ´Â 100%, ¸»ÇÏÀÚ¸é ÁÙÀÌ ÀüüÀÇ È­¸é¿¡ ¸Â°Ô È®ÀåµÈ´Ù.
´Ù¸¥ °÷¿¡¼­ Á¤ÀÇ µÈ ¾ÖÆ®¸®ºäÆ®

HR ¿¤·¹¸àÆ®´Â º¸´Â »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© ¼öÆò ÁÙÀ» Ç¥ÇöÇÑ´Ù.

ÁÙ°ú ÁÖÀ§ÀÇ ³»¿ë »çÀÌ¿¡ »ðÀԵǴ ¼öÁ÷ °ø°£ÀÇ ¾çÀº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£´Ù.

ºÒ·®ÇÑ ¿¹Á¦:
ÀÌ ¿¹Á¦´Â °¡¿ë Å׵θ®ÀÇ ³ÊºñÀÇ ¹ÝÀ¸·Î ÁÙµéÀº Áß¾Ó¿¡ ¿À·Î·Ï ÇÑ °ÍÀÌ´Ù. ¸Ç À§ÀÇ ÁÙÀº µðÆúÆ® µÎ²²¸¦ °¡Áø °ÍÀÌ°í, ¾Æ·¡ µÎ°³´Â 5 Çȼ¿(pixel)·Î ¼³Á¤ µÈ °ÍÀÌ´Ù. Á¦ÀÏ ¾Æ·¡ ÁÙÀº ±×¸²ÀÚ(shading) ¾øÀÌ ±½Àº(solid) »öÀ¸·Î Ç¥Çö µÇ¾ú´Ù.

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">
ÀÌ ÁÙµéÀº ´ÙÀ½°ú °°ÀÌ Ç¥Çö µÉ °ÍÀÌ´Ù.

´Ù¾çÇѼöÆò ÁÙµéÀÇ Ç¥Çö ¿¹Á¦


ÀÌ Trio ȨÆäÀÌÁö ¹®¼­(http://trio.co.kr/webrefer/html40/present/graphics.html)´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.