W3C10 º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨ ¼¼ºÎ»çÇ×Trio ȨÆäÀÌÁö 

¸ñÂ÷

10.1 "¿ë±âºí·°(containing block)"ÀÇ Á¤ÀÇ

¿¤·¹¸àÆ®ÀÇ ¹Ú½º(box)µéÀÇ À§Ä¡¿Í Å©±â´Â ¶§·Î´Â ¾î¶² ³×¸ð²Ã¿¡ »ó´ëÀûÀ¸·Î °è»êµÈ´Ù. À̶§ ±× ³×¸ð²ÃÀ» ±× ¿¤·¹¸àÆ®ÀÇ ¿ë±âºí·°(containing block)À̶ó ÇÑ´Ù. ¿¤·¹¸àÆ®ÀÇ ¿ë±âºí·°´Â ´ÙÀ½°ú °°ÀÌ Á¤ÀǵȴÙ:

  1. ±× ¾È¿¡ ÃÖ»óÀ§(root) ¿¤·¹¸àÆ®°¡ ÀÖ´Â, ÃÖÃÊ ¿ë±âºí·°·Î ºÒ¸®¿ì´Â, ¿ë±âºí·°´Â »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© ¼±ÅõȴÙ.
  2. ´Ù¸¥ ¿¤·¹¸àÆ®µé¿¡¼­, ±× ¿¤·¹¸àÆ®°¡ Àý´ëÀûÀ¸·Î À§Ä¡µÈ °ÍÀÌ ¾Æ´Ï¸é, ¿ë±âºí·°´Â °¡Àå °¡±î¿î ºí·°·¹º§(block-level) Á¶»ó ¹Ú½ºÀÇ ±× ³»¿ëÀÇ ¸ð¼­¸®¿¡ ÀÇÇÏ¿© Çü¼ºµÈ´Ù.
  3. ¿¤·¹¸àÆ®°¡ 'position: fixed'¸¦ °¡Áö¸é, ºäÆ÷ÀÎÆ®(viewport)¿¡ ÀÇÇÏ¿© ¿ë±âºí·°ÀÌ Çü¼ºµÈ´Ù.
  4. ¿¤·¹¸àÆ®°¡ 'position: absolute'¸¦ °¡Áö¸é, ¿ë±âºí·°Àº, 'static' ÀÌ¿ÜÀÇ 'position'À» °®´Â, °¡Àå °¡±î¿î Á¶»ó(ancestor)¿¡ ÀÇÇÏ¿© ´ÙÀ½°ú °°ÀÌ Çü¼ºµÈ´Ù:
    1. Á¶»óÀÌ ºí·°·¹º§À̸é, ¿ë±âºí·°Àº Á¶»óÀÇ Æеù(padding) ¸ð¼­¸®¿¡ ÀÇÇÏ¿© Çü¼ºµÈ´Ù.
    2. Á¶»óÀÌ ÀζóÀÎ(inline-level)À̸é, ¿ë±âºí·°Àº Á¶»óÀÇ 'direction' ¼Ó¼º¿¡ µû¸¥´Ù:
      1. 'direction'ÀÌ 'ltr'À̸é, ¿ë±âºí·°ÀÇ ¸ÇÀ§ ¿ÞÂÊÀº Á¶»ó¿¡ ÀÇÇÏ¿© Çü¼ºµÈ ù¹ø° ¹Ú½º ¸ÇÀ§ ¿ÞÂÊ ³»¿ë ¸ð¼­¸®µéÀÌ°í, ¹Ù´Ú ¿À¸¥ÂÊÀº Á¶»óÀÇ ¸¶Áö¸· ¹Ú½º ¹Ù´Ú ¿À¸¥ÂÊ ³»¿ë ¸ð¼­¸®µéÀÌ´Ù.
      2. 'direction'ÀÌ 'rtl'À̸é, ¸ÇÀ§ ¿À¸¥ÂÊÀº Á¶»ó¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ù° ¹Ú½º ¸ÇÀ§ ¿À¸¥ÂÊ ¸ð¼­¸®ÀÌ°í, ¹Ù´Ú ¿ÞÂÊÀº Á¶»ó¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ¸¶Áö¸· ¹Ú½ºÀÇ ¹Ù´Ú ¿ÞÂÊÀÌ´Ù.

    ±×·± Á¶»óÀÌ ¾øÀ¸¸é, ÃÖ»óÀ§(root) ¿¤·¹¸àÆ®ÀÇ ¹Ú½ºÀÇ ³»¿ë ¸ð¼­¸®´Â ¿ë±âºí·°À» Çü¼ºÇÑ´Ù.

¿¹Á¦:

´ÙÀ½ ¹®¼­¿¡¼­ ¿ë±âºí·°(containing block: C.B.)µéÀº À§Ä¡µÇÁö´Â ºÎºÐÀÌ ¾ø´Ù:

<HTML>
  <HEAD>
    <TITLE>¿ë±âºí·°ÀÇ ¼³¸í</TITLE>
  </HEAD>
  <BODY id="body">
  <DIV id="div1">
  <P id="p1">ù¹ø° ¹®´ÜÀÇ ÅؽºÆ®...</P>
  <P id="p2">ÅؽºÆ® <EM id="em1">´Â
  <STRONG id="strong1">µÎ¹ø°</STRONG>¹®´Ü¿¡ ÀÖ´Ù.</EM></P>
  </DIV>
  </BODY>
</HTML>

´ÙÀ½°ú °°ÀÌ Çü¼ºµÈ´Ù:

...¿¡ ÀÇÇØ »ý¼ºµÈ ¹Ú½º ...¿¡ ÀÇÇÏ¿© ¿ë±âºí·°ÀÌ Çü¼ºµÊ
bodyÃÖÃÊ ¿ë±âºí·°(»ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸§)
div1body
p1div1
p2div1
em1p2
strong1p2

"div1"À» À§Ä¡½ÃÅ°¸é:

#div1 { position: absolute; left: 50px; top: 50px }

±× ¿ë±âºí·°Àº ´õ ÀÌ»ó "body"°¡ ¾Æ´Ï´Ù; ´Ù¸¥ À§Ä¡µÈ(positioned) Á¶»ó(ancestor) ¹Ú½ºµéÀÌ ¾øÀ¸¹Ç·Î, ÀÌ´Â ÃÖÃÊ(initial) ¿ë±âºí·°ÀÌ µÈ´Ù.

"em1"µµ À§Ä¡½ÃÅ°¸é:

#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }

¿ë±âºí·°(containing block)µéÀÇ Å×À̺í´Â ´ÙÀ½°ú °°ÀÌ µÈ´Ù:

...¿¡ ÀÇÇØ »ý¼ºµÈ ¹Ú½º ...¿¡ ÀÇÇÏ¿© ¿ë±âºí·°ÀÌ Çü¼ºµÊ
bodyÃÖÃÊ ¿ë±âºí·°.
div1ÃÖÃÊ ¿ë±âºí·°.
p1div1
p2div1
em1div1
strong1em1

"em1"À» À§Ä¡½ÃÅ´À¸·Î¼­, ±×ÀÇ ¿ë±âºí·°Àº °¡Àå °¡±î¿î À§Ä¡µÈ Á¶»ó ¹Ú½º°¡ µÈ´Ù("div1"¿¡ ÀÇÇÏ¿© »ý¼ºµÈ).

10.2 ³»¿ë ³Êºñ(content width): 'width' ¼Ó¼º

'width'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | auto | inherit
ÃÖÃÊ°ª:  auto
Àû¿ë:  ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ ¿¤·¹¸àÆ®, Å×À̺íÀÇ ÁÙ°ú ÁÙ ±¸·ìÀ» Á¦¿ÜÇÑ ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°(block)ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ºí·°·¹º§°ú ´ëüµÈ(replaced) ¿¤·¹¸àÆ®µé¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ¹Ú½ºÀÇ ³»¿ë ³Êºñ¸¦ ÁöÁ¤ÇÑ´Ù.

ÀÌ ¼Ó¼ºÀº ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ(inline-level) ¿¤·¹¸àÆ®µé¿¡´Â Àû¿ëµÇÁö ¾Ê´Â´Ù. ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ(inline) ¿¤·¹¸àÆ®ÀÇ ¹Ú½ºµéÀÇ ³Êºñ´Â ±× ¾È¿¡ Ç¥ÇöµÇ´Â ³»¿ëÀÇ, ÀÚ½Ä(child)µé¿¡¼­ ¾î¶² »ó´ëÀûÀÎ ¿ÀÇÁ¼¼Æ®(offset)°¡ µÇ±â ÀÌÀüÀÇ ³Êºñ´Ù. ÀζóÀÎ ¹Ú½º(inline box)µéÀÌ ¶óÀÎ ¹Ú½ºµé ¾È¿¡ È帧À» »ó±â½ÃŲ´Ù. ¶óÀÎ ¹Ú½ºµéÀÇ ³Êºñ´Â ±×µéÀÇ ¿ë±âºí·°¿¡ ÀÇÇÏ¿© ÁÖ¾îÁöÁö ¸¸, À¯µ¿(float)ÀÌ ÀÖÀ¸¸é ª¾Æ Áú ¼ö ÀÖ´Ù.

´ëüµÈ ¿¤·¹¸àÆ®ÀÇ ¹Ú½ºÀÇ ³Êºñ´Â °íÀ¯ÀÇ °ªÀ» °¡Áö¸ç, 'auto' ÀÌ¿ÜÀÇ ¼Ó¼º°ªÀ» °¡Áö¸é »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© Å©±â°¡ Á¶ÀýµÉ ¼ö ÀÖ´Ù.

°ªµéÀº ´ÙÀ½ÀÇ Àǹ̸¦ °®´Â´Ù:

<±æÀÌ>
°íÁ¤µÈ °ªÀ» ÁöÁ¤ÇÑ´Ù.
<¹éºÐÀ²>
¹éºÐÀ² ³Êºñ¸¦ ÁöÁ¤Çϸç, ÀÌ ¹éºÐÀ²Àº »ý¼ºµÈ ¹Ú½ºÀÇ ¿ë±âºí·° ³Êºñ¿¡ ´ëÇÏ¿© °è»êµÈ´Ù.
auto(ÀÚµ¿)
±× ³Êºñ´Â ´Ù¸¥ ¼Ó¼º°ªµé¿¡ µû¶ó ´Ù¸£´Ù. ¾Æ·¡ Ç׸ñµéÀ» Âü°íÇ϶ó.

'width'¿¡¼­ À½¼ö°ªÀº Ʋ¸° °ÍÀÌ´Ù.

¿¹Á¦:

¿¹¸¦ µé¾î, ´ÙÀ½ ¸í·ÉÀº 100 Çȼ¿(pixel)·Î ¹®´ÜÀÇ ³»¿ë ³Êºñ¸¦ °íÁ¤ÇÑ´Ù:

P { width: 100px }

10.3 ³Êºñ(width)¿Í ¸¶Áø(margin)ÀÇ °è»ê

¿¤·¹¸àÆ®ÀÇ °è»êµÈ °ªÀº, »ý¼ºµÈ ¹Ú½ºÀÇ Å¸ÀÔ°ú ¼­·ÎÀÇ °ü°è¿¡ µû¶ó, 'width', 'margin-left', 'margin-right', 'left', 'right' ¼Ó¼ºµéÀÌ´Ù. ¿øÄ¢ÀûÀ¸·Î, ±× °è»êµÈ °ªÀº ÁöÁ¤µÈ °ª°ú °°°í, 'auto'¿¡¼­ ÀϺΰ¡ Àû´çÇÑ °ªÀ¸·Î ´ëüµÇÁö ¸¸ ¿¹¿Ü°¡ ÀÖ´Ù. ´ÙÀ½ »óȲµéÀº ±¸º°ÇÒ ÇÊ¿ä°¡ ÀÖ´Ù:

  1. ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ ¿¤·¹¸àÆ®
  2. ´ëüµÈ ÀζóÀÎ(inline) ¿¤·¹¸àÆ®
  3. Á¤»ó È帧¿¡¼­, ´ëüµÇÁö ¾ÊÀº ºí·°·¹º§(block-level) ¿¤·¹¸àÆ®
  4. Á¤»ó È帧(normal flow)¿¡¼­, ´ëüµÈ ºí·°·¹º§ ¿¤·¹¸àÆ®
  5. ´ëüµÇÁö ¾ÊÀº À¯µ¿ ¿¤·¹¸àÆ®
  6. ´ëüµÈ À¯µ¿(floating) ¿¤·¹¸àÆ®
  7. ´ëüµÇÁö ¾ÊÀº Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¿¤·¹¸àÆ®
  8. ´ëüµÈ Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¿¤·¹¸àÆ®

1¿¡¼­ 6¹ø±îÁö´Â »ó´ëÀ§Ä¡¸¦ Æ÷ÇÔÇÑ´Ù.

10.3.1 ÀζóÀÎ(inline), ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®

'width' ¼Ó¼ºÀÌ Àû¿ëµÇÁö ¾Ê´Â´Ù. 'left', 'right', 'margin-left' ¶Ç´Â 'margin-right'¿¡ ÁöÁ¤µÈ °ª 'auto'´Â °è»êµÈ °ªÀ» '0'À¸·Î ÇÑ´Ù.

10.3.2 ÀζóÀÎ(inline), ´ëüµÈ ¿¤·¹¸àÆ®

'left', 'right', 'margin-left' ¶Ç´Â 'margin-right'¿¡ ÁöÁ¤µÈ °ª 'auto'´Â °è»êµÈ °ªÀ» '0'À¸·Î ÇÑ´Ù. 'width'¿¡ °ª 'auto'ÀÇ ÁöÁ¤Àº ±× ¿¤·¹¸àÆ®ÀÇ °è»êµÈ °íÀ¯ÀÇ ³Êºñ °ªÀ¸·Î µÈ´Ù.

10.3.3 Á¤»ó È帧(normal flow)¿¡¼­ ºí·°·¹º§, ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®

'left' ¶Ç´Â 'right'°¡ 'auto'·Î ÁÖ¾îÁö¸é, ±×µéÀÇ °è»êµÈ °ªÀº '0'ÀÌ´Ù. ´ÙÀ½ Á¦ÇÑ»çÇ×µéÀÌ ´Ù¸¥ ¼Ó¼ºµé»çÀÌ¿¡¼­ ÁؼöµÇ¾î¾ß ÇÑ´Ù:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ¿ë±âºí·°(containing block)ÀÇ ³Êºñ

(½ºÅ¸ÀÏÀÇ Å׵θ®°¡ 'none'À̸é, Å׵θ® ³Êºñ¸¦ '0'À¸·Î »ç¿ëÇÑ´Ù.) ¸¸ÀÏ À§ÀÇ ¸ðµç °ÍµéÀÌ 'auto' ÀÌ¿ÜÀÇ ÁöÁ¤µÈ °ªÀ» °¡Áö¸é, ±× °ªµéÀº °úµµÇÏ°Ô Á¦ÇѵÈ("over-constrained") °ÍÀ̶ó ÇÏ°í, °è»êµÈ °ªµé Áß Çϳª´Â ÁöÁ¤µÈ °ª°ú ´Þ¶óÁ®¾ß ÇÒ ¼ö ÀÖ´Ù. 'direction' ¼Ó¼ºÀÌ °ª 'ltr'¸¦ °¡Áö¸é, 'margin-right'ÀÇ ÁöÁ¤µÈ °ªÀº ¹«½ÃµÇ°í, ±× °ªÀº ¸Âµµ·Ï °è»êµÈ´Ù. 'direction' °ªÀÌ 'ltr'À̸é, ´ë½Å 'margin-left'°¡ ÀϾ´Ù.

'auto'·Î ÁöÁ¤µÈ ²À ÇϳªÀÇ °ªÀ» °¡Áö¸é, ÀÌ °ø½ÄÀ¸·Î ºÎÅÍ °è»êµÈ °ªÀ» µû¸¥´Ù.

¸¸ÀÏ 'width'°¡ 'auto'·Î ¼³Á¤µÇ¸é, ´Ù¸¥ 'auto' °ªµéÀº '0'ÀÌ µÇ°í, 'width'´Â ÀÌ °ø½ÄÀ¸·Î °è»êµÈ °ªÀ» µû¸¥´Ù.

¸¸ÀÏ 'margin-left'¿Í 'margin-right' µÑ´Ù 'auto'À̸é, ±×µéÀÇ °è»êµÈ °ªµéÀº °°´Ù.

10.3.4 ºí·°·¹º§(block-level), ´ëüµÈ ¿¤·¹¸àÆ® Á¤»ó È帧¿¡¼­

'left' ¶Ç´Â 'right'°¡ 'auto'À̸é, ±×µéÀÇ °è»êµÈ °ªÀº '0'ÀÌ´Ù. ¸¸ÀÏ 'width'°¡ 'auto'·Î ÁöÁ¤µÇ¾úÀ¸¸é, ±× °ªÀº ±× ¿¤·¹¸àÆ® °íÀ¯ÀÇ ³ÊºñÀÌ´Ù. ¸¸ÀÏ ¸¶Áø(margin) Áß Çϳª°¡ 'auto'À̸é, À§ÀÇ Á¦ÇÑ¿¡ ÀÇÇÏ¿© °è»êµÈ °ªÀÌ ÁÖ¾îÁø´Ù. ¸¸ÀÏ µÎ ¸¶ÁøµéÀÌ ´Ù 'auto'À̸é, ±×µéÀÇ °è»êµÈ °ªµéÀº °°´Ù.

10.3.5 À¯µ¿(floating), ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®

'left', 'right', 'width', 'margin-left', ¶Ç´Â 'margin-right'°¡ 'auto'·Î ÁöÁ¤µÇ¸é, ±×µéÀÇ °è»êµÈ °ªÀº '0'ÀÌ´Ù.

10.3.6 À¯µ¿(floating), ´ëüµÈ ¿¤·¹¸àÆ®

'left', 'right', 'margin-left' ¶Ç´Â 'margin-right'°¡ 'auto'·Î ÁöÁ¤µÇ¸é, ±×µéÀÇ °è»êµÈ °ªÀº '0'ÀÌ´Ù. ¸¸ÀÏ 'width'°¡ 'auto'À̸é, ±× °ªÀº ±× ¿¤·¹¸àÆ® °íÀ¯ÀÇ ³Êºñ°¡ µÈ´Ù.

10.3.7 Àý´ëÀûÀ¸·Î À§Ä¡µÈ, ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®

ÀÌ ¿¤·¹¸àÆ®µé¿¡¼­ °è»êµÈ °ªÀ» °áÁ¤ÇÏ´Â °ø½ÄÀº:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ¿ë±âºí·° ³Êºñ

(¸¸ÀÏ ½ºÅ¸ÀÏÀÇ Å׵θ®°¡ 'none'À̸é, Å׵θ®(border) ³Êºñ¸¦ '0'À¸·Î »ç¿ëÇÑ´Ù.) ´ÙÀ½ÀÇ ¼ø¼­·Î ÇÏÀ§ ´Ü°è¸¦ °ÅÃÄ ÀÌ °ø½ÄÀ¸·Î °á°úÀ» ¾ò´Â´Ù:

  1. ¸¸ÀÏ 'left'°¡ °ª 'auto'¸¦ °®°í 'direction'ÀÌ 'ltr'À̸é, 'auto'´Â ¿ë±âºí·°ÀÇ ¿ÞÂÊ ¸ð¼­¸®·Î ºÎÅÍ °¡Á¤(hypothetical) ¹Ú½ºÀÇ ¿ÞÂÊ ¸¶Áø(margin) ¸ð¼­¸®±îÁöÀÇ °Å¸®·Î ´ëüµÈ´Ù. ÀÌ °¡Á¤ ¹Ú½º´Â, 'position' ¼Ó¼ºÀÌ 'static'À̾úÀ¸¸é, ±× ¿¤·¹¸àÆ® ù¹ø° ¹Ú½ºÀÏ °ÍÀÌ´Ù. ±×·¯³ª ½ÇÁ¦ÀûÀ¸·Î ÀÌ ¹Ú½º¸¦ °è»êÇÏ´Â ´ë½Å, »ç¿ëµµ±¸µéÀº ÀÚÀ¯·Ó°Ô ±× °¡¾ßÇÒ À§Ä¡¸¦ ÃßÃøÇÒ ¼ö ÀÖ´Ù. ±× °¡Á¤(hypothetical) ¹Ú½º°¡ ¿ë±âºí·°(containing block) ¿ÞÂÊ¿¡ ÀÖÀ¸¸é ±× °ªÀº À½¼öÀÌ´Ù.
  2. 'right'°¡ °ª 'auto'¸¦ °®°í, 'direction'ÀÌ 'rtl'À̸é, 'auto'´Â ¿ë±âºí·°ÀÇ ¿À¸¥ÂÊ ¸ð¼­¸®·Î ºÎÅÍ °°Àº °¡Á¤ ¹Ú½ºÀÇ ¿À¸¥ÂÊ ¸¶Áø ¸ð¼­¸®±îÁöÀÇ °Å¸®·Î ´ëüµÈ´Ù. ¸¸ÀÏ °¡Á¤ ¹Ú½º°¡ ¿ë±âºí·°ÀÇ ¸ð¼­¸®ÀÇ ¿ÞÂÊ¿¡ ÀÖÀ¸¸é, °ªÀÌ ¾ç¼öÀÌ´Ù.
  3. 'width'°¡ 'auto'À̸é, 'left' ¶Ç´Â 'right'ÀÇ ³ª¸ÓÁö 'auto'´Â '0'·Î ´ëüµÈ´Ù.
  4. 'left', 'right' ¶Ç´Â 'width'°¡ ¿©ÀüÈ÷'auto'À̸é, 'margin-left' ¶Ç´Â 'margin-right'¿¡¼­ 'auto'¸¦ '0'À¸·Î ´ëüÇÑ´Ù.
  5. ÀÌ »óȲ¿¡¼­ 'margin-left'¿Í 'margin-right' µÑ´Ù ¿©ÀüÈ÷ 'auto'À̸é, Ãß°¡ÀûÀÎ µÎ ¸¶ÁøµéÀÌ °°Àº °ªµéÀ» °®´Â´Ù´Â °ø½Ä°ú ÇÔ²² ÀÌ °ø½Ä¿¡ ÀÇÇÏ¿© ÇØ°áÇÑ´Ù.
  6. ÀÌ ´Ü°è¿¡¼­ Çϳª ¸¸ÀÇ ¿ÞÂÊÀ¸·Î 'auto'¸¦ °¡Áö¸é, ±× °ªÀ» °ø½Ä¿¡¼­ °è»êÇÑ´Ù.
  7. ÀÌ ´Ü°è¿¡¼­ °ªµéÀÌ °úµµÇÏ°Ô Á¦ÇѵǾúÀ¸¸é(over-constrained), °ª 'direction'ÀÌ 'rtl'À̸é 'left'¸¦ ¹«½ÃÇÏ°í, ¶Ç´Â, 'direction'ÀÌ 'ltr'À̸é 'right'¸¦ ¹«½ÃÇÏ°í °ªÀ» °è»êÇÑ´Ù.

10.3.8 Àý´ëÀûÀ¸·Î À§Ä¡µÈ, ´ëüµÈ ¿¤·¹¸àÆ®

±× ¿¤·¹¸àÆ®´Â °íÀ¯ÀÇ ³Êºñ¸¦ °®´Â´Ù´Â ÀÌ¿Ü¿¡´Â, ÀÌ »óȲÀº À§ÀÇ °Í°ú À¯»çÇÏ´Ù. ¿©±â¿¡¼­´Â ÇÏÀ§ »óȲÀÇ ¼ø¼­´Â ´ÙÀ½°ú °°´Ù:

  1. ¸¸ÀÏ'width'°¡ 'auto'À̸é, ±× ¿¤·¹¸àÆ®ÀÇ °íÀ¯ÀÇ ³Êºñ·Î ´ëüµÈ´Ù.
  2. ¸¸ÀÏ 'left'°¡ °ª 'auto'¸¦ °¡Áö¸ç 'direction'ÀÌ 'ltr'(¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î)À̸é, 'auto'´Â ¿ë±âºí·°(containing block)ÀÇ ¿ÞÂÊ ¸ð¼­¸®·Î ºÎÅÍ, ±× ¿¤·¹¸àÆ®ÀÇ 'position' ¼Ó¼ºÀÌ 'static'À̸é, ù¹ø° ¹Ú½º ÀÎ, °¡Á¤ ¹Ú½ºÀÇ ¿ÞÂÊ ¸¶Áø(margin) ¸ð¼­¸®±îÁöÀÇ °Å¸®·Î ´ëüµÈ´Ù. ±×·¯³ª ½ÇÁ¦ÀûÀ¸·Î ±× ¹Ú½º¸¦ °è»êÇÏ´Â ´ë½Å, »ç¿ëµµ±¸µéÀº ÀÚÀ¯·Ó°Ô ±× °¡¾ßÇÒ À§Ä¡¸¦ ÃßÃøÇÒ ¼ö ÀÖ´Ù. ±× °¡Á¤(hypothetical) ¹Ú½º°¡ ¿ë±âºí·° ¿ÞÂÊ¿¡ ÀÖÀ¸¸é ±× °ªÀº À½¼öÀÌ´Ù.
  3. ¸¸ÀÏ 'right'°¡ °ª 'auto'ÀÌ°í 'direction'ÀÌ 'rtl'(¿À¸¥ÂÊ·Î ºÎÅÍ ¿ÞÂÊÀ¸·Î)À̸é, 'auto'´Â, À§¿¡¼­¿Í °°ÀÌ, ¿ë±âºí·°ÀÇ ¿À¸¥ÂÊ ¸ð¼­¸®·Î ºÎÅÍ °¡Á¤ ¹Ú½ºÀÇ ¿À¸¥ÂÊ ¸¶Áø ¸ð¼­¸®±îÁöÀÇ °Å¸®·Î ´ëüµÈ´Ù. ±× °¡Á¤ ¹Ú½º°¡ ¿ë±âºí·° ¿ÞÂÊ¿¡ ÀÖÀ¸¸é ±× °ªÀº À½¼öÀÌ´Ù.
  4. 'left' ¶Ç´Â 'right'°¡ 'auto'À̸é, 'margin-left' ¶Ç´Â 'margin-right'À» '0'À¸·Î ´ëüÇÑ´Ù.
  5. ¸¸ÀÏ ÀÌ ´Ü°è¿¡¼­ 'margin-left'¿Í 'margin-right' µÑ ´Ù ¿©ÀüÈ÷ 'auto'À̸é, Ãß°¡ÀûÀÎ µÎ ¸¶ÁøµéÀÌ °°Àº °ªÀ» °®´Â´Ù´Â °ø½Ä°ú ÇÔ²² ÀÌ °ø½ÄÀ¸·Î ÇØ°áÇÑ´Ù.
  6. ÀÌ ´Ü°è¿¡¼­ Çϳª ¸¸ÀÇ ¿ÞÂÊÀ¸·Î 'auto'¸¦ °¡Áö¸é, ±× °ªÀ» °ø½Ä¿¡¼­ °è»êÇÑ´Ù.
  7. ÀÌ ´Ü°è¿¡¼­ °ªµéÀÌ °úµµÇÏ°Ô Á¦ÇѵǾúÀ¸¸é(over-constrained), ±× °ª 'direction'ÀÌ 'rtl'À̸é 'left'¸¦ ¹«½ÃÇÏ°í, 'direction'ÀÌ 'ltr'À̸é 'right'¸¦ ¹«½ÃÇÏ°í, ±× °ªÀ» °è»êÇÑ´Ù.

10.4 ÃÖ¼Ò¿Í ÃÖ´ë ³Êºñ(width): 'min-width'¿Í 'max-width'

'min-width'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | inherit
ÃÖÃÊ°ª:  »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸§
Àû¿ë:  ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ ¿¤·¹¸àÆ®, Å×ÀÌºí ¿¤·¹¸àÆ®¸¦ Á¦¿ÜÇÑ ¸ðµç ¿¤·¹¸àÆ®
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)
'max-width'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | none | inherit
ÃÖÃÊ°ª:  none
Àû¿ë:  ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ ¿¤·¹¸àÆ®, Å×ÀÌºí ¿¤·¹¸àÆ®¸¦ Á¦¿ÜÇÑ ¸ðµç ¿¤·¹¸àÆ®
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ µÎ ¼Ó¼ºÀº Á¦ÀÛÀÚ°¡ ¹Ú½ºÀÇ ³Êºñ¸¦ ¾î´À ¹üÀ§¿¡¼­ Á¦ÇÑÇÒ ¼ö ÀÖ°Ô Çϸç, °ªµéÀº ´ÙÀ½ Àǹ̸¦ °®´Â´Ù:

<±æÀÌ>
°è»êµÈ ³Êºñ¸¦ °íÁ¤µÈ ÃÖ¼Ò ¶Ç´Â ÃÖ´ë°ªÀ¸·Î ÁöÁ¤ÇÑ´Ù.
<¹éºÐÀ²>
°è»êµÈ °ªÀ» ¹éºÐÀ²·Î ÁöÁ¤Çϸç, ¹éºÐÀ²Àº »ý¼ºµÈ ¹Ú½ºÀÇ ¿ë±âºí·°ÀÇ ³Êºñ¿¡ ´ëÇØ °è»êµÈ´Ù.
none
'max-width'¿¡¸¸ ÇØ´çµÇ¸ç, ¹Ú½ºÀÇ ³Êºñ¿¡ Á¦ÇÑÀÌ ¾ø´Ù.

´ÙÀ½ °úÁ¤Àº, 'width' ¼Ó¼ºÀÇ °è»êµÈ °ª¿¡, ¾î¶»°Ô ÀÌ µÎ ¼Ó¼ºµéÀÌ ¿µÇâÀ» Áִ°¡¸¦ ¼³¸íÇÑ´Ù:

  1. ³Êºñ´Â, 'min-width'¿Í 'max-width' ¾øÀÌ, À§ÀÇ "³Êºñ¿Í ¸¶Áø(margin)ÀÇ °è»ê"¿¡ ´ëÇÑ ±ÔÄ¢¿¡ µû¶ó °è»êµÈ´Ù.
  2. ¸¸ÀÏ 'min-width'ÀÇ °è»êµÈ °ªÀÌ 'max-width'ÀÇ °ªº¸´Ù Å©¸é, 'max-width'´Â 'min-width'ÀÇ °ªÀ¸·Î ¼³Á¤µÈ´Ù.
  3. ¸¸ÀÏ °è»êµÈ °ªÀÌ 'max-width'º¸´Ù Å©¸é, À§ÀÇ ±ÔÄ¢ÀÌ ´Ù½Ã Àû¿ëµÇ³ª, ÀÌ ¶§´Â, 'width'¿¡ ÁöÁ¤µÈ °ªÀ¸·Î, 'max-width'ÀÇ °ªÀ» »ç¿ëÇÑ´Ù.
  4. ¸¸ÀÏ °è»êµÈ ³Êºñ°¡ 'min-width'º¸´Ù ÀÛÀ¸¸é, À§ÀÇ ±ÔÄ¢ÀÌ ´Ù½Ã Àû¿ëµÇ³ª, ÀÌ ¶§´Â, 'width'¿¡ ÁöÁ¤µÈ °ªÀ¸·Î, 'min-width'ÀÇ °ªÀ» »ç¿ëÇÑ´Ù.

»ç¿ëµµ±¸´Â 'min-width' ¼Ó¼º¿¡ À½¼ö°¡ ¾Æ´Ñ ÃÖ¼Ò°ªÀ» Á¤ÀÇÇÒ ¼ö ÀÖ´Ù. ÀÌ ¼Ó¼ºÀº ¿¤·¹¸àÆ®¸¶´Ù ´Ù¸¦ ¼ö ÀÖ°í, ´Ù¸¥ ¼Ó¼º¿¡ µû¶ó¼­µµ ´Ù¸¦ ¼ö ÀÖ´Ù. ¸¸ÀÏ, ¸í½ÃÀûÀ¸·Î ¼³Á¤µÇ°Å³ª, ¶Ç´Â °ªÀÌ 'auto'ÀÌ¸ç ±× ¾Æ·¡ÀÇ ¸í·ÉÀÌ ³Ê¹« ÀÛ°Ô ¸¸µé¾î¼­, 'min-width'°¡ ±× ÇÑ°è ¹Ì¸¸ÀÌ µÇ¸é, »ç¿ëµµ±¸´Â °è»êµÈ °ª¿¡ ÃÖ¼Ò°ªÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù.

10.5 ³»¿ë ³ôÀÌ(content height): 'height' ¼Ó¼º

'height'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | auto | inherit
ÃÖÃÊ°ª:  auto
Àû¿ë:  ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ ¿¤·¹¸àÆ®, Å×À̺íÀÇ Ä÷³(column)°ú Ä÷´ ±¸·ìÀ» Á¦¿ÜÇÑ, ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  prose¸¦ º¸¶ó
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ºí·°·¹º§°ú ´ëüµÈ(replaced) ¿¤·¹¸àÆ®µé¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ¹Ú½ºÀÇ ³»¿ë ³ôÀ̸¦ ÁöÁ¤ÇÑ´Ù.

ÀÌ ¼Ó¼ºÀº ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ(inline-level) ¿¤·¹¸àÆ®¿¡´Â Àû¿ëµÇÁö ¾Ê´Â´Ù. ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ ¿¤·¹¸àÆ®ÀÇ ¹Ú½ºµéÀÇ ³ôÀÌ´Â ¿¤·¹¸àÆ®ÀÇ(Àü´ÞµÈ °Íµµ °¡´É) 'line-height' °ª¿¡ ÀÇÇÏ¿© ÁÖ¾îÁø´Ù.

°ªµéÀº ´ÙÀ½ÀÇ Àǹ̸¦ °®´Â´Ù:

<±æÀÌ>
°íÁ¤µÈ ³ôÀ̸¦ ÁöÁ¤ÇÑ´Ù.
<¹éºÐÀ²>
¹éºÐÀ² ³ôÀÌ(height)¸¦ ÁöÁ¤ÇÑ´Ù. ÀÌ ¹éºÐÀ²Àº »ý¼ºµÈ ¹Ú½º ¿ë±âºí·°ÀÇ ³ôÀÌ¿¡ ´ëÇÏ¿© °è»êµÈ´Ù. ¸¸ÀÏ ¿ë±âºí·°ÀÇ ³ôÀÌ°¡ ¸í½ÃÀûÀ¸·Î ÁöÁ¤µÇÁö ¾È¾úÀ¸¸é(³»¿ë ³ôÀÌ¿¡ µû¶ó), ±× °ªÀº 'auto'·Î Çؼ®µÈ´Ù.
auto
´Ù¸¥ ¼Ó¼ºµéÀÇ °ªµé¿¡ µû¶ó ³ôÀÌ´Â ´Ù¸£´Ù. ¾Æ·¡ prose¸¦ ÂüÁ¶Ç϶ó.

'height'¿¡ À½¼ö°ªÀº Ʋ¸° °ÍÀÌ´Ù.

¿¹Á¦:

¿¹¸¦ µé¾î, ´ÙÀ½ ¸í·ÉÀº ¹®´ÜÀÇ ³ôÀ̸¦ 100 Çȼ¿(pixel)µé·Î °íÁ¤½ÃŲ´Ù:

P { height: 100px }

100 Çȼ¿ ÀÌ»óÀÇ ³ôÀ̸¦ ÇÊ¿ä·Î ÇÏ´Â ¹®´ÜÀº 'overflow' ¼Ó¼º¿¡ µû¶ó ³ÑóÈ帧À» ÇÑ´Ù.

10.6 ³ôÀÌ¿Í ¸¶ÁøÀÇ °è»ê

'top', 'margin-top', 'height', 'margin-bottom', 'bottom' °ªÀÇ °è»ê¿¡¼­, ¾Æ·¡ ¿©·¯ Á¾·ùÀÇ ¹Ú½ºµé»çÀÌÀÇ ±¸º°ÀÌ µÇ¾î¾ß ÇÑ´Ù:

  1. ÀζóÀÎ, ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®µé
  2. ÀζóÀÎ(inline), ´ëüµÈ ¿¤·¹¸àÆ®µé
  3. Á¤»ó È帧¿¡¼­ ºí·°·¹º§(block-level), ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®µé
  4. ºí·°·¹º§, ´ëüµÈ ¿¤·¹¸àÆ®µé Á¤»ó È帧(normal flow)¿¡¼­
  5. À¯µ¿, ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®µé
  6. À¯µ¿(floating), ´ëüµÈ ¿¤·¹¸àÆ®µé
  7. Àý´ëÀûÀ¸·Î À§Ä¡µÈ, ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®µé
  8. Àý´ëÀûÀ¸·Î À§Ä¡µÈ, ´ëüµÈ ¿¤·¹¸àÆ®µé

À§ÀÇ 1¹ø¿¡¼­ 6 ¹øÀº »ó´ëÀ§Ä¡¸¦ Æ÷ÇÔÇÑ´Ù.

10.6.1 ÀζóÀÎ(inline), ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®

¸¸ÀÏ 'top', 'bottom', 'margin-top', ¶Ç´Â 'margin-bottom'µéÀÌ 'auto'À̸é, ±×µéÀÇ °è»êµÈ °ªÀº 0ÀÌ´Ù. 'height' ¼Ó¼ºÀº Àû¿ëµÇÁö ¾ÊÀ¸³ª, ¹Ú½ºÀÇ ³ôÀÌ´Â 'line-height' ¼Ó¼ºÀÇÈ÷¿© ÁÖ¾îÁø´Ù.

10.6.2 ÀζóÀÎ, ´ëüµÈ ¿¤·¹¸àÆ® ºí·°·¹º§, Á¤»ó È帧¿¡¼­ ´ëüµÈ ¿¤·¹¸àÆ®, À¯µ¿, ´ëüµÈ ¿¤·¹¸àÆ®

¸¸ÀÏ 'top', 'bottom', 'margin-top', ¶Ç´Â 'margin-bottom'µéÀÌ 'auto'À̸é, ±×µéÀÇ °è»êµÈ °ªÀº 0ÀÌ´Ù. ¸¸ÀÏ 'height'°¡ 'auto'À̸é, °è»êµÈ °ªÀº °íÀ¯ÀÇ ³ôÀÌÀÌ´Ù.

10.6.3 Á¤»ó È帧¿¡¼­ ºí·°·¹º§, ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®, À¯µ¿, ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®

¸¸ÀÏ 'top', 'bottom', 'margin-top', ¶Ç´Â 'margin-bottom'µéÀÌ 'auto'À̸é, ±×µéÀÇ °è»êµÈ °ªµéÀº 0 ÀÌ´Ù. ¸¸ÀÏ 'height'°¡ 'auto'À̸é, ³ôÀÌ´Â ±× ¿¤·¹¸àÆ®°¡ ºí·°·¹º§(block-level) ÀÚ½Ä(child)µéÀ» °®°í Àִ°¡¿¡ µû¶ó ´Ù¸£´Ù. ¸¸ÀÏ ÀζóÀÎ(inline-level) ÀÚ½Ä ¸¸ °¡Áö°í ÀÖ´Ù¸é, ³ôÀÌ´Â °¡Àå ³ôÀº ¶óÀÎ ¹Ú½º(line box)ÀÇ ¸ÇÀ§¿¡¼­ °¡Àå ³·Àº ¶óÀÎ ¹Ú½ºÀÇ ¹Ù´Ú±îÁöÀÇ °Å¸®ÀÌ´Ù. ¸¸ÀÏ ÀÌ°ÍÀÌ ºí·°·¹º§ ÀڽĵéÀ» °¡Áö°í ÀÖÀ¸¸é, ±× ³ôÀÌ´Â °¡Àå ³ôÀº ºí·°·¹º§(block-level) ÀÚ½Ä ¹Ú½ºÀÇ ¸ÇÀ§ Å׵θ®¸ð¼­¸®(border-edge)¿¡¼­ °¡Àå ³·Àº ºí·°·¹º§ ÀÚ½Ä ¹Ú½ºÀÇ ¹Ù´Ú Å׵θ® ¸ð¼­¸®±îÁöÀÇ °Å¸®ÀÌ´Ù. ÀڽĵéÀÌ Á¤»ó È帧(normal flow)À» ÇÏ´Â °æ¿ì ¸¸ °í·ÁµÈ´Ù. ¸»ÇÏÀÚ¸é, À¯µ¿(floating) ¹Ú½ºµé°ú Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½ºµéÀº ¹«½ÃµÇ°í, »ó´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½ºµéÀº ±×µéÀÇ ¿ÀÇÁ¼¼Æ®(offset) ¾øÀÌ µÈ´Ù. ÀÚ½Ä ¹Ú½º´Â °¡¸í(anonymous) ¹Ú½º°¡ µÉ¼ö ÀÖ½¿À» À¯ÀÇÇ϶ó.

10.6.4 Àý´ëÀûÀ¸·Î À§Ä¡µÈ, ´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®

Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¿¤·¹¸àÆ®¿¡¼­, ¼öÁ÷ Å©±â´Â ´ÙÀ½ °ø½ÄÀ» ¸¸Á·½ÃÄÑ¾Æ ÇÑ´Ù:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = ¿ë±âºí·°ÀÇ ³ôÀÌ

¸¸ÀÏ Å׵θ® ½ºÅ¸ÀÏÀÌ 'none'À̸é, Å׵θ® ³Êºñ '0'À» »ç¿ëÇÑ´Ù. ÀÌ ¹®Á¦ÀÇ ÇØ°áÀº ´ÙÀ½ÀÇ ¼ø¼­ÀÇ °úÁ¤¿¡ µû¶ó °áÁ¤µÈ´Ù:

  1. ¸¸ÀÏ 'top'ÀÇ °ªÀÌ 'auto'À̸é, ¿ë±âºí·°(containing block)ÀÇ ¸ÇÀ§ ¸ð¼­¸®¿¡¼­, ±× ¿¤·¹¸àÆ®°¡ ¸¸ÀÏ ±× 'position' ¼Ó¼ºÀÌ 'static'À» °¡Áö°í ÀÖÀ¸¸é ù¹ø° ¹Ú½º ÀÎ, °¡Á¤(hypothetical) ¹Ú½ºÀÇ ¸ÇÀ§ ¸¶Áø ¸ð¼­¸®±îÁöÀÇ °Å¸®·Î ´ëüµÈ´Ù. ±×·¯³ª ½ÇÁ¦ÀûÀ¸·Î ±× ¹Ú½º¸¦ °è»êÇÏ´Â ´ë½Å, »ç¿ëµµ±¸µéÀº ÀÚÀ¯·Ó°Ô ±× °¡¾ßÇÒ À§Ä¡¸¦ ÃßÃøÇÒ ¼ö ÀÖ´Ù. ±× °¡Á¤ ¹Ú½º°¡ ¿ë±âºí·° ¿ÞÂÊ¿¡ ÀÖÀ¸¸é ±× °ªÀº À½¼öÀÌ´Ù.
  2. 'height'¿Í 'bottom'°¡ µÑ ´Ù 'auto'À̸é, 'bottom'À» 0À¸·Î ´ëüÇÑ´Ù.
  3. ¸¸ÀÏ 'bottom' ¶Ç´Â 'height'°¡ ¿©ÀüÈ÷'auto'À̸é, ±× 'auto'´Â 'margin-top' ¶Ç´Â 'margin-bottom'¸¦ '0'À¸·ÎÇÑ´Ù.
  4. ÀÌ ´Ü°è¿¡¼­µµ 'margin-top'¿Í 'margin-bottom' µÑ ´Ù ¿©ÀüÈ÷ 'auto'À̸é, Ãß°¡ÀûÀÎ µÎ ¸¶ÁøµéÀÌ °°Àº °ªÀ» °®´Â´Ù´Â °ø½Ä°ú ÇÔ²², ÀÌ °ø½Ä¿¡ ÀÇÇÏ¿© ÇØ°áÇÑ´Ù.
  5. ÀÌ ´Ü°è¿¡¼­ Çϳª ¸¸ÀÇ ¿ÞÂÊÀ¸·Î 'auto'¸¦ °¡Áö¸é, ±× °ªÀ» °ø½Ä¿¡¼­ °è»êÇÑ´Ù.
  6. ÀÌ ´Ü°è¿¡¼­ °ªµéÀÌ °úµµÇÏ°Ô Á¦ÇѵǾúÀ¸¸é(over-constrained), 'bottom'ÀÇ °ªÀ» ¹«½ÃÇÏ°í, ±× °ªÀ» °è»êÇÑ´Ù.

10.6.5 Àý´ëÀûÀ¸·Î À§Ä¡µÈ, ´ëüµÈ ¿¤·¹¸àÆ®

ÀÌ »óȲÀº, ±× ¿¤·¹¸àÆ®ÀÌ °íÀ¯ÀÇ ³ôÀ̸¦ °®´Â´Ù´Â °ÍÀÌ ÀÌ¿Ü¿¡´Â, À§ÀÇ ¿©±â¼­ ÇϺΠ´Ü°è´Â ´ÙÀ½°ú °°´Ù:

  1. ¸¸ÀÏ 'height'°¡ 'auto'À̸é, ±× ¿¤·¹¸àÆ® °íÀ¯ÀÇÀÇ ³ôÀÌ·Î ´ëüµÈ´Ù.
  2. ¸¸ÀÏ 'top'ÀÌ °ª 'auto'¸¦ °¡Áö¸é, ¿ë±âºí·°ÀÇ ¸ÇÀ§ ¸ð¼­¸®·ÎºÎÅÍ, ±× ¿¤·¹¸àÆ®°¡ ¸¸ÀÏ ±× 'position' ¼Ó¼º 'static'À» °¡Áö°í ÀÖÀ¸¸é, ù¹ø° ¹Ú½º ÀÎ, °¡Á¤ ¹Ú½ºÀÇ ¸ÇÀ§ ¸¶Áø ¸ð¼­¸®±îÁöÀÇ °Å¸®·Î ´ëüµÈ´Ù. ±×·¯³ª ½ÇÁ¦ÀûÀ¸·Î ±× ¹Ú½º¸¦ °è»êÇÏ´Â ´ë½Å, »ç¿ëµµ±¸µéÀº ÀÚÀ¯·Ó°Ô ±× °¡¾ßÇÒ À§Ä¡¸¦ ÃßÃøÇÒ ¼ö ÀÖ´Ù. ±× °¡Á¤ ¹Ú½º°¡ ¿ë±âºí·° ¿ÞÂÊ¿¡ ÀÖÀ¸¸é °ªÀº À½¼öÀÌ´Ù.
  3. 'bottom'ÀÌ 'auto'À̸é, 'margin-top' ¶Ç´Â 'margin-bottom'ÀÇ 'auto'´Â '0'À¸·Î ´ëüµÈ´Ù.
  4. ¸¸ÀÏÀÌ ´Ü°è¿¡¼­ 'margin-top'¿Í 'margin-bottom'ÀÌ µÑ ´Ù ¿©ÀüÈ÷ 'auto'À̸é, Ãß°¡ÀûÀÎ µÎ ¸¶ÁøµéÀÌ °°Àº °ªÀ» °®´Â´Ù´Â °ø½Ä°ú ÇÔ²², ÀÌ °ø½Ä¿¡ ÀÇÇÏ¿© °áÁ¤ÇÑ´Ù.
  5. ÀÌ ´Ü°è¿¡¼­ Çϳª ¸¸ÀÇ ¿ÞÂÊÀ¸·Î 'auto'¸¦ °¡Áö¸é, ±× °ªÀ» °ø½Ä¿¡¼­ °è»êÇÑ´Ù.
  6. ÀÌ ´Ü°è¿¡¼­ °ªµéÀÌ °úµµÇÏ°Ô Á¦ÇѵǾúÀ¸¸é(over-constrained), 'bottom'ÀÇ °ªÀ» ¹«½ÃÇÏ°í, ±× °ªÀ» °è»êÇÑ´Ù.

10.7 ÃÖ¼Ò¿Í ÃÖ´ë ³ôÀÌ(height): 'min-height'¿Í 'max-height'

ÀÌ´Â ¿¤·¹¸àÆ®µéÀÇ ³ôÀ̸¦ ¾î¶² ¹üÀ§·Î Á¦ÇÑÇÒ ¶§ À¯¿ëÇÏ´Ù. ÀÌ µÎ ¼Ó¼ºµéÀÌ ÀÌ ±â´ÉÀ» Á¦°øÇÑ´Ù:

'min-height'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | inherit
ÃÖÃÊ°ª:  0
Àû¿ë:  ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ ¿¤·¹¸àÆ®°ú Å×ÀÌºí ¿¤·¹¸àÆ®À» Á¦¿ÜÇÑ ¸ðµç ¿¤·¹¸àÆ®
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  ¿ë±âºí·°(containing block)ÀÇ ³ôÀÌ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)
'max-height'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | none | inherit
ÃÖÃÊ°ª:  none
Àû¿ë:  ´ëüµÇÁö ¾ÊÀº ÀζóÀÎ ¿¤·¹¸àÆ®°ú Å×ÀÌºí ¿¤·¹¸àÆ®À» Á¦¿ÜÇÑ ¸ðµç ¿¤·¹¸àÆ®
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  ¿ë±âºí·°(containing block)ÀÇ ³ôÀÌ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ µÎ ¼Ó¼ºÀº Á¦ÀÛÀÚ°¡ ¹Ú½º ³ôÀ̵éÀ» ¾î¶² ¹üÀ§·Î Á¦ÇÑÇÒ ¼ö ÀÖµµ·Ï ÇÏ°í, °ªµéÀº ´ÙÀ½ Àǹ̸¦ °®´Â´Ù:

<±æÀÌ>
°íÁ¤µÈ ÃÖ¼Ò ¶Ç´Â ÃÖ´ë °è»ê ³ôÀ̸¦ ÁöÁ¤ÇÑ´Ù.
<¹éºÐÀ²>
°è»êµÈ °ªÀ» ¹éºÐÀ²·Î ÁöÁ¤ÇÑ´Ù. °è»êµÈ ¹éºÐÀ²Àº »ý¼ºµÈ ¹Ú½º ¿ë±âºí·°ÀÇ ³ôÀÌ¿¡ ´ëÇÑ °ÍÀÌ´Ù. ¿ë±âºí·° ³ôÀÌ°¡ ¸í½ÃÀû(³»¿ë ³ôÀÌ¿¡ µû¶ó)À¸·Î ÁöÁ¤µÇ¾î ÀÖÁö ¾ÊÀ¸¸é, ±× ¹éºÐÀ² °ªÀº 'auto'¿Í °°ÀÌ Çؼ®µÈ´Ù.
none
'max-height'¿¡ ¸¸ ÇØ´çµÇ°í, ¹Ú½ºÀÇ ³ôÀÌ¿¡´Â Á¦ÇÑÀÌ ¾ø´Ù.

´ÙÀ½ ´Ü°èµéÀº ¾î¶»°Ô ÀÌ µÎ ¼Ó¼ºµéÀÌ 'height' ¼Ó¼ºÀÇ °è»êµÈ °ª¿¡ ¿µÇâÀ» Áִ°¡¸¦ ¼³¸íÇÑ´Ù:

  1. 'min-height'¿Í 'max-height' ¾øÀÌ, À§ÀÇ "³ôÀÌ¿Í ¸¶ÁøÀÇ °è»ê" ±ÔÄ¢¿¡ µû¶ó, ³ôÀÌ°¡ °è»êµÈ´Ù.
  2. ¸¸ÀÏ 'min-height'ÀÇ °è»êµÈ °ªÀÌ 'max-height' °ªº¸´Ù Å©¸é, 'max-height'Àº 'min-height'ÀÇ °ªÀÌ ¼³Á¤µÈ´Ù.
  3. ¸¸ÀÏ ±× °è»êµÈ °ªÀÌ 'max-height'º¸´Ù Å©¸é, À§ÀÇ ±ÔÄ¢ÀÌ ´Ù½Ã Àû¿ëµÇ³ª, ÀÌ ¶§´Â 'height'¿¡ ÁöÁ¤µÈ °ª°ú °°Àº 'max-height' °ªÀ» »ç¿ëÇÑ´Ù.
  4. ¸¸ÀÏ ±× °è»êµÈ °ªÀÌ 'min-height'º¸´Ù ÀÛÀ¸¸é, À§ÀÇ ±ÔÄ¢ÀÌ ´Ù½Ã Àû¿ëµÇ³ª, ÀÌ ¶§´Â 'height'¿¡ ÁöÁ¤µÈ °ª°ú °°Àº 'min-height' °ªÀ» »ç¿ëÇÑ´Ù.

10.8 ¶óÀÎ ³ôÀÌ °è»ê: 'line-height'¿Í 'vertical-align' ¼Ó¼º

ÀζóÀÎ(inline) ¾ç½ÄÈ­ ¹®¸Æ¿¡¼­ ¼³¸íÇÑ ¹Ù¿Í °°ÀÌ, »ç¿ëµµ±¸µéÀº ¶óÀÎ ¹Ú½º(line box)µéÀÌ ¼öÁ÷ÀûÀ¸·Î ½ºÅÃ(stack) ÀζóÀÎ ¹Ú½ºµéÀ» È帣°Ô ÇÑ´Ù. ¶óÀÎ ¹Ú½ºÀÇ ³ôÀÌ´Â ´ÙÀ½°ú °°ÀÌ °áÁ¤µÈ´Ù:

  1. ¶óÀÎ ¹Ú½º ¾ÈÀÇ °¢ ÀζóÀÎ ¹Ú½º ³ôÀÌ°¡ °è»êµÈ´Ù("³ôÀÌ¿Í ¸¶ÁøÀÇ °è»ê"°ú 'line-height' ¼Ó¼º ÂüÁ¶).
  2. ÀζóÀÎ ¹Ú½º(inline box)µéÀº ±×µéÀÇ 'vertical-align' ¼Ó¼º¿¡ µû¶ó ¼öÁ÷ÀûÀ¸·Î Á¤·ÄµÈ´Ù.
  3. ¶óÀÎ ¹Ú½º ³ôÀÌ´Â °¡Àå ³ôÀº ¹Ú½º ¸ÇÀ§¿Í °¡Àå ³·Àº ¹Ú½º ¹Ù´Ú»çÀÌÀÇ °Å¸®ÀÌ´Ù.

ºó(Empty) ÀζóÀÎ ¿¤·¹¸àÆ®µéÀº ºó ÀζóÀÎ ¹Ú½ºµéÀ» »ý¼ºÇÏÁö¸¸, ÀÌ ¹Ú½ºµéÀº ¿©ÀüÈ÷ ¸¶Áø(margin), Æеù(padding), Å׵θ®(border)µé°ú ¶óÀÎ ³ôÀ̸¦ °®À¸¹Ç·Î, ³»¿ëÀ» °®´Â ¿¤·¹¸àÆ®µé°ú ²À °°ÀÌ °è»ê¿¡ ¿µÇâÀ» ¹ÌÄ£´Ù.

¸¸ÀÏ ¶óÀÎ ¹Ú½º(line box) ¼ÓÀÇ ¸ðµç ¹Ú½ºµéÀÌ ±× ¹Ù´ÚÀ» µû¶ó Á¤·ÄµÇ¸é, ¶óÀÎ ¹Ú½ºÀº °¡Àå Å°°¡ Å« ¹Ú½ºÀÇ ³ôÀÌ¿Í ²À °°¾Æ Áú °ÍÀ̶ó´Â Á¡¿¡ À¯ÀÇÇ϶ó. ±×·¯³ª, ±× ¹Ú½ºµéÀÌ ÀϹÝÀûÀÎ ±âÃʶóÀÎ(baseline)À» µû¶ó Á¤·ÄµÇ¸é, ¶óÀÎ ¹Ú½º ¸ÇÀ§¿Í ¹Ù´ÚÀº °¡Àå Å°°¡ Å« ¹Ú½ºÀÇ ¸ÇÀ§¿Í ¹Ù´Ú¿¡ Á¢ÃËÇÏÁö ¾ÊÀ» ¼ö ÀÖ´Ù.

10.8.1 ¾Õ¼¶(leading)°ú ¹Ý ¾Õ¼¶

ÀζóÀÎ ¹Ú½º(inline box)ÀÇ ³ôÀÌ´Â ¹Ú½º ¼ÓÀÇ ±Û²Ã Å©±â(¿¹: 'line-height' > 1em)¿Í ´Ù¸¦ ¼ö Àֱ⠶§¹®¿¡, Ç¥ÇöµÈ ±×¸²¹®ÀÚÀÇ À§¿Í ¾Æ·¡¿¡ °ø°£À» °¡Áú ¼ö ÀÖ´Ù. ±Û²Ã Å©±â¿Í 'line-height'ÀÇ °è»êµÈ °ª»çÀÌÀÇ Â÷À̸¦ ¾Õ¼¶(leading)À̶ó ÇÑ´Ù. ¹Ý ¾Õ¼¶À» half-leadingÀ̶ó ÇÑ´Ù.

»ç¿ëµµ±¸µéÀº ±×¸²¹®ÀÚµéÀ» ÀζóÀÎ ¹Ú½º ¾È¿¡¼­ ¼öÁ÷ÀûÀ¸·Î Á߽ɿ¡ ¸ÂÃß°í, ¸ÇÀ§¿Í ¹Ù´Ú¿¡ ¹Ù ¾Õ¼¶À» Ãß°¡ÇÑ´Ù. ¿¹¸¦ µé¾î, ¸¸ÀÏ ÅؽºÆ®ÀÇ Á¶°¢ÀÌ '12pt' ³ôÀÌÀÌ°í 'line-height'ÀÇ °ªÀÌ '14pt'À̸é, ¿©ºÐÀÇ 2pt °ø°£ÀÌ ´õÇØÁö´Âµ¥, ±ÛÀÚÀÇ À§ÂÊ¿¡ 1pt, ¾Æ·¡ÂÊ¿¡ 1pt°¡ µÈ´Ù. ÀÌ´Â, ±× ºó ¹Ú½º°¡ ¹«ÇÑÈ÷ Á¼Àº ±ÛÀÚµéÀ» °¡Áö°í ÀÖ´Â °Íó·³, ºó(empty) ¹Ú½º¿¡µµ Àû¿ëµÈ´Ù.

'line-height' °ªÀÌ ±Û²Ã Å©±âº¸´Ù ÀÛÀ¸¸é, ÃÖÁ¾ ÀζóÀÎ ¹Ú½º ³ôÀÌ´Â ±Û²Ã Å©±âº¸´Ù ÀÛ°í, Ç¥ÇöµÈ ±×¸²¹®ÀÚµéÀº ¹Ú½º ¿ÜºÎ·Î Æ¢¾î³ª ¿Ã °ÍÀÌ´Ù. ¸¸ÀÏ ÀÌ¿Í°°Àº ¹Ú½º°¡ ¶óÀÎ ¹Ú½ºÀÇ ¸ð¼­¸®¿¡ Á¢ÃËÇϸé, Ç¥ÇöµÈ ±×¸²¹®Àڵ鵵 ÀÎÁ¢ ¶óÀÎ ¹Ú½º ¾ÈÀ¸·Î Æ¢¾î µé¾î¿Ã °ÍÀÌ´Ù.

´ëüµÇÁö ¾ÊÀº ¿¤·¹¸àÆ®µéÀÇ ¸¶Áø(margin), Å׵θ®(border), ±×¸®°í Æеù(padding)µéÀÌ ÀζóÀÎ ¹Ú½º ³ôÀÌ °è»ê¿¡ µé¾î°¡Áö ¾Ê´õ¶óµµ(µû¶ó¼­ ¶óÀÎ ¹Ú½º °è»ê¿¡µµ ¾Èµé¾î°¨), ±×µéÀº ÀζóÀÎ ¹Ú½ºµé ÁÖÀ§¿¡ ¿©ÀüÈ÷ Ç¥ÇöµÈ´Ù. ÀÌ´Â ¸¸ÀÏ ¶óÀÎ ¹Ú½ºÀÇ ³ôÀÌ°¡ ±×¸¦ Æ÷ÇÔÇÏ°í ÀÖ´Â ¹Ú½ºµéÀÇ ¹Ù±ùÂÊ ¸ð¼­¸®(outer edge)µéº¸´Ù ªÀ¸¸é, ¹è°æ°ú Æеù°ú Å׵θ®µéÀÇ »ö»óÀº ÀÎÁ¢ ¶óÀÎ ¹Ú½º(line box)µé ¾ÈÀ¸·Î Æ¢¾î µé¾î °¥ ¼ö ÀÖ´Ù °ÍÀ» ÀǹÌÇÑ´Ù. ±×·¯³ª, ÀÌ °æ¿ì, ÀϺΠ»ç¿ëµµ±¸µéÀº ¶óÀÎ ¹Ú½º°¡ Å׵θ®¿Í Æеù Áö¿ªÀ» À߶󳻴 ¹æ½ÄÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù(ÀÌ°æ¿ì Ç¥ÇöµÇÁö ¾ÊÀ½).

'line-height'
°ª:  normal | <¼öÄ¡> | <±æÀÌ> | <¹éºÐÀ²> | inherit
ÃÖÃÊ°ª:  normal
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  µÊ
¹éºÐÀ²:  ±× ¿¤·¹¸àÆ® ÀÚüÀÇ ±Û²Ã Å©±â ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

¸¸ÀÏ ±× ¼Ó¼ºÀÌ ÀζóÀÎ(inline-level) ¿¤·¹¸àÆ®µé·Î ±¸¼ºµÈ ³»¿ëÀ» °®´Â ºí·°·¹º§(block-level) ¿¤·¹¸àÆ®¿¡ ¼³Á¤µÇ¸é, ÀÌ´Â °¢ »ý¼ºµÈ ÀζóÀÎ ¹Ú½ºÀÇ ÃÖ¼Ò ³ôÀ̸¦ ÁöÁ¤ÇÑ´Ù.

¸¸ÀÏ ±× ¼Ó¼ºÀÌ ÀζóÀÎ ¿¤·¹¸àÆ®¿¡ ¼³Á¤µÇ¸é, ÀÌ´Â ²À ¸Â´Â ±× ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© »ý¼ºµÈ °¢ ¹Ú½ºÀÇ ³ôÀ̸¦ ÁöÁ¤ÇÑ´Ù. ÀζóÀÎ ´ëüµÈ(replaced) ¿¤·¹¸àÆ®µéÀº ¿©±â¼­ Á¦¿ÜµÇ´Â µ¥, ¿©±â¼­´Â 'height' ¼Ó¼º¿¡ ÀÇÇÏ¿© ¹Ú½ºÀÇ ³ôÀÌ°¡ ÁÖ¾îÁø´Ù.

ÀÌ ¼Ó¼º°ªµéÀº ´ÙÀ½ Àǹ̸¦ °®´Â´Ù:

normal(Á¤»ó)
»ç¿ëµµ±¸µé¿¡°Ô ±× ¿¤·¹¸àÆ®ÀÇ ±Û²Ã Å©±â¿¡ ±âÃÊÇÑ ÇÕ¸®ÀûÀÎ °ªÀ¸·Î °è»êµÈ °ªÀ» ¼³Á¤ÇÒ °ÍÀ» ¾Ë·ÁÁØ´Ù. ±× °ªÀº <¼öÄ¡>¿Í °°Àº Àǹ̸¦ °®´Â´Ù. 'normal'ÀÇ °è»êµÈ °ªÀÌ 1.0°ú 1.2»çÀÌ°¡ µÉ °ÍÀ» ÃßõÇÑ´Ù.
<±æÀÌ>
¹Ú½º ³ôÀÌ´Â ±× ±æÀÌ·Î ¼³Á¤µÈ´Ù. À½¼ö°ªµéÀº Ʋ¸° °ÍÀÌ´Ù.
<¼öÄ¡>
ÀÌ ¼Ó¼ºÀÇ °è»êµÈ °ªÀº ±× ¿¤·¹¸àÆ®ÀÇ ±Û²Ã Å©±â·Î °öÇÑ ¼öÄ¡ÀÌ´Ù. À½¼ö°ªÀº Ʋ¸° °ÍÀÌ´Ù. ±×·¯³ª, ±× ¼öÄ¡´Â °è»êµÈ °ªÀÌ ¾Æ´Ï°í, Àü´ÞµÈ °ªÀÌ´Ù.
<¹éºÐÀ²>
ÀÌ ¼Ó¼ºÀÇ °è»êµÈ °ªÀº ¿¤·¹¸àÆ®ÀÇ °è»êµÈ ±Û²Ã Å©±â¸¦ °öÇÑ ¹éºÐÀ²·Î À½¼ö°ªÀº Ʋ¸° °ÍÀÌ´Ù.

¿¹Á¦:

¾Æ·¡ ¿¹Á¦¿¡¼­ ¼¼°³ÀÇ ¸í·ÉµéÀº °°Àº ³ôÀ̸¦ ¸¸µç´Ù:

DIV { line-height: 1.2; font-size: 10pt } /* ¼öÄ¡ */
DIV { line-height: 1.2em; font-size: 10pt } /* ±æÀÌ */
DIV { line-height: 120%; font-size: 10pt } /* ¹éºÐÀ² */

¿¤·¹¸àÆ®°¡ ÇϳªÀÌ»óÀÇ ±Û²Ã(font)·Î Ç¥ÇöµÈ ÅؽºÆ®¸¦ Æ÷ÇÔÇϸé, »ç¿ëµµ±¸µéÀº °¡Àå Å« ±Û²Ã Å©±â¿¡ µû¶ó 'line-height' °ªÀ» °áÁ¤ÇÏ¿©¾ß ÇÑ´Ù.

ÀϹÝÀûÀ¸·Î, ¹®´Ü(Å° Å« À̹ÌÁöµé ¾øÀÌ) ¾È¿¡ ¸ðµç ÀζóÀÎ ¹Ú½º(inline box)µéÀ» À§ÇÏ¿© 'line-height'ÀÇ ÇϳªÀÇ °ª ¸¸À» °¡Áö¸é, ´ÙÀ½¿¡ µû¶ó ³ª¿À´Â ÁÙµéÀÇ ±âÃʶóÀÎ(baseline)µéÀº Á¤È®È÷ 'line-height' ¸¸Å­ À§·Î ¶³¾îÁö´Â °ÍÀÌ È®½Ç ÇØ Áø´Ù. ÀÌ´Â, ¿¹¸¦ µé¾î Å×ÀÌºí ¾È¿¡¼­, ÅؽºÆ®ÀÇ Ä÷³µéÀÌ ´Ù¸¥ ±Û²ÃµéÀ» °¡Áö°í Á¤·ÄµÇ¾ß ÇÒ ¶§ Áß¿äÇÏ´Ù.

´ëüµÈ ¿¤·¹¸àÆ®µéÀº, ¹Ú½ºÀÇ ³ôÀ̸¦ °áÁ¤Çϱâ À§ÇÏ¿© Á÷Á¢ÀûÀ¸·Î »ç¿ëµÇÁö ¾Ê¾Æµµ, 'font-size'¿Í 'line-height' ¼Ó¼º¸¦ °®´Â´Ù Á¡¿¡ À¯ÀÇÇ϶ó. ±×·¯³ª, 'font-size'´Â 'em'°ú 'ex' ´ÜÀ§(unit)¸¦ ÁöÁ¤Çϱâ À§ÇÏ¿© »ç¿ëµÇ¸ç, 'line-height'´Â 'vertical-align' ¼Ó¼º¿¡¼­ ¿ªÇÒÀ» ÇÑ´Ù.

'vertical-align'
°ª:  baseline | sub | super | top | text-top | middle | bottom | text-bottom | <¹éºÐÀ²> | <±æÀÌ> | inherit
ÃÖÃÊ°ª:  baseline
Àû¿ë:  ÀζóÀÎ(inline-level)°ú Å×À̺íÀÇ ¼¿('table-cell') ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  ±× ¿¤·¹¸àÆ® ÀÚüÀÇ ÁÙ ³ôÀÌ('line-height')¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ÀζóÀÎ(inline-level) ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ¹Ú½ºµéÀÇ ¶óÀÎ ¹Ú½º(line box) ¾È¿¡¼­ ¼öÁ÷ À§Ä¡½ÃÅ´¿¡ ¿µÇâÀ» ÁØ´Ù. ´ÙÀ½ °ªµéÀº, ¿¤·¹¸àÆ®°¡ °¡¸í(anonymous) ÀζóÀÎ ¹Ú½ºµéÀ» »ý¼ºÇϸé, ¸ðü ÀζóÀÎ ¿¤·¹¸àÆ®¿¡ ´ëÇÏ¿©, ¶Ç´Â ¸ðü ºí·°·¹º§ ¿¤·¹¸àÆ®¿¡ ´ëÇÏ¿©¼­ ¸¸ Àǹ̸¦ °®´Â´Ù; ¸¸ÀÏ ±×¿Í °°Àº ¸ðü°¡ ¾øÀ¸¸é ¾Æ¹« È¿°úµµ ¾ø´Ù.

ÁÖ¼®. ÀÌ ¼Ó¼º°ªµéÀº Å×À̺í(table)ÀÇ ¹®¸Æ¿¡¼­ ¾à°£ ´Ù¸¥ Àǹ̸¦ °®´Â´Ù. ¼¼ºÎ»çÇ×Àº Å×ÀÌºí ³ôÀÌ ±â´ÉÀ» ÂüÁ¶Ç϶ó.

baseline(±âÃʶóÀÎ)
¹Ú½ºÀÇ ±âÃʶóÀÎÀ» ¸ðü ¹Ú½ºÀÇ ±âÃʶóÀο¡ Á¤·ÄÇÑ´Ù. ¸¸ÀÏ ±× ¹Ú½º ±âÃʶóÀÎÀ» °¡Áö°í ÀÖÁö ¾ÊÀ¸¸é, ±× ¹Ú½ºÀÇ ¹Ù´ÚÀ» ¸ðüÀÇ ±âÃʶóÀο¡ Á¤·ÄÇÑ´Ù.
middle(Áß¾Ó)
¹Ú½ºÀÇ ¼öÁ÷Àû Áß°£ Á¡À» ±× ¸ðü ¹Ú½ºÀÇ ±âÃʶóÀÎ ´õÇϱâ(+) ¸ðü x-heightÀÇ ¹Ý(1/2)¿¡ Á¤·ÄÇÑ´Ù.
sub(¾Æ·¡ ÷ºÎ À§Ä¡)
¹Ú½ºÀÇ ±âÃʶóÀÎÀ» ¸ðüÀÇ ¹Ú½ºÀÇ ¾Æ·¡Ã·ÀÚ(subscript)¸¦ À§ÇÏ¿© Àû´çÇÑ À§Ä¡·Î ³·Ãá´Ù. ÀÌ °ªÀº ±× ¿¤·¹¸àÆ®ÀÇ ÅؽºÆ® ±Û²Ã Å©±â¿¡´Â ¿µÇâÀ» ÁÖÁö ¾Ê´Â´Ù.
super(À§ ÷ºÎ À§Ä¡)
¹Ú½ºÀÇ ±âÃʶóÀÎÀ» ¸ðüÀÇ ¹Ú½ºÀÇ À§Ã·ÀÚ(superscript)¸¦ À§ÇÏ¿© Àû´çÇÑ À§Ä¡·Î ³ôÀδÙ. ÀÌ °ªÀº ±× ¿¤·¹¸àÆ®ÀÇ ÅؽºÆ® ±Û²Ã Å©±â¿¡´Â ¿µÇâÀ» ÁÖÁö ¾Ê´Â´Ù.
text-top(ÅØƮƮ ¸ÇÀ§)
¹Ú½ºÀÇ ¸ÇÀ§¸¦ ¸ðü ¿¤·¹¸àÆ® ±Û²ÃÀÇ ¸ÇÀ§¿¡ Á¤·ÄÇÑ´Ù.
text-bottom(ÅØƮƮ ¸Ç¾Æ·¡)
¹Ú½ºÀÇ ¹Ù´Ú¸¦ ¸ðü ¿¤·¹¸àÆ® ±Û²ÃÀÇ ¹Ù´Ú¿¡ Á¤·ÄÇÑ´Ù.
<¹éºÐÀ²>
¹Ú½º¸¦ ÀÌ 'line-height' °ªÀÇ ¹éºÐÀ² °Å¸® ¸¸Å­ ¿Ã¸®°Å³ª(¾ç¼ö) ³»¸°´Ù(À½¼ö). °ªÀÌ '0%'À̸é 'baseline'°ú °°Àº ÀǹÌÀÌ´Ù.
<±æÀÌ>
¹Ú½º¸¦ ÀÌ °ªÀÇ °Å¸® ¸¸Å­ ¿Ã¸®°Å³ª(¾ç¼ö) ³»¸°´Ù(À½¼ö). °ªÀÌ '0cm'À̸é 'baseline'°ú °°Àº ÀǹÌÀÌ´Ù.

±× ³ª¸ÓÁö °ªµéÀº »ý¼ºµÈ ¹Ú½º°¡ ³ªÅ¸³ª´Â ¶óÀÎ ¹Ú½º¸¦ ÂüÁ¶ÇÑ´Ù:

top(¸ÇÀ§)
¹Ú½ºÀÇ ¸ÇÀ§¸¦ ¶óÀÎ ¹Ú½ºÀÇ ¸ÇÀ§¿¡ Á¤·ÄÇÑ´Ù.
bottom(¹Ù´Ú)
¹Ú½ºÀÇ ¹Ù´Ú¸¦ ¶óÀÎ ¹Ú½ºÀÇ ¹Ù´Ú¿¡ Á¤·ÄÇÑ´Ù.

ÆäÀÌÁö ¸ÇÀ§·Î¸ÇÀ§ÀÌ Trio ȨÆäÀÌÁö ¹®¼­()´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.
(¼öÁ¤ÀÏ )