W3C9 º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨Trio ȨÆäÀÌÁö 

¸ñÂ÷

9.1 º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨ÀÇ ¼Ò°³

ÀÌ Àå°ú ´ÙÀ½Àå¿¡¼­´Â º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨, ´Ù½Ã ¸»Çϸé, ¾î¶»°Ô »ç¿ëµµ±¸µéÀÌ º¸ÀÌ´Â ¸Þµð¾Æ(media)¿¡¼­ ¹®¼­°èÅëÀ» ó¸®Çϴ°¡¸¦ ¼³¸íÇÑ´Ù.

º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨¿¡¼­, ¹®¼­°èÅë(tree)ÀÇ °¢ ¿¤·¹¸àÆ®´Â 0(zero)°³ ¶Ç´Â ¿©·¯ ¹Ú½ºµéÀ» ¹Ú½º ¸ðµ¨¿¡ µû¶ó »ý¼ºÇÑ´Ù. ÀÌ ¹Ú½ºµéÀÇ ¹è¿­Àº ¾Æ·¡ ³»¿ë¿¡ µû¸¥´Ù:

ÀÌ Àå°ú ´ÙÀ½ Àå¿¡¼­ Á¤ÀÇµÈ ¼Ó¼ºµéÀº ¿¬¼Ó(continuous) ¸Þµð¾Æ¿Í ÆäÀÌÁöÈ­µÈ(paged) ¸Þµð¾Æ µÑ ´Ù¿¡ Àû¿ëµÈ´Ù. ±×·¯³ª, ¸¶Áø ¼Ó¼ºÀÌ, ÆäÀÌÁöÈ­µÈ ¸Þµð¾Æ(¼¼ºÎ»çÇ×Àº ÆäÀÌÁö ¸ðµ¨ ÂüÁ¶)¿¡ Àû¿ëµÉ ¶§, ±× Àǹ̴ ´Þ¶óÁø´Ù.

º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨Àº ¾ç½ÄÈ­ÀÇ ¸ðµç °ßÁö¿¡¼­ Á¤ÀÇÇÏÁö´Â ¾Ê´Â´Ù(¿¹: letter-spacing ±â´ÉÀ» Á¤ÀÇÇÏÁö ¾ÊÀ½). ±Ô°Ý¿¡ ºÎÇÕÇÏ´Â »ç¿ëµµ±¸´Â, ÀÌ ±Ô°Ý¿¡¼­ ´Ù·çÁö ¾Ê´Â ¾ç½ÄÈ­ ¹®Á¦¿¡ ´ëÇÏ¿©, ¼­·Î ´Ù¸£°Ô Àû¿ëÇÒ ¼ö ÀÖ´Ù.

9.1.1 ºäÆ÷ÀÎÆ®(viewport)

¿¬¼Ó ¸Þµð¾Æ¸¦ À§ÇÑ »ç¿ëµµ±¸´Â, ÀϹÝÀûÀ¸·Î, »ç¿ëÀÚ¿¡°Ô, »ç¿ëÀÚ°¡ À̸¦ ÅëÇÏ¿© ¹®¼­¸¦ º¼ ¼ö ÀÖ´Â, ºäÆ÷ÀÎÆ®(½ºÅ©¸°¿¡¼­ À©µµ¿ì ¶Ç´Â ´Ù¸¥ º¸ÀÌ´Â Áö¿ª)¸¦ Á¦°øÇÑ´Ù. »ç¿ëµµ±¸µéÀº, ºäÆ÷ÀÎÆ®´Â ´Ù½Ã »çÀÌ¡µÉ ¶§(ÃÖÃÊ ¿ë±âºí·° ÂüÁ¶), ±× ¹®¼­ÀÇ ¹è¿­À» º¯°æ½Ãų ¼ö ÀÖ´Ù. ºäÆ÷ÀÎÆ®°¡ ¹®¼­ÀÇ ÃÖÃÊ ¿ë±âºí·°(containing block)º¸´Ù ÀÛÀ¸¸é, »ç¿ëµµ±¸´Â È­¸é ½ºÄݸµ(scroll) ±â´ÉÀ» Á¦°øÇÏ¿©¾ß ÇÑ´Ù. â(canvas)¸¶´Ù, ÃÖ´ë ÇϳªÀÇ ºäÆ÷ÀÎÆ®°¡ ÀÖÀ¸³ª, »ç¿ëµµ±¸´Â ÇϳªÀÌ»óÀÇ Ã¢(°°Àº ¹®¼­ÀÇ ´Ù¸¥ º¸ÀÓ(view)µéÀ» Á¦°ø)À» Ç¥ÇöÇÒ ¼ö ÀÖ´Ù.

9.1.2 ¿ë±âºí·°(containing block)

CSS2¿¡¼­, ¿ë±âºí·°(containing block) À̶ó°í ºÒ¸®¿ì´Â »ç°¢Çü ¹Ú½ºÀÇ ¸ð¼­¸®µé¿¡ ´ëÇÏ¿©, ¿©·¯ ¹Ú½º À§Ä¡¿Í Å©±âµéÀÌ °è»êµÈ´Ù. ÀϹÝÀûÀ¸·Î, »ý¼ºµÈ ¹Ú½ºµéÀº ÇÏÀ§(descendant) ¹Ú½ºÀÇ ¿ë±âºí·°À¸·Î ÀÛ¿ëÇÑ´Ù; ¹Ú½º´Â ±× ÇÏÀ§µéÀ» À§ÇÏ¿© ¿ë±âºí·°À» ¸¸µç´Ù("establish")°í ÇÒ ¼ö ÀÖ´Ù. "¹Ú½ºÀÇ ¿ë±âºí·°"ÀÇ Çؼ®(phrase)Àº, ±×°¡ »ý¼ºÇÏ´Â °ÍÀÌ ¾Æ´Ï°í, "±× ¿ë±âºí·° ¾È¿¡ ÀÖ´Â ¹Ú½º"¸¦ ÀǹÌÇÑ´Ù.

°¢ ¹Ú½º¿¡´Â ±× ¿ë±âºí·°¿¡ ´ëÇÑ À§Ä¡°¡ ÁÖ¾îÁöÁö¸¸, ÀÌ ¿ë±âºí·°¿¡ ÀÇÇÏ¿© Á¤ÀǵÇÁö´Â ¾Ê´Â´Ù; ÀÌ´Â ³ÑóÈ带(overflow) ¼ö ÀÖ´Ù.

¹®¼­°èÅë(tree)ÀÇ ÃÖ»óÀ§(root)´Â, ÈļӵǴ ¹è¿­À» À§ÇÏ¿© ÃÖÃÊ ¿ë±âºí·°À¸·Î ¼­ºêÇÏ´Â ¹Ú½º¸¦ »ý¼ºÇÑ´Ù.

ÃÖ»óÀ§ ¿¤·¹¸àÆ®ÀÇ ÃÖÃÊ ¿ë±âºí·°ÀÇ ³Êºñ´Â 'width' ¼Ó¼ºÀ¸·Î ÁöÁ¤µÉ ¼ö ÀÖ´Ù. ÀÌ ¼Ó¼ºÀÌ °ª 'auto'¸¦ °¡Áö¸é, »ç¿ëµµ±¸´Â ÃÖÃÊ ³Êºñ¸¦ Á¦°øÇÑ´Ù(¿¹: »ç¿ëµµ±¸´Â ºäÆ÷ÀÎÆ®(viewport)ÀÇ ÇöÀç ³Êºñ¸¦ »ç¿ë).

ÃÖ»óÀ§ ¿¤·¹¸àÆ®ÀÇ ÃÖÃÊ ¿ë±âºí·°ÀÇ ³ôÀÌ´Â 'height' ¼Ó¼ºÀ¸·Î ÁöÁ¤µÉ ¼ö ÀÖ´Ù. ÀÌ ¼Ó¼ºÀÌ °ª 'auto'¸¦ °¡Áö¸é, ±× ¿ë±âºí·°ÀÇ ³ôÀÌ´Â ±× ¹®¼­ÀÇ ³»¿ë¿¡ ÀûÇÕÇϵµ·Ï Ä¿±æ °ÍÀÌ´Ù.

ÃÖÃÊ ¿ë±âºí·°Àº À§Ä¡(position)µÇ°Å³ª À¯µ¿(float)µÉ ¼ö ¾ø´Ù(»ç¿ëµµ±¸µéÀº ÃÖ»óÀ§ ¿¤·¹¸àÆ®ÀÇ 'position'°ú 'float' ¼Ó¼ºÀ» ¹«½Ã ÇÔ).

¾î¶»°Ô ¿ë±âºí·°ÀÇ Å©±â°¡ °è»êµÇ´Â°¡ ÇÏ´Â ¼¼ºÎ»çÇ×Àº ´ÙÀ½ Àå¿¡ ¼³¸íµÇ¾ú´Ù.

9.2 ¹Ú½º »ý¼º Á¦¾î

´ÙÀ½ Ç׸ñµéÀº CSS2¿¡¼­ »ý¼ºµÉ ¼ö ÀÖ´Â ¹Ú½º(box)µéÀÇ Å¸ÀÔµéÀ» Á¤ÀÇÇÑ´Ù. ÇϳªÀÇ ¹Ú½º ŸÀÔ(type)Àº, ºÎºÐÀûÀ¸·Î, º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨·Î ÀÛ¿ëÇÏ´Â È¿°ú¸¦ °®´Â´Ù. ¾Æ·¡¿¡ ±â¼úµÈ 'display' ¼Ó¼ºÀº ¹Ú½ºÀÇ Å¸ÀÔÀ» ÁöÁ¤ÇÑ´Ù.

9.2.1 ºí·°·¹º§(block-level) ¿¤·¹¸àÆ®¿Í ºí·° ¹Ú½º(block box)

ºí·°·¹º§(block-level) ¿¤·¹¸àÆ®´Â ±× ÀÚ¿ø ¹®¼­(source)ÀÇ ºí·°µé·Î ½Ã°¢ÀûÀ¸·Î ¾ç½ÄÈ­µÈ ¿¤·¹¸àÆ®µéÀÌ´Ù(¿¹: ¹®´Üµé). 'display' ¼Ó¼ºÀÇ ¿©·¯°¡Áö °ªµéÀº ºí·°·¹º§ ¿¤·¹¸àÆ®¸¦ ¸¸µç´Ù: 'block', 'list-item', 'Ä¡¹Ð('compact'), ¼±Çà('run-in') ¹Ú½º, 'table'.

ºí·°·¹º§ ¿¤·¹¸àÆ®´Â, ºí·° ¹Ú½º(block box) ¸¸À» °®´Â ±âº»(principal) ºí·° ¹Ú½º¸¦ »ý¼ºÇÑ´Ù. ÀÌ ±âº» ºí·° ¹Ú½º´Â, ÇÏÀ§(descendant) ¹Ú½ºµé°ú »ý¼ºµÈ ³»¿ëÀ» À§ÇÑ ¿ë±âºí·°¸¦ »ý¼ºÇÏ°í, ¶ÇÇÑ ÀÌ ¹Ú½º´Â ¾î¶² À§Ä¡ ¸ÂÃ߱⠱â´É(positioning scheme)¿¡µµ °ü·ÃÇÑ´Ù. ±âº» ºí·° ¹Ú½º´Â ºí·° ¾ç½ÄÈ­ ¹®¸Æ¿¡µµ Âü¿©ÇÑ´Ù.

ÀϺΠºí·°·¹º§ ¿¤·¹¸àÆ®´Â ±âº»¹Ú½º ¿Ü¿¡, 'list-item' ¿¤·¹¸àÆ®¿Í Ç¥½ÃÀÚ(marker)¸¦ °®´Â Ãß°¡ÀûÀÎ ¹Ú½ºµéÀ» »ý¼ºÇÑ´Ù: À̵é Ãß°¡Àû ¹Ú½º´Â ±âº»¹Ú½º¿¡ ´ëÇÏ¿© À§Ä¡µÈ´Ù.

°¡¸í(anonymous) ºí·° ¹Ú½º(block box)

¾Æ·¡¿Í °°Àº ¹®¼­¿¡¼­:

<DIV>
Some text

<P>More text
</DIV>

(ÀÌ DIV¿Í P µÑ´Ù 'display: block'¸¦ °®´Â´Ù°í °¡Á¤Çϸé), DIVÀº ÀζóÀÎ(inline) ³»¿ë°ú ºí·° ³»¿ë µÑ ´Ù °®´Â °ÍÀ¸·Î ³ªÅ¸³­´Ù. ¾ç½ÄÈ­ Á¤ÀǸ¦ ½±°ÔÇϱâ À§ÇÏ¿©, "Some text" ÁÖÀ§¿¡ °¡¸í ºí·° ¹Ú½º°¡ ÀÖ´Ù°í °¡Á¤ÇÏÀÚ.

À§ ¿¹Á¦ÀÇ ¼¼ ¹Ú½º(box)µéÀ» ¼³¸íÇÏ´Â µµÇ¥   [D]

À§ ¿¹Á¦ ¼¼ ¹Ú½ºµéÀ» ¼³¸íÇÏ´Â µµÇ¥·Î, ±× Áß Çϳª´Â °¡¸íÀÌ´Ù.

´Ù½Ã ¸»Çϸé: ¸¸ÀÏ ºí·° ¹Ú½º(À§ÀÇ DIV¿¡¼­»ý¼ºµÈ °Í°ú °°Àº)°¡ ±× ¾È¿¡ ´Ù¸¥ ºí·° ¹Ú½º(À§¿¡¼­ P¿Í °°Àº)¸¦ °¡Áö°í ÀÖ´Ù¸é, °¡¸í ºí·° ¹Ú½º ¾ÈÀÇ ¾î¶² ÀζóÀÎ ¹Ú½º(inline box)µé °¨½Î¼­, ³»ºÎ¿¡ ºí·° ¹Ú½ºµé ¸¸ °¡Áö´Â °ÍÀ¸·Î µÈ´Ù.

¿¹Á¦:

¸¸ÀÏ ´ÙÀ½ ¸í·ÉÀÌ ÀÖÀ¸¸é, ´ÙÀ½ ¿¹Á¦¿¡¼­ ÀÌ ¸ðµ¨ÀÌ Àû¿ëµÈ´Ù:

/* ÁÖ¼®: HTML »ç¿ëµµ±¸µéÀº ÀÌµé ¸í·ÉÀ» µû¸£Áö ¾ÊÀ» ¼ö ÀÖ´Ù. */
BODY { display: inline }
P { display: block }

¾Æ·¡¿Í °°ÀÌ HTML ¹®¼­¿¡¼­ »ç¿ëµÇ¸é:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <HEAD>
    <TITLE>ºí·°¿¡ ÀÇÇÑ °¡¸í(anonymous) ÅؽºÆ® ¼³¸í</TITLE>
  </HEAD>
<BODY>
 ÀÌ°ÍÀÌ P ÀÌÀüÀÇ °¡¸í ÅؽºÆ®ÀÌ´Ù.
 <P>ÀÌ°ÍÀº PÀÇ ³»¿ëÀÌ¸ç °¡¸íÀÌ ¾Æ´Ï´Ù.</P>
 ÀÌ°ÍÀº P ´ÙÀ½ÀÇ °¡¸í ÅؽºÆ®ÀÌ´Ù.
</BODY>

BODY ¿¤·¹¸àÆ®¿¡´Â °¡¸í ÅؽºÆ®ÀÇ ºÎºÐ(C1), ±× µÚ¸¦ µû¸£´Â ºí·°·¹º§ ¿¤·¹¸àÆ®, ±× µÚ¸¦ µû¸£´Â ´Ù¸¥ °¡¸í ÅؽºÆ®ÀÇ ÁÖºÐ(C2)¸¦ Æ÷ÇÔÇÑ´Ù. °á°úÀûÀÎ ¹Ú½º´Â, °¡¸í ºí·° ¹Ú½º(C1), ´ÙÀ½ P ºí·° ¹Ú½º, ±× µÚÀÇ ´Ù¸¥ °¡¸í ºí·° ¹Ú½º(C2) ¸¦ Æ÷ÇÔÇÏ´Â, BODYÀÇ °¡¸í ºí·° ¹Ú½ºÀÌ´Ù.

°¡¸í ¹Ú½ºÀÇ ¼Ó¼ºµéÀº °¨½Î°í ÀÖ´Â ºñ °¡¸í ¹Ú½º(¿¹Á¦¿¡¼­: DIV)¿¡¼­ ºÎÅÍ Àü´Þ(inherit)µÈ´Ù. Àü´ÞµÇÁö ¾ÊÀº ¼Ó¼ºµéÀº ±× ÃÖÃÊ°ªÀ» °®´Â´Ù. ¿¹¸¦ µé¾î, °¡¸í(anonymous) ¹Ú½ºÀÇ ±Û²ÃÀº DIVÀ¸·Î ºÎÅÍ Àü´ÞµÇÁö ¸¸, ±× ¸¶ÁøÀº '0' ÀÌ µÈ´Ù.

9.2.2 ÀζóÀÎ(inline-level) ¿¤·¹¸àÆ®°ú ÀζóÀÎ ¹Ú½º

ÀζóÀÎ(inline-level) ¿¤·¹¸àÆ®Àº, ³»¿ëÀÇ »õ·Î¿î ºí·°µé·Î ºÎÅÍ ¿ÀÁö ¾Ê°í, ¿ø¹®(source)ÀÇ ¿¤·¹¸àÆ®µéÀÌ´Ù; ³»¿ëÀº ¿©·¯ ÁÙ¿¡ ºÐÆ÷µÇ¾î ÀÖ´Ù(¿¹: ¹®´Ü, ÀζóÀÎ À̹ÌÁöµé ¾ÈÀÇ ÅؽºÆ®¿¡¼­ °­Á¶µÈ ºÎºÐ, µî). 'display' ¼Ó¼ºÀÇ ¿©·¯ °ªµéÀÌ ÀζóÀÎ(inline) ¿¤·¹¸àÆ®¸¦ ¸¸µç´Ù: 'inline', 'inline-table', compact'('Ä¡¹Ð: ½Ã°£ ¹®Á¦), 'run-in'(¼±Çà ¹Ú½º: ½Ã°£ ¹®Á¦). ÀζóÀÎ ¿¤·¹¸àÆ®µéÀº ÀζóÀÎ ¹Ú½ºµéÀ» »ý¼ºÇÑ´Ù.

ÀζóÀÎ ¹Ú½ºµéÀº ¿©·¯ ¾ç½ÄÈ­ ¹®¸Æ¿¡ Âü¿©ÇÒ ¼ö ÀÖ´Ù:

°¡¸í(anonymous) ÀζóÀÎ ¹Ú½º(inline box)

¾Æ·¡¿Í °°Àº ¹®¼­¿¡¼­:

<P>Some <EM>emphasized</EM> text</P>

P´Â, ±× ¾ÈÀÇ ¿©·¯ ÀζóÀÎ ¹Ú½ºµé·Î ºí·° ¹Ú½º¸¦ »ý¼ºÇÑ´Ù. °­Á¶µÇ´Â("emphasized") ¹Ú½º´Â ÀζóÀÎ ¿¤·¹¸àÆ® EM¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ÀζóÀÎ ¹Ú½ºÀÌ´Ù. ±×·¯³ª ´Ù¸¥("Some"°ú "text") ¹Ú½ºµéÀº, ºí·°·¹º§ ¿¤·¹¸àÆ® P¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ÀζóÀÎ ¹Ú½ºµéÀÌ´Ù. ³ªÁß °ÍÀ» °¡¸í(anonymous) ÀζóÀÎ ¹Ú½º¶ó Çϴµ¥, ¿¬°üµÈ ÀζóÀÎ ¿¤·¹¸àÆ®¸¦ °¡Áö°í ÀÖÁö ¾Ê±â ¶§¹®ÀÌ´Ù.

ÀÌ¿Í °°Àº °¡¸í ÀζóÀÎ ¹Ú½ºµéÀº, Àü´ÞµÉ ¼ö Àִ¼ӼºµéÀ», ±×µéÀÇ ºí·° ¸ðü ¹Ú½º·Î ºÎÅÍ Àü´Þ(inherit) ¹Þ´Â´Ù. Àü´ÞµÇÁö ¾Ê´Â ¼Ó¼ºÀº ±×µéÀÇ ÃÖÃÊ°ªÀ» °®´Â´Ù. ÀÌ ¿¹Á¦¿¡¼­, °¡¸í ÃÖÃÊ ¹Ú½ºÀÇ »ö»óÀº P·Î ºÎÅÍ Àü´ÞµÇ¾úÀ¸³ª, ¹è°æ Åõ¸íÇÏ´Ù.

¹®¸ÆÀ¸·ÎºÎÅÍ ¾î´À ŸÀÔÀÌ °¡¸í ¹Ú½º Àΰ¡°¡ ¸í¹éÇϸé, ÀÌ ±Ô°Ý¿¡¼­´Â, °¡¸í ÀζóÀÎ ¹Ú½º¿Í °¡¸í ºí·° ¹Ú½º¸¦ ´Ù °£´ÜÈ÷ °¡¸í ¹Ú½º¶ó ºÎ¸¥´Ù.

Å×À̺í(table)ÀÇ ¾ç½ÄÈ­¿¡¼­ ³ªÅ¸³ª´Â ´Ù¸¥ °¡¸í ¹Ú½ºµéÀÌ ´õ ÀÖ´Ù.

9.2.3 Ä¡¹Ð ¹Ú½º(compact box)

Ä¡¹Ð ¹Ú½º´Â ´ÙÀ½°ú °°ÀÌ ÀÛ¿ëÇÑ´Ù:

Ä¡¹Ð ¹Ú½ºÀÇ ¸¶Áø ¾È¿¡¼­ ÁÖ¾îÁø À§Ä¡´Â ´ÙÀ½°ú °°´Ù: ºí·°ÀÇ Ã¹¹ø° ¶óÀÎ ¹Ú½ºÀÇ ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊ ¹ÛÀÌ´Ù. ±×·¯³ª, ±× ¶óÀÎ ¹Ú½ºÀdzôÀÌÀÇ °è»ê¿¡ ¿µÇâÀ» ÁØ´Ù. Ä¡¹Ð ¹Ú½ºÀÇ 'vertical-align' ¼Ó¼ºÀº ¶óÀÎ ¹Ú½º¿¡ »ó´ëÀûÀ¸·Î Ä¡¹Ð ¹Ú½ºÀÇ ¼öÁ÷ À§Ä¡°¡ °áÁ¤µÈ´Ù. Ä¡¹Ð ¹Ú½ºÀÇ ¼öÆò À§Ä¡´Â Ç×»ó ºí·° ¹Ú½º ¸¶Áø ¾È¿¡ ÀÖ´Ù.

ÇÑ ÁÙ¿¡ ¾ç½ÄÈ­µÉ ¼ö ¾ø´Â ¿¤·¹¸àÆ®´Â ´ÙÀ½ ºí·°ÀÇ ¸¶Áø ¾È¿¡ À§Ä¡µÉ ¼ö ¾ø´Ù. ¿¹¸¦ µé¾î, HTML¿¡¼­ BR ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔÇÑ 'compact' ¿¤·¹¸àÆ®´Â Ç×»ó ºí·° ¹Ú½º·Î ¾ç½ÄÈ­µÈ´Ù(BRÀÇ µðÆúÆ® ½ºÅ¸ÀÏÀº »õÁÙÀ» »ðÀÔÇÏ´Â °ÍÀ¸·Î °¡Á¤ÇÑ´Ù). ¸¶Áø ¾ÈÀÇ ¿©·¯ ÁÙ(multi-line)ÀÇ ÅؽºÆ®¸¦ À§Ä¡½ÃÅ°´Â °ÍÀº, ´ëºÎºÐ À¯µ¿('float') ¼Ó¼ºÀÌ ´õ Àû´çÇÏ´Ù.

´ÙÀ½ ¿¹Á¦´Â Ä¡¹Ð ¹Ú½º¸¦ ¼³¸íÇÑ´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Ä¡¹Ð ¹Ú½º ¿¹Á¦</TITLE>
      <STYLE type="text/css">
         DT { display: compact }
         DD { margin-left: 4em }
      </STYLE>
   </HEAD>
   <BODY>
      <DL>
         <DT>Short
            <DD><P>Description goes here.
         <DT>too long for the margin
            <DD><P>Description goes here.
      </DL>
   </BODY>
</HTML>

ÀÌ ¿¹Á¦´Â ´ÙÀ½°ú °°ÀÌ ¾ç½ÄÈ­µÈ´Ù:

short Description goes here

too long for the margin

Description goes here

'text-align' ¼Ó¼ºÀº ¸¶Áø ¾È¿¡¼­ Ä¡¹Ð(compact) ¿¤·¹¸àÆ®¸¦ Á¤·ÄÇϴµ¥ »ç¿ëµÉ ¼ö ÀÖ´Ù: ¸¶Áø ¿ÞÂÊ ¸ð¼­¸®(edge)¿¡ ´ëÇÏ¿©¼­´Â 'left', ¿ÞÂÊ ¸ð¼­¸®¿¡ ´ëÇؼ­´Â 'right', ¶Ç´Â ¸¶Áø ¾È¿¡¼­ °¡¿îµ¥ 'center'. °ª 'justify'°¡ Àû¿ëµÇÁö ¾Ê°í, ±× ¸¶Áø ¾È¿¡¼­ Ä¡¹Ð ¿¤·¹¸àÆ®°¡ ¾ç½ÄÈ­µÇ´Â, ºí·°·¹º§(block-level) ¿¤·¹¸àÆ®ÀÇ ¹æÇâ('direction')¿¡ µû¶ó 'left' ¶Ç´Â 'right'À¸·Î 󸮵ȴÙ(±ÛÀÚ¹æÇâÀÌ ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î('ltr')ÀÌ¸é ¿ÞÂÊ('left'), 'rtl'À̸é 'right').

Ä¡¹Ð ¹Ú½ºµéÀÌ »ý¼ºÇÑ ³»¿ë°ú ¾î¶»°Ô ÀÛ¿ëÇϴ°¡¿¡ ´ëÇÑ Á¤º¸´Â »ý¼ºµÈ ³»¿ë Ç׸ñÀ» ÂüÁ¶Ç϶ó

9.2.4 ¼±Çà(run-in) ¹Ú½º(box)

¼±Çà(run-in) ¹Ú½º´Â ´ÙÀ½°ú °°ÀÌ ÀÛ¿ëÇÑ´Ù:

'run-in' ¹Ú½º´Â run-in Çì´õ(header)µé¿¡ À¯¿ëÇѵ¥, ¾Æ·¡ ¿¹Á¦¿¡¼­:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>¼±Çà ¹Ú½º ¿¹Á¦</TITLE>
    <STYLE type="text/css">
       H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
     <H3>A run-in heading.</H3>
     <P>And a paragraph of text that follows it.
  </BODY>
</HTML>

ÀÌ ¿¹Á¦´Â ¾Æ·¡¿Í °°ÀÌ ¾ç½ÄÈ­µÈ´Ù:

A run-in heading. And a
paragraph of text that
follows it.

ÀÌ ¿¤·¹¸àÆ®ÀÇ run-in(¼±Çà) ¼Ó¼ºÀº, ½Ã°¢ÀûÀ¸·Î ±× ºÎºÐÀÌ µÇ´Â ºí·° ¹Ú½º·Î ºÎÅÍ°¡ ¾Æ´Ï¶ó, ÀÚ¿ø(source) °èÅë¿¡¼­ ±×ÀÇ ¸ðü·Î ºÎÅÍ Àü´Þ(inherit)µÈ´Ù.

¼±Çà(run-in) ¹Ú½º°¡ »ý¼ºÇÑ ³»¿ë°ú ¾î¶»°Ô ÀÛ¿ëÇϴ°¡¿¡ ´ëÇÑ Á¤º¸´Â »ý¼ºµÈ ³»¿ë Ç׸ñÀ» ÂüÁ¶Ç϶ó

9.2.5 'display' ¼Ó¼º

'display'
°ª:   inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
ÃÖÃÊ°ª:  inline
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  all

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

block(ºí·°)
ÀÌ °ªÀº ¿¤·¹¸àÆ®°¡ ±âº»(principal) ºí·° ¹Ú½º¸¦ »ý¼ºÇÏ°Ô ÇÑ´Ù.
inline(ÀζóÀÎ)
ÀÌ °ªÀº ¿¤·¹¸àÆ®°¡ ÀζóÀÎ ¹Ú½º¸¦ »ý¼ºÇÏ°Ô ÇÑ´Ù.
list-item(¸ñ·Ï Ç׸ñ)
ÀÌ °ªÀº ¿¤·¹¸àÆ®(¿¹: HTML¿¡¼­ LI)°¡ ±âº» ºí·° ¹Ú½º¿Í ¸ñ·Ï Ç׸ñÀÇ ÀζóÀÎ ¹Ú½º¸¦ »ý¼ºÇÏ°Ô ÇÑ´Ù. ¸ñ·Ï°ú ¸ñ·Ï ¾ç½ÄÈ­ ¿¹Á¦¿¡ ´ëÇÑ Á¤º¸´Â ¸ñ·Ï(list) Ç׸ñÀ» ÂüÁ¶Ç϶ó.
marker(Ç¥½ÃÀÚ)
ÀÌ °ªÀº ¹Ú½ºÀÇ ¾Õ, µÚ »ý¼ºµÈ ³»¿ë¿¡ Ç¥½ÃÀÚ°¡ µÇµµ·Ï ¼±¾ðÇÑ´Ù. ÀÌ °ªÀº ºí·°·¹º§ ¿¤·¹¸àÆ®¿¡ ÷ºÎµÈ :before ¿Í :after °¡»ó ¿¤·¹¸àÆ®µé¿¡ ¸¸ »ç¿ëµÇ¾î¾ß ÇÑ´Ù. ´Ù¸¥ °æ¿ì, ÀÌ °ªÀº 'inline'À¸·Î Çؼ®µÈ´Ù. Ç¥½ÃÀÚ(marker)¿¡ ´ëÇÑ Ãß°¡ Á¤º¸¸¦ ÂüÁ¶Ç϶ó.
none
ÀÌ °ªÀº ¾ç½ÄÈ­ ±¸Á¶ ¾ÈÀÇ ¹Ú½º¿¡ ¿¤·¹¸àÆ®¸¦ »ý¼ºÇÏÁö ¾Ê´Â´Ù(±× ¿¤·¹¸àÆ®´Â ¹è¿­ È¿°ú°¡ ¾ø´Ù). ÇÏÀ§(descendant) ¿¤·¹¸àÆ®µéµµ ¾î¶² ¹Ú½º »ý¼ºÇÏÁö ¾Ê´Â´Ù; ÀÌ ÀÛ¿ëÀº, ÇÏÀ§¿¡ 'display' ¼Ó¼ºÀ» ¼³Á¤ÇÔÀ¸·Î¼­, µ¤¾î¾º¿ö(override) Áú ¼ö ¾ø´Ù.

'none'ÀÇ µð½ºÇ÷¹ÀÌ(display)´Â º¸ÀÌÁö ¾Ê´Â ¹Ú½º¸¦ »ý¼ºÇÏÁö ¾Ê´Â´Ù´Â Á¡¿¡ À¯ÀÇÇ϶ó; ÀÌ´Â ¾Æ¹« ¹Ú½ºµµ »ý¼ºÇÏÁö ¾Ê´Â´Ù. CSS ±â´ÉµéÀ» ¿¤·¹¸àÆ®°¡ ¾ç½ÄÈ­ ±¸Á¶ ¾È¿¡¼­, ±× ÀÚü´Â º¸ÀÌÁö ¾ÊÀ¸³ª ¾ç½ÄÈ­¿¡ ¿µÇâÀ» ÁÖ´Â ¹Ú½º¸¦ »ý¼ºÇÒ ¼ö ÀÖ´Ù. ¼¼ºÎ»çÇ× º¸ÀÓ¼º(visibility)¸¦ ÂüÁ¶Ç϶ó.

¼±Çà(run-in)°ú Ä¡¹Ð(compact)
ÀÌ °ªµéÀº ¹®¸Æ¿¡ µû¶ó ºí·° ¶Ç´Â ÀζóÀÎ ¹Ú½ºÀ» »ý¼ºÇÑ´Ù. ¼Ó¼ºµéÀº ±×µéÀÇ, ÀζóÀÎ ¶Ç´Â ºí·°·¹º§Àΰ¡ ÇÏ´Â, ÃÖÁ¾ »óÅ¿¡ µû¶ó ¼±Çà°ú Ä¡¹Ð ¹Ú½ºµé¿¡ Àû¿ëµÈ´Ù. ¿¹¸¦ µé¾î, 'white-space' ¼Ó¼ºÀº ±× ¹Ú½º°¡ ºí·° ¹Ú½º ÀÏ ¶§ ¸¸ Àû¿ëµÈ´Ù.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption
ÀÌ °ªµéÀº Å×À̺í(table) ¿¤·¹¸àÆ®¿Í °°ÀÌ ÀÛ¿ëÇÏ´Â ¿¤·¹¸àÆ®¸¦ À¯¹ßÇÑ´Ù(Å×À̺í Ç׸ñ¿¡ ±â¼úµÈ Á¦ÇÑ¿¡ ÀÇÇÏ¿©).

'display'ÀÇ ÃÖÃÊ°ªÀÌ 'inline'À̶óµµ, »ç¿ëµµ±¸ÀÇ µðÆúÆ® ½ºÅ¸ÀϽ¬Æ®¿¡¼­ ¸í·Éµé·Î ÀÌ °ªÀ» µ¤¾î¾º¿ï(override) ¼ö ÀÖ´Ù´Â Á¡¿¡ À¯ÀÇÇ϶ó. ºÎ·ÏÀÇ HTML 4¸¦ À§ÇÑ ½ºÅ¸ÀϽ¬Æ® ¿¹Á¦¸¦ ÂüÁ¶Ç϶ó.

¿¹Á¦:

¿©±â 'display' ¼Ó¼º ÀϺΠ¿¹Á¦µéÀÌ ÀÖ´Ù:

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none } /* À̹ÌÁöµéÀÌ µð½ºÇ÷¹À̵ÇÁö ¾ÊÀ½ */

±Ô°Ý¿¡ ºÎÇÕÇÏ´Â HTML »ç¿ëµµ±¸µéÀº 'display' ¼Ó¼ºÀ» ¹«½ÃÇÒ ¼ö ÀÖ´Ù.

9.3 À§Ä¡ ¸ÂÃß´Â ±â´É(positioning scheme)

CSS2¿¡¼­ ¹Ú½º´Â ¼¼°¡ÁöÀ§Ä¡ ¸ÂÃß´Â ±â´É¿¡ µû¶ó ¹èÄ¡µÉ ¼ö ÀÖ´Ù:

  1. Á¤»ó È帧(normal flow). CSS2¿¡¼­ Á¤»ó È帧Àº ºí·° ¹Ú½ºÀÇ ºí·° ¾ç½ÄÈ­, ÀζóÀÎ ¹Ú½ºÀÇ ÀζóÀÎ ¾ç½ÄÈ­, ºí·° ¶Ç´Â ÀζóÀÎ ¹Ú½ºÀÇ »ó´ëÀ§Ä¡, ±×¸®°í Ä¡¹Ð(compact)°ú ¼±Çà(run-in) ¹Ú½ºµéÀÇ À§Ä¡ ¸ÂÃ߱⸦ Æ÷ÇÔÇÑ´Ù.
  2. À¯µ¿(float). À¯µ¿ ¸ðµ¨¿¡¼­ ¹Ú½º´Â óÀ½¿¡´Â Á¤»ó È帧¿¡ µû¶ó ¹è¿­µÇ°í, ±× ÈÄ °¡´ÉÇÑ ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊ À¯ÅëÇÏ¿© º¯°æµÈ´Ù. ³»¿ëÀº À¯µ¿ ¸é¿¡ µû¶ó À̵¿ÇÑ´Ù.
  3. Àý´ëÀ§Ä¡. Àý´ëÀ§Ä¡ ¸ðµ¨¿¡¼­, ¹Ú½º´Â Á¤»ó È帧¿¡¼­ ÀüºÎ Á¦°ÅµÇ°í, ÀÌ´Â ³ªÁß ÇüÁ¦(sibling)¿¡´Â ¿µÇâÀÌ ¾øÀ¸¸ç, ¿ë±âºí·°(containing block)¿¡ ´ëÇÏ¿© À§Ä¡°¡ ÁöÁ¤µÈ´Ù.
ÁÖ¼®. Á¦ÀÛÀÚµéÀÌ CSS2ÀÇ À§Ä¡ ¸ÂÃß´Â ±â´ÉÀ» ¹è¿­ È¿°ú¿¡ »ç¿ëµÇ´Â ¸¶Å©¾÷(mark-up) ±â±³(¿¹: º¸ÀÌÁö ¾Ê´Â À̹ÌÁöµé)¿¡ »ç¿ëÇÏÁö ¸»°í, ¹®¼­µéÀ» ´õ ½±°Ô Á¢¼ÓÇϵµ·Ï µ½´Â°ÍÀÌ ÁÁ´Ù.

9.3.1 À§Ä¡ ¸ÂÃß´Â ±â´ÉÀÇ ¼±ÅÃ: 'position' ¼Ó¼º

'position'¿Í 'float' ¼Ó¼ºÀº, ¹Ú½ºÀÇ À§Ä¡¸¦ °è»êÇϴµ¥, ¾î¶² CSS2ÀÇ À§Ä¡ ¸ÂÃß´Â ±â´ÉÀÌ »ç¿ëµÇ´Â°¡¸¦ °áÁ¤ÇÑ´Ù.

'position'
°ª:  static | relative | absolute | fixed | inherit
ÃÖÃÊ°ª:  static
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé, ±×·¯³ª ³»¿ëÀº »ý¼ºÇÏÁö ¾Ê´Â´Ù.
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

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

static
¹Ú½º´Â Á¤»ó È帧(normal flow)¿¡ µû¶ó ¹è¿­µÇ´Â Á¤»ó ¹Ú½ºÀÌ´Ù, 'left'¿Í 'top' ¼Ó¼ºÀº Àû¿ëµÇÁö ¾Ê´Â´Ù.
relative(»ó´ë)
¹Ú½ºÀÇ À§Ä¡´Â Á¤»ó È帧¿¡ µû¶ó °è»êµÈ´Ù(À̸¦ Á¤»ó È帧(position normal flow)ÀÇ À§Ä¡¶ó ÇÔ). ±× ÈÄ ¹Ú½º´Â Á¤»óÀ§Ä¡¿¡ »ó´ëÀû(relative) ¿ÀÇÁ¼¼Æ®(offset)µÈ´Ù. ¹Ú½º B°¡ »ó´ëÀûÀ¸·Î À§Ä¡µÈ °ÍÀ̸é, B°¡ ¿ÀÇÁ¼¼Æ®µÇÁö ¾ÊÀº °Íó·³, ´ÙÀ½ ¹Ú½ºÀÇ À§Ä¡´Â °è»êµÈ´Ù.
absolute(Àý´ë)
¹Ú½ºÀÇ À§Ä¡(Å©±âµµ °¡´É)´Â 'left', 'right', 'top', 'bottom' ¼Ó¼ºµé·Î ÁöÁ¤µÈ´Ù. ÀÌ ¼Ó¼ºµé ¹Ú½ºÀÇ ¿ë±âºí·°¿¡ ´ëÇÏ¿© ¿ÀÇÁ¼¼Æ®µéÀ» ÁöÁ¤ÇÑ´Ù. Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½ºµéÀº Á¤»ó È帧À¸·ÎºÎÅÍ Á¦¿ÜµÈ´Ù. ÀÌ´Â ³ªÁß ÇüÁ¦(sibling)µéÀÇ ¹è¿­¿¡ ¿µÇâÀ» ÁÖÁö ¾ÊÀ½À» ÀǹÌÇÑ´Ù. ¶ÇÇÑ, Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½ºµéÀº ¸¶ÁøÀ» °¡ÁöÁö¸¸, ¾î¶² ´Ù¸¥ ¸¶Áøµé·Î ÅëÇÕ(collapse)µÇÁö´Â ¾Ê´Â´Ù.
fixed(°íÁ¤)
¹Ú½ºÀÇ À§Ä¡´Â 'absolute' ¸ðµ¨¿¡ µû¶ó °è»êµÈ´Ù. ±×·¯³ª, Ãß°¡ÀûÀ¸·Î, ¹Ú½º´Â ÀϺΠÂüÁ¶¿¡ ´ëÇÏ¿© °íÁ¤µÈ´Ù. ¿¬¼Ó(continuous) ¸Þµð¾ÆÀÇ °æ¿ì, ¹Ú½º´Â ºäÆ÷ÀÎÆ®(viewport)¿¡ ´ëÇÏ¿© °íÁ¤µÇ°í, ½ºÄݸµ(scroll)ÇÒ ¶§ À̵¿µÇÁö ¾Ê´Â´Ù. ÆäÀÌÁöÈ­µÈ(paged) ¸Þµð¾ÆÀÇ °æ¿ì, ¹Ú½º´Â, ºäÆ÷ÀÎÆ®¸¦ ÅëÇÏ¿© ±× ÆäÀÌÁö°¡ º¸ÀÌ´Â °Íó·³(¿¹: print-preview), ±× ÆäÀÌÁö¿¡ ´ëÇÏ¿© °íÁ¤µÈ´Ù. Á¦ÀÛÀÚµéÀº ¸Þµð¾Æ¿¡ µû¶ó ´Ù¸¥ °íÁ¤ ¹æ¹ýÀÇ ÁöÁ¤À» ¿øÇÒ ¼ö°¡ ÀÖ´Ù. ¿¹¸¦ µé¾î, Á¦ÀÛÀÚ´Â ¹Ú½º°¡, °¢ ÀμâµÈ ÆäÀÌÁöÀÇ ¸ÇÀ§°¡ ¾Æ´Ï¶ó, ½ºÅ©¸°ÀÇ ºäÆ÷ÀÎÆ®ÀÇ ¸ÇÀ§¿¡ ¿øÇÒ ¼ö ÀÖ´Ù. ÀÌ µÎ°¡Áö´Â @media ¸í·ÉÀ» »ç¿ëÇÏ¿© ¾Æ·¡¿Í °°ÀÌ ±¸º°µÉ ¼ö ÀÖ´Ù:

¿¹Á¦:

@media screen {
   H1#first { position: fixed }
}
@media print {
   H1#first { position: static }
}

9.3.2 ¹Ú½ºÀÇ ¿ÀÇÁ¼¼Æ®(offset): 'top', 'right', 'bottom', 'left'

±× 'position' ¼Ó¼ºÀÌ 'static' ÀÌ¿ÜÀÇ °ªÀ» °¡Áö¸é, ¿¤·¹¸àÆ®´Â À§Ä¡µÈ(positioned)´Ù°í ¸»ÇÒ ¼ö ÀÖ´Ù. À§Ä¡µÈ ¿¤·¹¸àÆ®´Â ´ÙÀ½ ³×°¡Áö ¼Ó¼ºµé¿¡ µû¶ó À§Ä¡µÈ ¹Ú½º¸¦ »ý¼ºÇÑ´Ù:

'top'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | auto | inherit
ÃÖÃÊ°ª:  auto
Àû¿ë:  À§Ä¡µÈ ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  ¿ë±âºí·°ÀÇ ³ôÀÌ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¹Ú½º ³»¿ëÀÇ ¸ÇÀ§ ¸ð¼­¸®(edge)°¡, ¹Ú½ºÀÇ ¿ë±âºí·°ÀÇ ¸ÇÀ§ ¸ð¼­¸®¿¡¼­, ¾Æ·¡·Î ¾ó¸¶³ª ¸Ö¸® ¿ÀÇÁ¼¼Æ®µÇ´Â°¡(°Å¸®°¡ Àִ°¡)¸¦ ÁöÁ¤ÇÑ´Ù.

'right'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | auto | inherit
ÃÖÃÊ°ª:  auto
Àû¿ë:  À§Ä¡µÈ ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¹Ú½º ³»¿ëÀÇ ¿À¸¥ÂÊ ¸ð¼­¸®°¡, ¹Ú½ºÀÇ ¿ë±âºí·°ÀÇ ¿À¸¥ÂÊ ¸ð¼­¸® ¿ÞÂÊ ¿¡¼­, ¿À¸¥ÂÊÀ¸·Î ¾ó¸¶³ª ¸Ö¸® ¿ÀÇÁ¼¼Æ®µÇ´Â°¡¸¦ ÁöÁ¤ÇÑ´Ù.

'bottom'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | auto | inherit
ÃÖÃÊ°ª:  auto
Àû¿ë:  À§Ä¡µÈ ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  ¿ë±âºí·°ÀÇ ³ôÀÌ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¹Ú½º ³»¿ëÀÇ ¸Ç¾Æ·¡ ¸ð¼­¸®°¡, ¹Ú½ºÀÇ ¿ë±âºí·°ÀÇ ¸Ç¾Æ·¡ ¸ð¼­¸®¿¡¼­, À§·Î ¾ó¸¶³ª ¸Ö¸® ¿ÀÇÁ¼¼Æ®µÇ´Â°¡¸¦ ÁöÁ¤ÇÑ´Ù.

'left'
°ª:  <±æÀÌ> | <¹éºÐÀ²> | auto | inherit
ÃÖÃÊ°ª:  auto
Àû¿ë:  À§Ä¡µÈ ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¹Ú½º ³»¿ëÀÇ ¿ÞÂÊ ¸ð¼­¸®°¡, ¹Ú½ºÀÇ ¿ë±âºí·°ÀÇ ¿ÞÂÊ ¸ð¼­¸® ¿À¸¥ÂÊ¿¡¼­, ¾ó¸¶³ª ¸Ö¸® ¿ÀÇÁ¼¼Æ®µÇ´Â°¡¸¦ ÁöÁ¤ÇÑ´Ù.

³×°¡Áö ¼Ó¼ºµéÀÇ ±× °ªµéÀº ´ÙÀ½ Àǹ̸¦ °®´Â´Ù:

<±æÀÌ>
¿ÀÇÁ¼¼Æ®(offset)´Â ÂüÁ¶ ¸ð¼­¸®À¸·Î ºÎÅÍÀÇ °íÁ¤µÈ ±æÀÌÀÌ´Ù.
<¹éºÐÀ²>
¿ÀÇÁ¼¼Æ®´Â ¿ë±âºí·° ³Êºñ('left' ¶Ç´Â 'right') ¶Ç´Â ³ôÀÌ('top', 'bottom')ÀÇ ¹éºÐÀ²ÀÌ´Ù. 'top'°ú 'bottom'¿¡¼­, ¿ë±âºí·°ÀÇ ³ôÀÌ°¡ ¸í½ÃÀûÀ¸·Î ÁöÁ¤µÇÁö ¾Ê¾ÒÀ¸¸é(³»¿ë ³ôÀÌ¿¡ µû¸§), ¹éºÐÀ²°ªÀº 'auto'¿Í °°ÀÌ Çؼ®µÈ´Ù.
auto(ÀÚµ¿)
ÀÌ °ª È¿°ú´Â ¾î¶² ¼Ó¼º°ªÀÌ 'auto'Àΰ¡¿¡ µû¸¥´Ù. ´ëüµÇÁö ¾Ê´Â ¿¤·¹¸àÆ®µéÀÇ ¼¼ºÎ»çÇ×Àº Àý´ëÀûÀ¸·Î À§Ä¡µÈ ³Êºñ¿Í ³ôÀ̸¦ ÂüÁ¶Ç϶ó.

Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½ºµé¿¡¼­, ¿ÀÇÁ¼¼Æ®(offset)µéÀº ±× ¹Ú½ºÀÇ ¿ë±âºí·°¿¡ ´ëÇÑ °ÍÀÌ´Ù. »ó´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½º¿¡¼­, ¿ÀÇÁ¼¼Æ®´Â ±× ¹Ú½º ÀÚüÀÇ ¸ð¼­¸®¿¡ ´ëÇÑ °ÍÀÌ´Ù(±× ¹Ú½º´Â Á¤»ó È帧¿¡¼­ À§Ä¡°¡ ÁÖ¾îÁö¸é, ÀÌ ¼Ó¼ºµé¿¡ µû¶ó ±× À§Ä¡·Î ºÎÅÍ ¿ÀÇÁ¼¼Æ® µÊ).

9.4 Á¤»ó È帧(normal flow)

Á¤»ó È帧 ¹Ú½º´Â ÇϳªÀÇ ¾ç½ÄÈ­ ¹®¸Æ¿¡ ¼ÓÇϸç, ÀÌ´Â ºí·° ¶Ç´Â ÀζóÀÎÀÌ µÉ ¼ö ÀÖÀ¸³ª, µ¿½Ã¿¡ µÑ ´Ù µÉ ¼ö´Â ¾ø´Ù. ºí·° ¹Ú½º´Â ºí·°(block) ¾ç½ÄÈ­ ¹®¸Æ¿¡ °ü¿©ÇÏ°í, ÀζóÀÎ ¹Ú½º´Â ÀζóÀÎ(inline) ¾ç½ÄÈ­ ¹®¸Æ¿¡ °ü¿©ÇÑ´Ù.

9.4.1 ºí·°(block) ¾ç½ÄÈ­ ¹®¸Æ

ºí·° ¾ç½ÄÈ­ ¹®¸Æ¿¡¼­, ¹Ú½º´Â ¿ë±âºí·° ¸ÇÀ§¿¡¼­ ½ÃÀÛÇÏ¿© ±× ´ÙÀ½¿¡ ´Ù¸¥ °ÍÀÌ ¼öÁ÷ÀûÀ¸·Î ¹è¿­µÈ´Ù. ÀÌ µÎ ÇüÁ¦(sibling) ¹Ú½ºµé»çÀÌÀÇ ¼öÁ÷Àû °Å¸®´Â 'margin' ¼Ó¼ºµé¿¡ ÀÇÇÏ¿© °áÁ¤µÈ´Ù. ºí·° ¾ç½ÄÈ­ ¹®¸Æ¿¡¼­ ÀÎÁ¢ ºí·° ¹Ú½ºµé»çÀÌÀÇ ¼öÁ÷ ¸¶ÁøµéÀº ÅëÇÕ(collapse)µÈ´Ù.

ºí·° ¾ç½ÄÈ­ ¹®¸Æ¿¡¼­, °¢ ¹Ú½ºÀÇ ¿ÞÂÊ ¸ð¼­¸®°¡ ¿ë±âºí·°ÀÇ ¿ÞÂÊ ¸ð¼­¸®°ú ¼­·Î Á¢ÇÑ´Ù(right-to-left ¾ç½ÄÈ­¿¡¼­´Â, ¿À¸¥ÂÊ ¸ð¼­¸®µéÀÌ Á¢ÇÑ´Ù). ÀÌ´Â À¯µ¿(float)ÀÌ ÀÖ´õ¶óµµ ÇØ´çµÈ´Ù(¹Ú½ºÀÇ ³»¿ë Áö¿ªÀÌ À¯µ¿ ¶§¹®¿¡ ¿òÃß·Á µé¾îµµ).

ÆäÀÌÁöÈ­µÈ(paged) ¸Þµð¾Æ¿¡¼­ ÆäÀÌÁö ³Ñ±è¿¡ ´ëÇÑ Á¤º¸´Â, Çã¿ëµÈ ÆäÀÌÁö ³Ñ±èÀ» ÂüÁ¶Ç϶ó.

9.4.2 ÀζóÀÎ(inline) ¾ç½ÄÈ­ ¹®¸Æ

ÀζóÀÎ ¾ç½ÄÈ­ ¹®¸Æ¿¡¼­, ¹Ú½º´Â ¿ë±âºí·°ÀÇ ¸ÇÀ§¿¡¼­ ºÎÅÍ ±× ´ÙÀ½¿¡ ´Ù¸¥ °ÍÀÌ ¼öÆòÀûÀ¸·Î ¹è¿­µÈ´Ù. ¼öÆò ¸¶Áø(margin), Å׵θ®(border), Æеù(padding)µéÀº ÀÌµé ¹Ú½ºµé»çÀÌ¿¡ ´ëÇÑ °ÍÀÌ´Ù. ¹Ú½º´Â ´Ù¸¥ ¹æ½ÄÀ¸·Î ¼öÁ÷ÀûÀ¸·Î Á¤·ÄµÉ ¼ö ÀÖ´Ù: ±×µéÀÇ ¸Ç¾Æ·¡¿Í ¸ÇÀ§¿¡ Á¤·Ä(align)µÉ ¼ö ÀÖ°í, ¶Ç´Â ±× ¼Ó¿¡¼­ ÅؽºÆ®ÀÇ ±âÃʶóÀÎ(baseline)¿¡ Á¤·ÄµÉ ¼ö ÀÖ´Ù. ÁÙÀ» Çü¼ºÇÏ´Â ¹Ú½º¸¦ Æ÷ÇÔÇÏ´Â »ç°¢Çü Áö¿ªÀ» ¶óÀÎ ¹Ú½º(line box)¶ó ÇÑ´Ù.

¶óÀÎ ¹Ú½ºÀÇ ³Êºñ´Â ¿ë±âºí·°¿¡ ÀÇÇÏ¿© °áÁ¤µÈ´Ù. ¶óÀÎ ¹Ú½ºÀÇ ³ôÀÌ´Â ¶óÀÎ ³ôÀÌ °è»ê¿¡ ÁÖ¾îÁø ¸í·É¿¡ ÀÇÇÏ¿© °áÁ¤µÈ´Ù. ÇϳªÀÇ ¶óÀÎ ¹Ú½º´Â Ç×»ó ±×°¡ Æ÷ÇÔÇÏ´Â ¸ðµç ¹Ú½ºµéÀ» ´ã±â¿¡ ÃæºÐÇÑ ³ôÀ̸¦ °®´Â´Ù. ±×·¯³ª, ÀÌ´Â ±×°¡ Æ÷ÇÔÇÏ´Â °¡Àå ³ôÀº ¹Ú½ºº¸´Ù ´õ ³ôÀ» ¼ö ÀÖ´Ù(¸¸ÀÏ, ¿¹¸¦ µé¾î, ¹Ú½ºµéÀÌ ±âÃʶóÀο¡ ¹è¿­µµ·Ï Á¤·ÄµÈ´Ù¸é). ¹Ú½º BÀÇ ³ôÀÌ°¡, ±×°ÍÀ» Æ÷ÇÔÇÏ´Â ¶óÀÎ ¹Ú½ºÀÇ ³ôÀ̺¸´Ù ³·À¸¸é, ¶óÀÎ ¹Ú½º ¾ÈÀÇ B ¼öÁ÷Á¤·ÄÀº 'vertical-align' ¼Ó¼º¿¡ ÀÇÇÏ¿© °áÁ¤µÈ´Ù.

¿©·¯ ÀζóÀÎ ¹Ú½º(inline box)µéÀÌ ´ÜÀÏ ¶óÀÎ ¹Ú½º(line box)¿¡¼­ ¼öÆòÀûÀ¸·Î ¸ÂÁö ¾ÊÀ¸¸é, ¼öÁ÷ÀûÀ¸·Î ½ºÅõÈ(vertically-stacked) µÎ°³ÀÌ»óÀÇ ¶óÀÎ ¹Ú½ºµé»çÀÌ¿¡ ¹èºÐµÈ´Ù. µû¶ó¼­, ¹®´Ü¿¡´Â ¶óÀÎ ¹Ú½ºµéÀÌ ¼öÁ÷ÀûÀ¸·Î, °£°Ý ¾øÀÌ Áߺ¹µÇÁö ¾ÊÀ¸¸ç, Â÷°îÂ÷°î ½Î¿©Áø´Ù.

ÀϹÝÀûÀ¸·Î, ¶óÀÎ ¹Ú½ºÀÇ ¿ÞÂÊ ¸ð¼­¸®(edge)Àº ±× ¿ë±âºí·°ÀÇ ¿ÞÂÊ ¸ð¼­¸®°ú Á¢ÇÏ°í ±× ¿ë±âºí·°ÀÇ ¿À¸¥ÂÊ ¸ð¼­¸®¿Í Á¢ÇÑ´Ù. ±×·¯³ª, À¯µ¿ÇÏ´Â ¹Ú½ºµéÀº ±× ¿ë±âºí·° ¸ð¼­¸®°ú ±× ¶óÀÎ ¹Ú½º ¸ð¼­¸®»çÀÌ¿¡ ¿Ã ¼ö ÀÖ´Ù. µû¶ó¼­, °°Àº ÀζóÀÎ ¾ç½ÄÈ­ ¹®¸Æ ¾È¿¡¼­ ¶óÀÎ ¹Ú½º°¡ ÀϹÝÀûÀ¸·Î ¿ë±âºí·°°ú °°Àº ³Êºñ¸¦ °®´Â´Ù ÇÏ´õ¶óµµ, ¸¸ÀÏ À¯¿ëÇÑ ¼öÆò °ø°£ ³Êºñ°¡ À¯µ¿(float) ¶§¹®¿¡ °¨¼ÒµÇ¸é, ±× ³Êºñ°¡ ´Þ¶ó Áú ¼ö ÀÖ´Ù. °°Àº ÀζóÀÎ ¾ç½ÄÈ­ ¹®¸Æ¿¡¼­ ¶óÀÎ ¹Ú½ºµéÀº ÀϹÝÀûÀ¸·Î ³ôÀÌ¿¡ À־´Â ¼­·Î ´Þ¶óÁø´Ù. (¿¹¸¦ µé¸é, ÇÑ ÁÙÀº ³ôÀº À̹ÌÁö¸¦ °¡Áö´Â ¹Ý¸é, ´Ù¸¥ ¶óÀÎÀº ÅؽºÆ® ¸¸ °¡Áú ¼ö ÀÖ´Ù.)

ÇÑ ÁÙÀÇ ÀζóÀÎ ¹Ú½ºµéÀÇ ÇÕ°è ³Êºñ°¡ ±×µéÀ» Æ÷ÇÔÇÏ´Â ¶óÀÎ ¹Ú½ºÀÇ ³Êºñº¸´Ù ÀÛÀ¸¸é, ¶óÀÎ ¹Ú½º ¾È¿¡¼­ ±×µéÀÇ ¼öÆòÀû ºÐ»êÀº 'text-align' ¼Ó¼º¿¡ ÀÇÇÏ¿© °áÁ¤µÈ´Ù. ±× ¼Ó¼ºÀÌ °ª 'justify'¸¦ °¡Áö¸é, »ç¿ëµµ±¸´Â ÀζóÀÎ ¹Ú½ºµéÀ» ²ø¾î ³Ð°Ô ¸¸µé ¼ö ÀÖ´Ù.

ÀζóÀÎ ¹Ú½º´Â ¶óÀÎ ¹Ú½ºÀÇ ³Êºñ¸¦ ÃÊ°úÇÒ ¼ö ¾øÀ¸¹Ç·Î, ±ä ÀζóÀÎ ¹Ú½ºµéÀº ¿©·¯ ¹Ú½ºµé·Î ³ªµÚ¾î Áú ¼ö ÀÖ°í, ÀÌ ¹Ú½ºµéÀº ¿©·¯ ¶óÀÎ ¹Ú½ºµé¿¡ ¹èºÐµÉ ¼ö ÀÖ´Ù. ÀζóÀÎ ¹Ú½º°¡ °¥¶óÁö¸é, ¸¶Áø, Å׵θ®, ÆеùµéÀº ¾îµð¿¡¼­ °¥¶ó Á³´ÂÁö º¸ÀÌÁö ¾Ê´Â´Ù. ÀÌ ºÐ¸®°¡ ¾ç¹æÇâ ±ò¸²(embedding)¿¡¼­ ÀϾ´Â °æ¿ìÀÇ ¸¶Áø, Å׵θ®, ÆеùÀÇ ¾ç½ÄÈ­´Â ¿ÏÀüÈ÷ Á¤ÀǵÇÁö ¾Ê¾Ò´Ù.

ÀζóÀÎ ¹Ú½ºµµ, ¾ç¹æÇâ ÅؽºÆ® ó¸® ¶§¹®¿¡, °°Àº ¶óÀÎ ¹Ú½º ¾È¿¡¼­ ¿©·¯ ¹Ú½ºµé·Î ºÐ¸®µÉ ¼ö ÀÖ´Ù.

ÀζóÀÎ ¹Ú½º ±¸Á¶ÀÇ ¿¹Á¦¸¦ º¸ÀÚ. HTML ºí·°·¹º§ ¿¤·¹¸àÆ® P¿¡ ÀÇÇÏ¿© »ý¼ºµÈ, ´ÙÀ½ ¹®´ÜÀº °¡¸í(anonymous) ÅؽºÆ®°¡ EM°ú STRONG ¿¤·¹¸àÆ®µé¿¡ ºÐÆ÷µÇ¾î Æ÷ÇԵǾî ÀÖ´Ù:

<P>¿©·¯ <EM>°­Á¶µÈ ´Ü¾î</EM>µéÀÌ <STRONG>ÀÌ</STRONG> ¹®Àå ¾È¿¡ ³ªÅ¸³­´Ù.</P>

P ¿¤·¹¸àÆ®´Â ´Ù¼¸°³ÀÇ ÀζóÀÎ ¹Ú½ºµéÀ» Æ÷ÇÔÇÏ´Â ºí·° ¹Ú½º¸¦ »ý¼ºÇϸç, ÀÌ Áß ¼¼°³´Â °¡¸íÀÌ´Ù:

ÀÌ ¹®´ÜÀ» ¾ç½ÄÈ­Çϱâ À§ÇÏ¿©, »ç¿ëµµ±¸´Â ´Ù¼¸°³ÀÇ ¹Ú½ºµéÀ» ¶óÀÎ ¹Ú½º(line box)µé·Î À¯µ¿(flow)½ÃŲ´Ù. ÀÌ ¿¹Á¦¿¡¼­, P ¿¤·¹¸àÆ®¸¦ À§ÇÏ¿© »ý¼ºµÈ ¹Ú½º´Â ¶óÀÎ ¹Ú½ºµéÀ» À§ÇÑ ¿ë±âºí·°(containing block)¸¦ Çü¼ºÇÑ´Ù. ¸¸ÀÏ ±× ¿ë±âºí·°ÀÌ ÃæºÐÈ÷ ³ÐÀ¸¸é, ¸ðµç ÀζóÀÎ ¹Ú½ºµéÀº ´ÜÀÏ ¶óÀÎ ¹Ú½º ¾È¿¡ µé¾î°¥ °ÍÀÌ´Ù:

¿©·¯ °­Á¶µÈ ´Ü¾îµéÀÌ ÀÌ ¹®Àå¾È¿¡ ³ªÅ¸³­´Ù.

¸¸ÀÏ ÃæºÐÇÏÁö ¾Ê´Ù¸é, ÀζóÀÎ ¹Ú½º´Â ºÐ¸®µÇ¾î ¿©·¯ ¶óÀÎ ¹Ú½ºµé¿¡ ¹èºÐµÈ´Ù. ¾ÕÀÇ ¹®´ÜÀº ´ÙÀ½°ú °°ÀÌ ºÐ¸®µÈ´Ù:

¿©·¯ °­Á¶µÈ ´Ü¾îµéÀÌ
ÀÌ ¹®Àå¾È¿¡ ³ªÅ¸³­´Ù.
¶Ç´Â ´ÙÀ½°ú °°ÀÌ:
¿©·¯ °­Á¶µÈ
´Ü¾îµéÀÌ ÀÌ
¹®Àå¾È¿¡ ³ªÅ¸³­´Ù.

¾ÕÀÇ ¿¹Á¦¿¡¼­, EM ¹Ú½º´Â "ºÎºÐ1"°ú "ºÎºÐ2" µÎ°³ÀÇ EM ¹Ú½ºµé·Î ºÐ¸®µÇ¾ú´Ù. ¸¶Áø(margin), Å׵θ®(border), Æеù(padding), ¶Ç´Â ÅؽºÆ® Àå½ÄµéÀº ºÎºÐ1 ´ÙÀ½À̳ª ºÎºÐ2 ÀÌÀüÀÇ º¸ÀÌ´Â È¿°ú´Â ¾ø´Ù.

´ÙÀ½ ¿¹Á¦¸¦ º¸¸é:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>¿©·¯ ÁÙµéÀÇ ÀζóÀÎ À¯µ¿(flow)ÀÇ ¿¹Á¦</TITLE>
      <STYLE type="text/css">
          EM {
             padding: 2px;
             margin: 1em;
             border-width: medium;
             border-style: dashed;
             line-height: 2.4em;
          }
      </STYLE>
   </HEAD>
   <BODY>
      <P>Several <EM>emphasized words</EM> appear here.</P>
   </BODY>
</HTML>

PÀÇ ³Êºñ¿¡ µû¶ó, ¹Ú½ºµéÀº ´ÙÀ½°ú °°ÀÌ ¹èºÐµÈ´Ù:

¸¶Áø(margin), Å׵θ®(border), Æäµù(padding)µéÀÇ µð½ºÇ÷¹ÀÌ¿¡¼­ ÁÙ¹Ù²Þ È¿°ú¸¦ ¼³¸íÇÏ´Â µµÇ¥   [D]

9.4.3 »ó´ëÀ§Ä¡

¹Ú½º°¡ Á¤»ó È帧(normal flow)¿¡ µû¶ó ¹èÄ¡µÇ¸é, ÀÌ À§Ä¡¸¦ »ó´ëÀûÀ¸·Î º¯È¯(shift)µÉ ¼ö ÀÖ´Ù. À̸¦»ó´ëÀ§Ä¡¶ó ÇÑ´Ù. ÀÌ ¹æ½ÄÀ¸·Î B1 ¹Ú½º ¿ÀÇÁ¼¼Æ®(offset)´Â ±× ´ÙÀ½¿¡ ³ª¿À´Â B2 ¹Ú½º¿¡´Â È¿°ú°¡ ¾ø´Ù: B1°¡ ¿ÀÇÁ¼¼Æ® ¾ÈµÈ °Íó·³ B2ÀÇ À§Ä¡°¡ ÁÖ¾îÁö°í, B1ÀÇ ¿ÀÇÁ¼¼Æ®°¡ Àû¿ëµÈ ÈÄ¿¡ B2´Â À§Ä¡°¡ ´Ù½Ã ÀâÁö ¾Ê´Â´Ù. ÀÌ´Â »ó´ëÀ§Ä¡´Â ¹Ú½ºµéÀÇ Áߺ¹ÀÌ ¹ß»ýµÉ ¼ö ÀÖ´Ù´Â Àǹ̸¦ ³»Æ÷ÇÑ´Ù.

»ó´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½ºµéÀº, Áٹٲ޵é°ú ¿ø·¡ ¿¹¾àµÈ °ø°£µéÀ» Æ÷ÇÔÇÏ¿©, ±×µéÀÇ Á¤»ó È帧 Å©±â¸¦ À¯ÁöÇÑ´Ù. »ó´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½º´Â Á¤»ó È帧 ÀÚ½Ä(child)µé°ú À§Ä¡µÈ(positioned) ÇÏÀ§(descendant)µéÀ» À§ÇÏ¿© »õ·Î¿î ¿ë±âºí·°(containing block)À» Çü¼ºÇÑ´Ù.

¿¤·¹¸àÆ®ÀÇ °ªÀÌ 'relative'ÀÎ 'position' ¼Ó¼º ÀÏ ¶§, »ó´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½º°¡ »ý¼ºµÈ´Ù. ±× ¿ÀÇÁ¼¼Æ®´Â 'top', 'bottom', 'left', 'right' ¼Ó¼º¿¡ ÀÇÇÏ¿© ÁöÁ¤µÈ´Ù.

»ó´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½ºÀÇ Åº·ÂÀûÀÎ È°µ¿Àº ½ºÅ©¸³ÆÃ(scripting) ȯ°æµé¿¡¼­ ¾Ö³»¸ÞÀ̼Ç(animation) È¿°úµéÀ» ¸¸µé ¼ö ÀÖ´Ù('visibility' ¼Ó¼º ÂüÁ¶). »ó´ëÀ§Ä¡´Â ¶ÇÇÑ À§Ã·ÀÚ(superscripting)¿Í ¾Æ·¡Ã·ÀÚ(subscripting)ÀÇ ÀϹÝÀûÀÎ ¾ç½ÄÀ¸·Î »ç¿ëµÉ ¼öµµ ÀÖÀ¸³ª, À§Ä¡¸¦ Àâ´Âµ¥ ÁÙ ³ôÀÌ°¡ ÀÚµ¿ÀûÀ¸·Î Á¶Á¤µÇÁö ¾Ê´Â´Ù´Â Á¡Àº ¿¹¿ÜÀÌ´Ù. Ãß°¡ Á¤º¸´Â ¶óÀÎ ³ôÀÌ °è»êµéÀ» ÂüÁ¶Ç϶ó.

»ó´ëÀ§Ä¡ÀÇ ¿¹Á¦µéÀº Á¤»ó È帧, À¯µ¿, Àý´ëÀ§Ä¡ÀÇ ºñ±³ ¿¡ ±â¼úµÇ¾îÀÖ´Ù.

9.5 À¯µ¿(float)

À¯µ¿Àº ÇöÀçÀÇ ÁÙ¿¡¼­ ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊÀ¸·Î º¯È¯µÇ´Â ÇϳªÀÇ ¹Ú½ºÀÌ´Ù. À¯µ¿(float: "floated" ¶Ç´Â "floating" ¹Ú½º)ÀÇ °¡Àå Èï¹Ì·Î¿î ¼ºÁúÀº ³»¿ëÀÌ ±× ¸é(side)À» µû¶ó È帥´Ù´Â Á¡ÀÌ´Ù(ȤÀº 'clear' ¼Ó¼º¿¡ ÀÇÇÏ¿© ÀÌ·± È°µ¿ÀÌ ¹æÁöµÉ ¼ö ÀÖ½¿). ³»¿ëÀº ¿ÞÂÊÀ¸·Î À¯µ¿µÈ ¹Ú½ºÀÇ ¿À¸¥ÂÊ ¸é ¾Æ·¡·Î¿Í ¿À¸¥ÂÊÀ¸·Î À¯µ¿µÈ ¹Ú½ºÀÇ ¿ÞÂÊ ¸é ¾Æ·¡·Î È帥´Ù. ´ÙÀ½Àº À¯µ¿ À§Ä¡¿Í ³»¿ë È帧À» ¼Ò°³ÇÑ´Ù; À¯µ¿ È°µ¿À» Á¿ìÇÏ´Â ½ÇÁ¦ÀûÀÎ ±ÔÄ¢Àº 'float' ¼Ó¼ºÀÇ ¼³¸í¿¡¼­ ´Ù·ç¾ú´Ù.

À¯µ¿µÈ ¹Ú½º´Â ¸í½ÃÀû ³Êºñ('width' ¼Ó¼º, ¶Ç´Â ´ëüµÈ ¿¤·¹¸àÆ®ÀÎ °æ¿ì´Â °íÀ¯ÀÇ ³Êºñ·Î ÁöÁ¤)À» °¡Á®¾ß ÇÑ´Ù. ¾î¶² À¯µ¿µÈ ¹Ú½ºµµ, ¿ÜºÎ ¸éÀÌ ¿ë±âºí·° ¸é ¶Ç´Â ´Ù¸¥ À¯µ¿ÀÇ ¿ÜºÎ ¸é¿¡ Á¢ÃËÇÒ ¶§±îÁö ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊÀ¸·Î Àüȯ(shift)µÇ´Â, ºí·° ¹Ú½º°¡ µÉ ¼ö ÀÖ´Ù. À¯µ¿µÈ ¹Ú½ºÀÇ ¸ÇÀ§´Â ÇöÀçÀÇ ¶óÀÎ ¹Ú½º ¸ÇÀ§¿¡ Á¤·ÄµÈ´Ù(¶Ç´Â ¸¸ÀÏ ¶óÀÎ ¹Ú½º°¡ ¾ø´Ù¸é, ¾Õ ºí·° ¹Ú½ºÀÇ ¹Ù´Ú¿¡). ¸¸ÀÏ ÇöÀçÀÇ ÁÙ¿¡ ±× À¯µ¿À» À§ÇÑ ¼öÆò °ø°£ÀÌ ÃæºÐÇÏÁö ¾ÊÀ¸¸é, ±×¸¦ À§ÇÑ °ø°£¿¡ µÉ ¶§±îÁö ÇÑ ÁÙ ÇÑ ÁÙ ¾Æ·¡ ÂÊÀ¸·Î ÀüȯµÈ´Ù.

À¯µ¿Àº ±× È帧(flow) ¾È¿¡ ÀÖÁö ¾Ê±â ¶§¹®¿¡, À¯µ¿(float) ¹Ú½ºÀÇ ÀÌÀü°ú ´ÙÀ½¿¡, À¯µ¿ÀÌ ¾ø´Â°Íó·³, È帧¿¡ ¼öÁ÷ÀûÀ¸·Î À§Ä¡µÇÁö ¾ÊÀº(non-positioned) ºí·° ¹Ú½º°¡ »ý¼ºµÈ´Ù. ±×·¯³ª, À¯µ¿ ´ÙÀ½¿¡ »ý¼ºµÈ ¶óÀÎ ¹Ú½ºµéÀº ±× À¯µ¿µÈ ¹Ú½º¸¦ À§ÇÑ °ø°£À» ¸¸µé±â À§ÇÏ¿© ª¾ÆÁø´Ù. ÇöÀç ÁÙ¿¡ ÀÖ´Â À¯µ¿µÈ ¹Ú½º ¾ÕÀÇ ¾î¶² ³»¿ëÀº ±× À¯µ¿ÀÇ ´Ù¸¥ ¸é¿¡¼­ ù¹ø° °¡´ÉÇÑ ÁÙ¿¡ ´Ù½Ã À¯µ¿µÈ´Ù.

¿©·¯ À¯µ¿µéÀº ÀÎÁ¢µÉ ¼ö ÀÖÀ¸¸ç, ¶ÇÇÑ ÀÌ ¸ðµ¨Àº °°Àº ÁÙ ¾È¿¡ ÀÎÁ¢ÇÑ À¯µ¿µé¿¡µµ Àû¿ëµÈ´Ù.

¿¹Á¦:

´ÙÀ½Àº ¸ðµç IMG ¹Ú½ºµéÀ» class="icon"À» ÅëÇØ ¿ÞÂÊÀ¸·Î À¯µ¿½ÃŲ´Ù(¶Ç ¿ÞÂÊ ¸¶ÁøÀ» '0'À¸·Î ¼³Á¤):

IMG.icon {
   float: left;
   margin-left: 0;
}

´ÙÀ½ HTML ÀÚ¿ø°ú ½ºÅ¸ÀϽ¬Æ®¸¦ °í·ÁÇϸé:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>À¯µ¿(float) ¿¹Á¦</TITLE>
      <STYLE type="text/css">
         IMG { float: left }
         BODY, P, IMG { margin: 2em }
      </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="ÀÌ À̹ÌÁö´Â À¯µ¿(float)µéÀ» ¼³¸íÇÑ´Ù.">
    Some sample text that has no other...
  </BODY>
</HTML>

ÀÌ IMG ¹Ú½º´Â ¿ÞÂÊÀ¸·Î À¯µ¿µÈ´Ù. ±× µÚ¿¡¿À´Â ³»¿ëÀº ±× À¯µ¿(float)°ú °°Àº ÁÙ¿¡¼­ ½ÃÀÛÇÏ¿©, À¯µ¿ÀÇ ¿À¸¥ÂÊ¿¡ ¾ç½ÄÈ­µÈ´Ù. ±× À¯µ¿ÀÇ ¿À¸¥ÂÊ ¶óÀÎ ¹Ú½ºµéÀº À¯µ¿ÀÇ Á¸Àç·Î ÀÎÇÏ¿© ª¾Æ ÁöÁö¸¸, ±× À¯µ¿ ´ÙÀ½¿¡´Â Á¤»ó("normal") ³Êºñ·Î ȸº¹µÈ´Ù(P ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© Çü¼ºµÈ ¿ë±âºí·°ÀÇ ³Êºñ·Î). ÀÌ ¹®¼­´Â ´ÙÀ½°ú °°ÀÌ ¾ç½ÄÈ­´Ù:

¾î¶»°Ô À¯µ¿(float)ÇÏ´Â ¹Ú½ºµéÀÌ ¸¶Áø(margin)µé¿¡ ÀÛ¿ëÇϴ°¡¸¦ ¼³¸íÇÏ´Â µµÇ¥   [D]

¸¸ÀÏ ¹®¼­°¡ ¾Æ·¡¿Í °°À¸¸é ²À °°Àº ¾ç½ÄÈ­µÈ´Ù:

<BODY>
  <P>Some sample text
  <IMG src=img.gif alt="ÀÌ À̹ÌÁö´Â À¯µ¿(float)µéÀ» ¼³¸íÇÑ´Ù.">
  that has no other...
</BODY>

À¯µ¿ÀÇ ¿ÞÂÊ ³»¿ëÀÌ À¯µ¿¿¡ µû¶ó µð½ºÇ÷¹ÀÌµÇ°í ±× ¿À¸¥ÂÊ ¸é ¾Æ·¡·Î ´Ù½Ã È帣±â ¶§¹®ÀÌ´Ù.

À¯µ¿ ¹Ú½ºÀÇ ¸¶ÁøµéÀº Àý´ë·Î ÀÎÁ¢ ¹Ú½ºµéÀÇ ¸¶Áøµé°ú ÅëÇÕ(collapse)µÇÁö ¾Ê´Â´Ù. µû¶ó¼­, À§ ¿¹Á¦¿¡¼­ ¼öÁ÷ ¸¶ÁøµéÀº P ¹Ú½º¿Í À¯µ¿µÈ IMG ¹Ú½º»çÀÌ¿¡¼­ ÅëÇÕÇÏÁö ¾Ê´Â´Ù.

À¯µ¿Àº, ¿¹¸¦ µé¾î À¯µ¿ ´ÙÀ½ Á¤»ó È帧 ¹Ú½º°¡ À½¼ö ¸¶ÁøÀ» °¡Áú ¶§, Á¤»ó È帧ÇÏ´Â ´Ù¸¥ ¹Ú½ºµé¿¡ °ãÃÄ Áú ¼ö ÀÖ´Ù. ÀζóÀÎ ¹Ú½º(inline box)°¡ ÀζóÀÎ ¹Ú½ºÀÇ À¯µ¿, ³»¿ë, ¹è°æ, Å׵θ®µé°ú °ãÃÄÁö¸é, ±× À¯µ¿ÀÇ ¾Õ¿¡ Ç¥ÇöµÈ´Ù. ºí·° ¹Ú½º(block box)°¡ °ãÃÄÁö¸é, ºí·° ¹Ú½ºÀÇ ¹è°æ°ú Å׵θ®µéÀº ±× À¯µ¿ ´ÙÀ½ÀÌ Ç¥ÇöµÇ°í, ±× ¹Ú½º°¡ Åõ¸íÇÒ ¶§ ¸¸ º¼ ¼ö ÀÖ´Ù. ºí·° ¹Ú½ºÀÇ ³»¿ëÀº À¯µ¿ ¾Õ¿¡ Ç¥ÇöµÈ´Ù.

¿¹Á¦:

¾Æ·¡´Â, ¿¤·¹¸àÆ®µéÀÇ Á¤»ó È帧(normal flow)¿¡¼­, Å׵θ®µé¿¡ À¯µ¿ÀÌ °ãÃÄÁö¸é ¾î¶»°Ô µÇ´Â°¡¸¦ ¼³¸íÇÑ´Ù.

µÎ ¹®´ÜµéÀÇ Å׵θ®(border)µé¿¡ ÁßøÇÏ´Â À¯µ¿(floating) À̹ÌÁö(image)¸¦ ¼³¸íÇÏ´Â µµÇ¥: ±× Å׵θ®(border)µéÀº À̹ÌÁö(image)¿¡ ÀÇÇÏ¿© ¹æÇصȴÙ.   [D]

À¯µ¿ À̹ÌÁö´Â ÁßøÇÏ´Â ºí·° ¹Ú½ºÀÇ Å׵θ®µéÀ» ¸ðÈ£ÇÏ°Ô ÇÑ´Ù.

´ÙÀ½ ¿¹Á¦´Â, À¯µ¿(float) ´ÙÀ½À¸·Î ³»¿ëÀÇ È帧À» ¹æÁöÇϱâ À§ÇÑ, 'clear' ¼Ó¼ºÀÇ »ç¿ëÀ» ¼³¸íÇÑ´Ù.

¿¹Á¦:

¾Æ·¡ ¸í·ÉÀ» º¸¸é:

P { clear: left }

´ÙÀ½°ú °°ÀÌ ¾ç½ÄÈ­µÈ´Ù:

µÎ ¹®´Ü¿¡¼­ À¯µ¿(floating) À̹ÌÁö(image)¿Í 'clear: left' ÀÇ È¿°ú¸¦ ¼³¸íÇÏ´Â µµÇ¥.   [D]

µÎ ¹®´Ü¿¡´Â 'clear: left'°¡ ¼³Á¤µÇ¾î, µÎ° ¹®´ÜÀÌ À¯µ¿ÀÇ ¾Æ·¡·Î ¹Ð¾îÁö°Ô ÇÑ´Ù - ¸ÇÀ§ ¸¶ÁøÀº À̸¦ À§ÇÏ¿© È®ÀåÇÑ´Ù('clear' ¼Ó¼º ÂüÁ¶).

9.5.1 À¯µ¿(float)ÀÇ À§Ä¡ ¸ÂÃã: 'float' ¼Ó¼º

'float'
°ª:  left | right | none | inherit
ÃÖÃÊ°ª:  none
Àû¿ë:  À§Ä¡µÈ(positioned) ¿¤·¹¸àÆ®µé°ú »ý¼ºµÈ ³»¿ëÀ» Á¦¿ÜÇÑ ¸ðµç °Í
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¹Ú½º°¡ ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊÀ¸·Î À¯µ¿ÇÏ¿©¾ß Çϴ°¡ ¶Ç´Â À¯µ¿ÇÏÁö ¾Ê¾Æ¾ß Çϴ°¡¸¦ ÁöÁ¤ÇÑ´Ù. Àý´ëÀûÀ¸·Î À§Ä¡µÇÁö ¾ÊÀº ¹Ú½º¸¦ »ý¼ºÇÏ´Â ¿¤·¹¸àÆ®µé¿¡ ¼³Á¤µÉ ¼ö ÀÖ´Ù. ÀÌ ¼Ó¼ºÀÇ ±× °ªµéÀº ´ÙÀ½ Àǹ̸¦ °®´Â´Ù:

left(¿ÞÂÊ)
¿¤·¹¸àÆ®´Â ¿ÞÂÊÀ¸·Î À¯µ¿µÇ´Â ºí·° ¹Ú½º¸¦ »ý¼ºÇÑ´Ù. ³»¿ëÀº ¹Ú½ºÀÇ ¸ÇÀ§¿¡¼­ ½ÃÀÛÇÏ¿© ('clear' ¼Ó¼º¿¡ µû¶ó) ¿À¸¥ÂÊ ¸éÀ¸·Î È帥´Ù. °ªÀÌ 'none'ÀÌ ¾Æ´Ï¸é 'display'´Â ¹«½ÃµÈ´Ù.
right(¿À¸¥ÂÊ)
'left'¿Í °°À¸³ª, ³»¿ëÀº À§¿¡¼­ ½ÃÀÛÇÏ¿© ¹Ú½ºÀÇ ¿ÞÂÊÀ¸·Î È帥´Ù.
none
¹Ú½º´Â À¯µ¿µÇÁö ¾Ê´Â´Ù.

´ÙÀ½¿¡ À¯µ¿(float)ÀÇ ÀÛ¿ëÀ» Á¿ìÇÏ´Â Á¤¹ÐÇÑ ±ÔÄ¢ÀÌ ¼Ò°³µÇ¾î ÀÖ´Ù:

  1. ¿ÞÂÊ-À¯µ¿(left-floating) ¹Ú½ºÀÇ ¿ÞÂÊ ¹Ù±ùÂÊ ¸ð¼­¸®´Â ¿ë±âºí·°ÀÇ ¿ÞÂÊ ¸ð¼­¸®ÀÇ ¿ÞÂÊÀÌ ¾Æ´Ò ¼ö ÀÖ´Ù. ¿À¸¥ÂÊ-À¯µ¿(right-floating) ¿¤·¹¸àÆ®µé¿¡¼­µµ µ¿µîÇÑ ±ÔÄ¢ÀÌ Àû¿ëµÈ´Ù.
  2. ¸¸ÀÏ ÇöÀçÀÇ ¹Ú½º°¡ ¿ÞÂÊ-À¯µ¿ÀÌ°í, ¿ø¹®(source)ÀÇ ¾ÕÂÊ¿¡¼­ ¿¤·¹¸àÆ®µé¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ¿ÞÂÊ À¯µ¿ ¹Ú½ºµéÀÌ ÀÖÀ¸¸é, °¢ ±×·± ¾ÕÂÊ ¹Ú½º¿¡¼­, ÇöÀçÀÇ ¹Ú½ºÀÇ ¿ÞÂÊ ¹Ù±ùÂÊ ¸ð¼­¸®(outer edge)´Â ¾Õ ¹Ú½º ¿À¸¥ÂÊ ¹Ù±ùÂÊ ¸ð¼­¸®ÀÇ ¿À¸¥ÂÊÀ̾î¾ß Çϰųª, ¶Ç´Â, ±× ¸ÇÀ§´Â ¾ÕÀÇ ¹Ú½º ¹Ù´Úº¸´Ù ³·¾Æ¾ß ÇÑ´Ù. ¿À¸¥ÂÊ-À¯µ¿ ¿¤·¹¸àÆ®¿¡¼­µµ µ¿µîÇÑ ±ÔÄ¢ÀÌ Àû¿ëµÈ´Ù.
  3. ¿ÞÂÊ-À¯µ¿ ¹Ú½ºÀÇ ¿À¸¥ÂÊ ¹Ù±ùÂÊ ¸ð¼­¸®´Â ±× ¿À¸¥ÂÊ¿¡ ÀÖ´Â ¾î¶² ¿À¸¥ÂÊ-À¯µ¿ ¹Ú½º ¿ÞÂÊ ¹Ù±ùÂÊ ¸ð¼­¸®ÀÇ ¿À¸¥ÂÊÀÌ ¾Æ´Ò ¼ö ÀÖ´Ù. ¿À¸¥ÂÊ-À¯µ¿ ¿¤·¹¸àÆ®¿¡¼­µµ µ¿µîÇÑ ±ÔÄ¢ÀÌ Àû¿ëµÈ´Ù.
  4. À¯µ¿ ¹Ú½ºÀÇ ¹Ù±ùÂÊ ¸ÇÀ§´Â ±× ¿ë±âºí·°ÀÇ ¸ÇÀ§º¸´Ù ³ôÀ» ¼ö ¾ø´Ù.
  5. À¯µ¿ ¹Ú½ºÀÇ ¹Ù±ùÂÊ ¸ÇÀ§´Â ¾ÕÀÇ ¿ø¹®¿¡¼­ ¿¤·¹¸àÆ®¿¡ ÀÇÇØ »ý¼ºµÈ ¾î¶² ºí·° ¶Ç´Â À¯µ¿µÈ ¹Ú½ºÀÇ ¹Ù±ùÂÊ ¸ÇÀ§(outer top)º¸´Ù ³ôÀ» ¼ö ¾ø´Ù.
  6. ¿¤·¹¸àÆ®ÀÇ À¯µ¿(floating) ¹Ú½ºÀÇ ¹Ù±ùÂÊ ¸ÇÀ§´Â ¾ÕÀÇ ¿ø¹®¿¡¼­ ¿¤·¹¸àÆ®¿¡ ÀÇÇØ »ý¼ºµÈ ¹Ú½º¸¦ Æ÷ÇÔÇÏ´Â ¾î¶² ¶óÀÎ ¹Ú½ºÀÇ ¸ÇÀ§º¸´Ù ³ôÀ» ¼ö ¾ø´Ù.
  7. ¿ÞÂÊ¿¡ ´Ù¸¥ ¿ÞÂÊ-À¯µ¿ ¹Ú½ºÀ» °®´Â ¿ÞÂÊ-À¯µ¿ ¹Ú½º´Â ±× ¿ë±âºí·°ÀÇ ¿À¸¥ÂÊ ¸ð¼­¸® ¿À¸¥ÂÊ¿¡ ¿À¸¥ÂÊ ¹Ù±ùÂÊ ¸ð¼­¸®¸¦ °¡Áú ¼ö ¾ø´Ù(´ëºÎºÐ ¿ÞÂÊ À¯µ¿´Â ÀÌ¹Ì °¡´ÉÇÑ ¸¸Å­ ¿ÞÂÊ¿¡ ÀÖÁö ¾Ê´Â ÇÑ, ¿À¸¥ÂÊ ¸ð¼­¸®·Î Æ¢¾î ³ª¿Ã ¼ö ¾ø´Ù). ¿À¸¥ÂÊ-À¯µ¿ ¿¤·¹¸àÆ®¿¡¼­µµ µ¿µîÇÑ ±ÔÄ¢ÀÌ Àû¿ëµÈ´Ù.
  8. À¯µ¿(floating) ¹Ú½º´Â °¡´ÉÇÑ ÇÑ ³ô°Ô À§Ä¡ÇÏ¿©¾ß ÇÑ´Ù.
  9. ¿ÞÂÊ-À¯µ¿ ¹Ú½º´Â °¡´ÉÇÑ ÇÑ ¿ÞÂÊ¿¡ ¿Í¾ß ÇÏ°í, ¿À¸¥ÂÊ-À¯µ¿ ¹Ú½º´Â °¡´ÉÇÑ ÇÑ ¿À¸¥ÂÊ¿¡ ¿Í¾ß ÇÑ´Ù. ´õ ¿ÞÂÊ/¿À¸¥ÂÊÀ¸·Î º¸´Ù ³ôÀº À§Ä¡°¡ ¼±È£µÈ´Ù.

9.5.2 À¯µ¿(float) ´ÙÀ½ È帧ÀÇ Á¦¾î: 'clear' ¼Ó¼º

'clear'
°ª:  none | left | right | both | inherit
ÃÖÃÊ°ª:  none
Àû¿ë:  ºí·°·¹º§(block-level) ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¿¤·¹¸àÆ®ÀÇ ¹Ú½ºÀÇ ¾î´À ¸éµéÀÌ ¾ÕÀÇ À¯µ¿ ¹Ú½º¿¡ ÀÎÁ¢ÇÒ ¼ö ¾ø´Â°¡¸¦ ³ªÅ¸³½´Ù. (±× ¿¤·¹¸àÆ® ÀÚ½ÅÀÌ À¯µ¿ÇÏ´Â ÇÏÀ§(descendant)µé¸¦ °¡Áú ¼ö ÀÖ´Ù; ÀÌ 'clear' ¼Ó¼ºÀº ±×µé¿¡ ¾Æ¹« ÀÛ¿ëµµ ÇÏÁö ¾Ê´Â´Ù.)

ÀÌ ¼Ó¼ºÀº ºí·°·¹º§ ¿¤·¹¸àÆ®(À¯µ¿µéÀ» Æ÷ÇÔÇÏ¿©)¿¡ ¸¸ ÁöÁ¤µÉ ¼ö ÀÖ´Ù. Ä¡¹Ð(compact)°ú ¼±Çà(run-in) ¹Ú½ºµé¿¡¼­, ÀÌ ¼Ó¼ºÀº Ä¡¹Ð ¶Ç´Â ¼±Çà ¹Ú½º°¡ ¼Ò¼ÓµÇ¾î ÀÖ´Â ÃÖÁ¾ ºí·° ¹Ú½º¿¡ Àû¿ëµÈ´Ù.

À¯µ¿ÇÏÁö ¾Ê´Â ºí·° ¹Ú½º¿¡ Àû¿ëµÇ¸é °ªµéÀº ´ÙÀ½ÀÇ Àǹ̸¦ °®´Â´Ù:

left
»ý¼ºµÈ ¹Ú½ºÀÇ ¸ÇÀ§ ¸¶ÁøÀº, ¸ÇÀ§ Å׵θ® ¸ð¼­¸®°¡ ¾î¶² ¿ø¹®¿¡¼­ ¸ÕÀúÀÇ ¿¤·¹¸àÆ®·Î ºÎÅÍ ¸¸µé¾îÁø, ¿ÞÂÊ-À¯µ¿ ¹Ú½ºÀÇ ¹Ù´Ú ¹Ù±ùÂÊ ¸ð¼­¸® ¹Ø¿¡ ¿Àµµ·Ï ÃæºÐÈ÷ Áõ°¡µÈ´Ù.
right
»ý¼ºµÈ ¹Ú½ºÀÇ ¸ÇÀ§ ¸¶ÁøÀº, ¸ÇÀ§ Å׵θ® ¸ð¼­¸®°¡ ¾î¶² ¿ø¹®¿¡¼­ ¸ÕÀúÀÇ ¿¤·¹¸àÆ®·Î ºÎÅÍ ¸¸µé¾îÁø, ¿À¸¥ÂÊ-À¯µ¿ ¹Ú½ºÀÇ ¹Ù´Ú ¹Ù±ùÂÊ ¸ð¼­¸® ¹Ø¿¡ ¿Àµµ·Ï ÃæºÐÈ÷ Áõ°¡µÈ´Ù.
both
»ý¼ºµÈ ¹Ú½º´Â ¿ø¹®¿¡¼­ ¸ÕÀúÀÇ ¿¤·¹¸àÆ®µé·Î ºÎÅÍ ¸¸µé¾îÁø ¸ðµç À¯µ¿ ¹Ú½º ÀÌ·¡·Î À̵¿ÇÑ´Ù.
none
À¯µ¿¿¡ ´ëÇÑ ¹Ú½ºÀÇ À§Ä¡¿¡ º¯È­°¡ ¾ø´Ù.

À¯µ¿ ¿¤·¹¸àÆ®µé¿¡ ÀÌ ¼Ó¼ºÀÌ ¼³Á¤µÇ¸é, À¯µ¿ÀÇ À§Ä¡ ¸ÂÃãÀ» À§ÇÑ ±ÔÄ¢¿¡ º¯°æÀ» °¡Á®¿Â´Ù. Ãß°¡ÀûÀÎ Á¦ÇÑÀÌ Ãß°¡µÇ¾ú´Ù:(À§ ±ÔÄ¢¿¡ Ãß°¡ÇÏ¿© 10¹ø)

9.6 Àý´ëÀ§Ä¡

Àý´ëÀ§Ä¡ ¸ðµ¨¿¡¼­, ¹Ú½º´Â ±× ¿ë±âºí·°(containing block)¿¡ ´ëÇÏ¿© ¸í½ÃÀûÀ¸·Î ¿ÀÇÁ¼¼Æ®(offset)¸¦ ÁöÁ¤ÇÑ´Ù. ÀÌ´Â Á¤»ó È帧À¸·Î ºÎÅÍ ÀüºÎ Á¦°ÅµÇ°í, µÚÀÇ ÇüÁ¦(sibling)µé¿¡ ¾Æ¹« ÀÛ¿ëµµ ÇÏÁö ¾Ê´Â´Ù. Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½º´Â Á¤»ó È帧(normal flow) ÀÚ½Ä(child)µé°ú À§Ä¡ÇÑ(positioned) ÇÏÀ§(descendant)µéÀ» À§ÇÏ¿© »õ·Î¿î ¿ë±âºí·°À» Çü¼ºÇÑ´Ù. ±×·¯³ª, Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¿¤·¹¸àÆ®ÀÇ ±× ³»¿ëÀº ¾î¶² ´Ù¸¥ ¹Ú½ºµé ÁÖÀ§¿¡ È帣Áö ¾Ê´Â´Ù. ±×µéÀº, ÁßøÇÏ´Â ¹Ú½ºµéÀÇ ½ºÅà ¼öÁØ(stack level)¿¡ µû¶ó, ´Ù¸¥ ¹Ú½ºÀÇ ³»¿ëÀ» ¸ðÈ£ÇÏ°Ô Çϰųª ¸ðÈ£ÇÏ°Ô ÇÏÁö ¾Ê´Â´Ù.

ÀÌ ±Ô°Ý¿¡¼­ Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¿¤·¹¸àÆ®(¶Ç´Â ±× ¹Ú½º)·Î ÂüÁ¶ÇÏ´Â °ÍÀº ±× ¿¤·¹¸àÆ®ÀÇ 'position' ¼Ó¼ºÀÌ °ª 'absolute'³ª 'fixed'¸¦ °®´Ù´Â Àǹ̸¦ ³»Æ÷ÇÑ´Ù.

9.6.1 °íÁ¤µÈ À§Ä¡ Àâ±â(fixed positioning)

°íÁ¤µÈ À§Ä¡ Àâ±â´Â Àý´ëÀ§Ä¡ÀÇ ÇÑ ÇÏÀ§ Ä«Å×°í¸®ÀÌ´Ù. À¯ÀÏÇÑ Â÷ÀÌÁ¡Àº °íÁ¤µÈ À§Ä¡ ÀâÀº ¹Ú½º¿¡¼­ ±× ¿ë±âºí·°Àº ºäÆ÷ÀÎÆ®(viewport)¿¡ ÀÇÇÏ¿© Çü¼ºµÈ´Ù´Â Á¡ÀÌ´Ù. ¿¬¼Ó ¸Þµð¾Æ(continuous media)¿¡¼­ ¹®¼­°¡ ½ºÄݸµµÉ ¶§, °íÁ¤µÈ ¹Ú½ºµéÀº À̵¿ÇÏÁö ¾Ê´Â´Ù. ÀÌ ¸é¿¡¼­´Â, °íÁ¤µÈ ¹è°æ À̹ÌÁöµé°ú À¯»çÇÏ´Ù. ÆäÀÌÁöÈ­µÈ ¸Þµð¾Æ(paged media)¿¡¼­, °íÁ¤µÈ(fixed) À§Ä¡ÀÇ ¹Ú½ºµéÀº °¢ ÆäÀÌÁö¿¡¼­ ¹Ýº¹µÈ´Ù. ÀÌ´Â °¢ ÆäÀÌÁöÀÇ ¹Ù´Ú¿¡ ƯÁ¤ Ç¥½Ã¸¦ Çϴµ¥ À¯¿ëÇÏ´Ù.

Á¦ÀÛÀÚµéÀº ÇÁ·¹ÀÓ °°ÀºÀÇ Ç¥ÇöÀ» »ý¼ºÇϱâ À§ÇÏ¿© °íÁ¤µÈ À§Ä¡ Àâ±â¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù. ´ÙÀ½ ÇÁ·¹ÀÓ(frame) ¹è¿­À» º¸ÀÚ:

position='fixed'¸¦ »ç¿ëÇÏ¿© ÇÁ·¹ÀÓ °°Àº(frame-like) ¹è¿­À» ¼³¸íÇÏ´Â µµÇ¥.   [D]

ÀÌ´Â ´ÙÀ½ HTML ¹®¼­¿Í ½ºÅ¸ÀÏ ¸í·Éµé·Î ´Þ¼ºµÉ ¼ö ÀÖ´Ù:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>CSS2·Î ¸¸µç ÇÁ·¹ÀÓ ¹®¼­</TITLE>
      <STYLE type="text/css">
         BODY { height: 8.5in } /* ¾Æ·¡´Â ¹éºÐÀ² ³ôÀ̵éÀÌ ÇÊ¿äÇÏ´Ù. */
         #header {position: fixed; width: 100%;  height: 15%;  top: 0; right: 0; bottom: auto;  left: 0; }
         #sidebar {position: fixed;  width: 10em;  height: auto; top: 15%; right: auto; bottom: 100px;  left: 0; }
         #main { position: fixed;  width: auto;  height: auto; top: 15%;  right: 0; bottom: 100px;  left: 10em; }
         #footer { position: fixed;  width: 100%;  height: 100px; top: auto; right: 0; bottom: 0;  left: 0; }
      </STYLE>
    </HEAD>
  <BODY>
 <DIV id="header"> ... </DIV>
 <DIV id="sidebar"> ... </DIV>
 <DIV id="main"> ... </DIV>
 <DIV id="footer"> ... </DIV>
  </BODY>
</HTML>

9.7 'display', 'position', 'float'»çÀÌÀÇ °ü°è

¹Ú½ºÀÇ »ý¼º°ú ¹è¿­¿¡ ¿µÇâÀ» ÁÖ´Â ¼¼°¡Áö ¼Ó¼º('display', 'position', 'float')Àº ´ÙÀ½°ú °°ÀÌ ÀÛ¿ëÇÑ´Ù:

  1. 'display' °ª 'none'À» °¡Áö¸é, »ç¿ëµµ±¸µéÀº 'position'¿Í 'float'À» ¹«½ÃÇÏ¿©¾ß ÇÑ´Ù. ÀÌ °æ¿ì, ¿¤·¹¸àÆ®´Â ¹Ú½º¸¦ »ý¼ºÇÏÁö ¾Ê´Â´Ù.
  2. ¾Æ´Ï¸é, 'position'ÀÌ °ª 'absolute' ¶Ç´Â 'fixed'¸¦ °¡Áö¸é, 'display'´Â 'block'À¸·Î ¼³Á¤ÇÏ°í, 'float'´Â 'none'À¸·Î ¼³Á¤ÇÑ´Ù. ¹Ú½ºÀÇ À§Ä¡´Â 'top', 'right', 'bottom', 'left' ¼Ó¼ºµé°ú ±× ¹Ú½ºÀÇ ¿ë±âºí·°(containing block)¿¡ ÀÇÇÏ¿© °áÁ¤µÈ´Ù.
  3. ¾Æ´Ï¸é, 'float'°¡ 'none' ÀÌ¿ÜÀÇ °ªÀ̸é, 'display'´Â 'block'À¸·Î ¼³Á¤µÇ°í ¹Ú½º´Â À¯µ¿µÈ´Ù.
  4. ±×·¸Áö ¾ÊÀ¸¸é, ±× ³ª¸ÓÁö 'display' ¼Ó¼ºÀº ÁöÁ¤µÈ ¹Ù¿¡ µû¸¥´Ù.

ÁÖ¼®. ±× ¼Ó¼º°ªµéÀÌ ½ºÅ©¸³Æ®¿¡ ÀÇÇÏ¿© º¯°æµÇ¸é, CSS2´Â ¹è¿­(layout) ±â´ÉÀ» ÁöÁ¤ÇÏÁö ¾Ê´Â´Ù. ¿¹¸¦ µé¾î, 'width: auto'¸¦ °®´Â ¿¤·¹¸àÆ®°¡ ´Ù½Ã À§Ä¡µÇ¸é ¾î¶»°Ô µÇ´Â°¡ ? ±× ³»¿ëµéÀÌ ´Ù½ÃÈ帣´Â°¡ ¾Æ´Ï¸é ¿ø·¡ ¾ç½ÄÈ­ ´ë·Î ³²¾Æ Àִ°¡ ? ±× ÇØ´äÀº ÀÌ ¹®¼­ÀÇ ¹üÀ§ ¹ÛÀ̸ç, ÀÌ¿Í °°Àº ÀÛ¿ëÀº ¾Æ¸¶ CSS2ÀÇ ÃÖÃÊ Àû¿ëµé¿¡¼­ ´Ù·ê °ÍÀÌ´Ù.

9.8 Á¤»ó È帧(normal flow), À¯µ¿(float), Àý´ëÀ§Ä¡ÀÇ ºñ±³

Á¤»ó È帧, »ó´ëÀ§Ä¡, À¯µ¿, Àý´ëÀ§Ä¡ÀÇ Â÷À̵éÀ» ¼³¸íÇϱâ À§ÇÏ¿©, ´ÙÀ½ HTMLÀÇ ¸î ¿¹Á¦µéÀÌ Á¦°øµÇ¾ú´Ù:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>À§Ä¡ ¸ÂÃß´Â ±â´É(positioning scheme)µéÀÇ ºñ±³</TITLE>
   </HEAD>
   <BODY>
   <P>Beginning of body contents.
   <SPAN id="outer"> Start of outer contents.
   <SPAN id="inner"> Inner contents.</SPAN>
   End of outer contents.</SPAN>
   End of body contents.</P>
   </BODY>
</HTML>

ÀÌ ¹®¼­¿¡¼­, ´ÙÀ½ ¸í·ÉÀ» °¡Á¤ÇÏÀÚ:

BODY { display: block; line-height: 200%; width: 400px; height: 400px }
P { display: block }
SPAN { display: inline }

outer¿Í inner ¿¤·¹¸àÆ®µé¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ¹Ú½ºµéÀÇ ÃÖÁ¾ À§Ä¡´Â °¢ ¿¹Á¦¿¡¼­ ¼­·Î ´Ù¸£´Ù. ¾Æ·¡ °¢ ¼³¸íÀÇ ¿ÞÂÊÀÇ ¼öÄ¡´Â Á¤»ó È帧(normal flow)ÀÇ À§Ä¡(¼³¸íÀ» À§ÇÏ¿© µÎ°³ÀÇ ºóÄ­À¸·Î Ç¥½ÃÇÑ ÁÙµé)¸¦ ³ªÅ¸³½´Ù(ÁÖ¼®: ¼³¸íµéÀº ´Ù¸¥ ¼öÆò°ú ¼öÁ÷ ´«±ÝÀ» »ç¿ëÇß´Ù.)

9.8.1 Á¤»ó È帧(normal flow)

¹Ú½ºµéÀÇ Á¤»ó È帧À» ¹Ù²ÙÁö ¾Ê´Â ´ÙÀ½ÀÇ outer¿Í inner CSS ¼±¾ðµéÀ» °¡Á¤ÇÏÀÚ:

#outer { color: red }
#inner { color: blue }

P ¿¤·¹¸àÆ®´Â °¡¸í(anonymous) ÀζóÀÎ ÅؽºÆ®¿Í µÎ°³ÀÇ SPAN ¿¤·¹¸àÆ®µé¿¡ ¸ðµç ÀζóÀÎ ³»¿ëÀ» Æ÷ÇÔÇÏ°í ÀÖ´Ù: µû¶ó¼­, ¸ðµç ³»¿ëÀº ÀζóÀÎ ¾ç½ÄÈ­ ¹®¸Æ¿¡¼­ P ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© Çü¼ºµÈ ¿ë±âºí·° ¾È¿¡ ¹è¿­µÉ °ÍÀ̸ç, ´ÙÀ½Ã³·³ µÈ´Ù:

¸ðü¿Í ÇüÁ¦(sibling) ¹Ú½º(box)µé»çÀÌ ÅؽºÆ®ÀÇ Á¤»ó È帧(normal flow)À» ¼³¸íÇÏ´Â µµÇ¥   [D]

9.8.2 »ó´ëÀ§Ä¡

»ó´ëÀ§Ä¡ÀÇ È¿°ú¸¦ º¸±â À§ÇÏ¿©, ¾Æ·¡¿Í °°ÀÌ ÁöÁ¤ÇÑ´Ù:

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

ÅؽºÆ®´Â outer ¿¤·¹¸àÆ®±îÁö Á¤»óÀûÀ¸·Î È帥´Ù. ±× ÈÄ outer ÅؽºÆ®´Â ù ÁÙ ³¡¿¡¼­ ±×ÀÇ Á¤»ó È帧 À§Ä¡¿Í Å©±â·Î È帥´Ù. ±×¸®°í, ±× ÅýºÆ®¸¦ Æ÷ÇÔÇÏ´Â ¼¼ ÁÙ¿¡ ºÐÆ÷µÈ ÀζóÀÎ ¹Ú½ºµéÀº '-12px'¿¡ ÀÇÇÏ¿© À§·Î À̵¿ÇÑ´Ù.

innerÀÇ ³»¿ëµéÀº, outerÀÇ ÀÚ½Ä(child)À¸·Î¼­, 1.5 ¹ø ÁÙ¿¡ "of outer contents" ¹Ù·Î ´ÙÀ½¿¡ Á¤»óÀûÀ¸·Î È帥´Ù. ±×·¯³ª, ±× inner ³»¿ëÀº ÀÌ·¡ÂÊÀ¸·Î '12px' ¸¸Å­ outer ³»¿ë¿¡ »ó´ëÀûÀ¸·Î ÀÚüÀûÀ¸·Î ¿ÀÇÁ¼¼Æ®(offset) µÇ°í, 2 ¹ø ÁÙ¿¡¼­ ´Ù½Ã ¿ø·¡ÀÇ À§Ä¡·Î µ¹¾Æ¿Â´Ù.

outer ´ÙÀ½ÀÇ ³»¿ëÀº outerÀÇ »ó´ëÀ§Ä¡ÀÇÇÏ¿© ¿µÇâÀ» ¹ÞÁö ¾Ê´Â´Ù´Â Á¡¿¡ À¯ÀÇÇ϶ó.

¹Ú½ºÀÇ ³»¿ë¿¡¼­ »ó´ëÀ§Ä¡ÀÇ È¿°úµéÀ» ¼³¸íÇÏ´Â µµÇ¥   [D]

outerÀÇ ¿ÀÇÁ¼¼Æ®´Â '-24px'ÀÌ°í, outerÀÇ ÅؽºÆ®¿Í º»Ã¼ÀÇ ÅؽºÆ®´Â ÁßøµÈ´Ù´Â Á¡µµ À¯ÀÇÇ϶ó.

9.8.3 ¹Ú½ºÀÇ À¯µ¿(floating)

ÀÌÁ¦ ´ÙÀ½ ¸í·Éµé¿¡ ÀÇÇØ inner ¿¤·¹¸àÆ®ÀÇ ÅؽºÆ®¸¦ ¿À¸¥ÂÊÀ¸·Î À¯µ¿ÇÏ´Â È¿°ú¸¦ º¸ÀÚ:

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

inner ¹Ú½º±îÁöÀÇ ÅؽºÆ®´Â Á¤»óÀûÀ¸·Î È帥¸ç, È帧À» ²ø¾î ´ç°Ü ¿À¸¥ÂÊ ¸¶ÁøÀ¸·Î À¯µ¿µÈ´Ù(±× 'width'´Â ¸í½ÃÀûÀ¸·Î ÁöÁ¤µÇ¾ú´Ù). ±× À¯µ¿(float)ÀÇ ¿ÞÂÊ ¶óÀÎ ¹Ú½ºµéÀº ª¾ÆÁö°í, ±× ¹®¼­ÀÇ ³ª¸ÓÁö ÅؽºÆ®´Â ±× ¾È¿¡ È帥´Ù.

¹Ú½ºÀÇ À¯µ¿(floating) È¿°úµéÀ» ¼³¸íÇÏ´Â µµÇ¥.   [D]

'clear' ¼Ó¼ºÀÇ È¿°ú¸¦ º¸±âÀ§ÇÏ¿©, ÀÌ ¿¹Á¦¿¡¼­ ÇüÁ¦(sibling) ¿¤·¹¸àÆ®¸¦ Ãß°¡ÇÏ¿´´Ù:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>À§Ä¡ ¸ÂÃß´Â ±â´É(positioning scheme)µéÀÇ ºñ±³ II</TITLE>
  </HEAD>
  <BODY>
  <P>Beginning of body contents.
  <SPAN id=outer> Start of outer contents.
  <SPAN id=inner> Inner contents.</SPAN>
  <SPAN id=sibling> Sibling contents.</SPAN>
  End of outer contents.</SPAN>
  End of body contents.</P>
  </BODY>
</HTML>

´ÙÀ½Àº ¸í·ÉµéÀÌ´Ù:

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }

ÀÌ´Â À§¿¡¼­¿Í °°ÀÌ inner ¹Ú½º°¡ ¿À¸¥ÂÊÀ¸·Î À¯µ¿ÇÏ°Ô Çϸç, ±× ¹®¼­ÀÇ ³ª¸ÓÁö ÅؽºÆ®´Â ºó °ø°£À¸·Î È帥°Ô ÇÑ´Ù:

clear ¼Ó¼º ¼³Á¤ ¾øÀÌ ¹Ú½º(box) ÁÖÀ§ÀÇ ÅؽºÆ® È帧À» Á¦¾îÇϱâ À§ÇÑ, ¹Ú½ºÀÇ À¯µ¿(floating) È¿°úµéÀ» ¼³¸íÇÏ´Â µµÇ¥.   [D]

±×·¯³ª, ¸¸ÀÏ ÇüÁ¦(sibling) ¿¤·¹¸àÆ®¿¡ 'clear' ¼Ó¼º 'right'·Î ¼³Á¤µÇ¸é(»ý¼ºµÈ ÇüÁ¦ ¹Ú½º´Â À¯µ¿ ¹Ú½ºµé ¿À¸¥ÂÊ ´ÙÀ½ÀÇ À§Ä¡¸¦ ¹Þ¾ÆµéÀÌÁö ¾Ê´Â´Ù), ÇüÁ¦ ³»¿ëÀº À¯µ¿ÀÇ ¾Æ·¡¿¡¼­ È帣±â ½ÃÀÛÇÑ´Ù :

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
±× ¿¤·¹¸àÆ® ÁÖÀ§ÀÇ ÅؽºÆ®ÀÇ È帧À» Á¦¾îÇϱâ À§ÇÑ clear ¼Ó¼ºÀ» ¼³Á¤À¸·Î, ¿¤·¹¸àÆ®ÀÇ À¯µ¿(floating) È¿°úµéÀ» ¼³¸íÇÏ´Â µµÇ¥.   [D]

9.8.4 Àý´ëÀ§Ä¡

ÃÖÁ¾ÀûÀ¸·Î, Àý´ëÀ§Ä¡ÀÇ È¿°ú¸¦ º¸ÀÚ. outer¿Í inner¸¦ À§ÇÏ¿© ´ÙÀ½ CSS ¼±¾ðµéÀ» ÇÏ¿´´Ù:

#outer { position: absolute; top: 200px; left: 200px; width: 200px; color: red; }
#inner { color: blue }

ÀÌ´Â outer ¹Ú½ºÀÇ ¸ÇÀ§´Â ±× ¿ë±âºí·°(containing block)¿¡ ´ëÇÏ¿© À§Ä¡ÇÑ´Ù. À§Ä¡µÈ(positioned) ¹Ú½º¿¡¼­ ¿ë±âºí·°Àº, °¡Àå °¡±î¿î À§Ä¡µÈ Á¶»ó(ancestor)¿¡ ÀÇÇÏ¿© Çü¼ºµÈ´Ù(¶Ç´Â, ¿ì¸® ¿¹Á¦¿¡¼­¿Í °°ÀÌ, Á¶»óÀÌ ¾øÀ¸¸é, ±× ÃÖÃÊ ¿ë±âºí·°¿¡ ÀÇÇÏ¿©). outer ¹Ú½ºÀÇ ¸ÇÀ§ ¸é(side)Àº ¿ë±âºí·° ¸ÇÀ§ ¾Æ·¡ '200px', ¿ÞÂÊ ¸éÀº ±× ¿ÞÂÊ ¸é¿¡¼­ '200px'¿¡ À§Ä¡ÇÑ´Ù. outerÀÇ ÀÚ½Ä(child) ¹Ú½º´Â ±×ÀÇ ¸ðü¿¡ ´ëÇÏ¿© Á¤»óÀûÀ¸·Î È帥´Ù.

Àý´ëÀûÀ¸·Î ¹Ú½º¸¦ À§Ä¡½ÃÅ°´Â È¿°úµéÀ» ¼³¸íÇÏ´Â µµÇ¥.   [D]

´ÙÀ½ ¿¹Á¦´Â »ó´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½ºÀÇ ÀÚ½Ä(child)ÀÎ Àý´ëÀûÀ¸·Î À§Ä¡µÈ ¹Ú½º¸¦ º¸¿©ÁØ´Ù. ¸ðü outer ¹Ú½º°¡ ½ÇÁ¦ÀûÀ¸·Î ¿ÀÇÁ¼¼Æ®(offset)µÇÁö ¾Ê¾ÒÁö¸¸, ±×ÀÇ 'position' ¼Ó¼ºÀ» 'relative'·Î ¼³Á¤ÇÏ¿©, ±× ¹Ú½º°¡ À§Ä¡µÈ(positioned) ÇÏÀ§(descendant)µé¿¡¼­ ¿ë±âºí·°À¸·Î Á¦°øµÉ ¼ö ÀÖ½¿À» ÀǹÌÇÑ´Ù, ÀÌ outer ¹Ú½º°¡ ¿©·¯ Áٵ鿡 ³ª´µ¾îÁø ÀζóÀÎ ¹Ú½ºµéÀ̱⠶§¹®¿¡, ù¹ø° ÀζóÀÎ ¹Ú½ºÀÇ ¸ÇÀ§¿Í ¿ÞÂÊ ¸ð¼­¸®(¾Æ·¡ ¼³¸í¿¡¼­ ±½Àº Á¡¼±À¸·Î Ç¥½Ã)µéÀº 'top'°ú 'left' ¿ÀÇÁ¼¼Æ®µéÀ» À§ÇÑ ÂüÁ¶·Î »ç¿ëµÉ ¼ö ÀÖ´Ù.

#outer { position: relative; color: red }
#inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }

±× °á°ú´Â ´ÙÀ½Ã³·³ µÈ´Ù:

¿ë±âºí·°(containing block)¿¡ ´ëÇÏ¿© ¹Ú½º(box)¸¦ Àý´ëÀûÀ¸·Î À§Ä¡ÇÏ´Â È¿°úµéÀ» ¼³¸íÇÏ´Â µµÇ¥.   [D]

outer ¹Ú½º¸¦ À§Ä¡½ÃÅ°Áö ¾ÊÀ¸¸é:

#outer { color: red }
#inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }

inner¸¦ À§ÇÑ ¿ë±âºí·°(containing block)Àº, ¿ì¸® ¿¹Á¦¿¡¼­, ÃÖÃÊ ¿ë±âºí·°ÀÌ µÈ´Ù. ´ÙÀ½ ¼³¸íÀº, ÀÌ·± °æ¿ì¿¡, ¾îµð¿¡¼­ inner ¹Ú½º°¡ ³¡³ª´Â°¡¸¦ º¸¿©ÁØ´Ù.

Á¤»óÀûÀ¸·Î À§Ä¡µÈ ¸ðü¿¡ ÀÇÇÏ¿© Çü¼ºµÈ ¿ë±âºí·°(containing block)¿¡ ´ëÇÏ¿© Àý´ëÀûÀ¸·Î À§Ä¡µÇ´Â ¹Ú½ºÀÇ È¿°úµéÀ» ¼³¸íÇÏ´Â µµÇ¥.   [D]

»ó´ë¿Í Àý´ëÀ§Ä¡´Â, ´ÙÀ½ ¿¹Á¦¿¡¼­ º¸´Â ¹Ù¿Í °°ÀÌ, ¹Ù(bar)µéÀ» ¹Ù²Ù±â À§ÇÏ¿© »ç¿ëµÉ ¼ö ÀÖ´Ù.:

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>

ÀÌ´Â ´ÙÀ½Ã³·³ µÈ´Ù:

¹Ù(bar)µéÀ» ¹Ù²Ù´Â È¿°ú »ý¼º¿¡ À¯µ¿(float)µéÀÇ »ç¿ëÀ» ¼³¸íÇÏ´Â µµÇ¥.   [D]

¸ÕÀú, ±× ¿ë±âºí·°(containing block) ¸é(side)µéÀÌ ¼³¸í¿¡ ³ªÅ¸³­, ¹®´ÜÀÌ Á¤»óÀ¸·Î È帥´Ù. ±× ÈÄ, ¿ë±âºí·°ÀÇ ¿ÞÂÊ ¸ð¼­¸®·Î ºÎÅÍ '10px' ¸¸Å­ ¿ÀÇÁ¼¼Æ®(offset)µÈ´Ù('10px'ÀÇ ¿À¸¥ÂÊ ¸¶ÁøÀº, ±× ¿ÀÇÁ¼¼Æ®¸¦ ¿¹»óÇÏ¿©, ¿¹¾àµÊ). ¹Ù(bar)¹Ù²Þµé·Î ÀÛ¿ëÇÏ´Â µÎ°³ÀÇ ÇÏÀÌÀÌǵéÀº Á¤»óÀûÀÎ È帧¿¡¼­ ÀÌÅ»ÇÏ¿©, ÇöÀçÀÇ ÁÙ¿¡('top: auto'À̹ǷÎ), ÃÖÁ¾ À§Ä¡ ¼Ó¿¡¼­ P¿¡ ÀÇÇÏ¿© Çü¼ºµÈ, ±× ¿ë±âºí·°ÀÇ ¿ÞÂÊ ¸ð¼­¸®·Î ºÎÅÍ '-1em'¿¡ À§Ä¡µÈ´Ù. °á°ú´Â ¹Ù²ï ¹Ùµé(--)ÀÌ ÇöÀç ÁÙÀÇ ¿ÞÂÊÀ¸·Î À¯µ¿("float")µÈ °Íó·³ º¸ÀδÙ.

9.9 ÃþÀ¸·Î µÈ Ç¥Çö

´ÙÀ½ Ç׸ñµé¿¡¼­, "Àü¸é"À¸·Î Ç¥ÇöµÈ Àǹ̴ ½ºÅ©¸° ¾Õ¿¡ »ç¿ëÀÚ ¾ó±¼ÀÌ Á¢±ÙÇÑ °ÍÀ» ¸»ÇÑ´Ù.

CSS2¿¡¼­ °¢ ¹Ú½º´Â¼¼°¡Áö ±ÔÄ¢À¸·Î À§Ä¡¸¦ °®´Â´Ù. ±×µéÀÇ ¼öÆò°ú ¼öÁ÷ À§Ä¡µé¿¡ Ãß°¡ÇÏ¿©, ¹Ú½ºµéÀº "z-axis"¿¡ µû¶ó ¹è¿­µÇ°í, Çϳª°¡ ´Ù¸¥ °ÍÀÇ À§¿¡ ¿Àµµ·Ï ¾ç½ÄÈ­µÈ´Ù. Z-axis À§Ä¡´Â ¹Ú½ºµéÀÌ ½Ã°¢ÀûÀ¸·Î Áߺ¹µÇ¾úÀ» ¶§ ƯÈ÷ ³ªÅ¸³­´Ù. ÀÌ Ç׸ñ¿¡¼­´Â ¹Ú½ºµéÀÌ ¾î¶»°Ô z-axis¿¡ µû¶ó À§Ä¡µÇ´Â°¡¸¦ ¼³¸íÇÑ´Ù.

°¢ ¹Ú½º´Â ÇϳªÀÇ ½ºÅÃ(stack) ¹®¸Æ¿¡ ¼ÓÇÑ´Ù. ÁÖ¾îÁø ½ºÅà ¹®¸Æ¿¡¼­ °¢ ¹Ú½º´Â Á¤¼ö ½ºÅà ¼öÁØ(stack level)À» °¡Áö¸ç, ÀÌ´Â °°Àº ½ºÅà ¹®¸Æ¿¡¼­ ´Ù¸¥ ¹Ú½ºµé¿¡ »ó´ëÀûÀÎ z-axis¿¡ À§Ä¡ÇÑ´Ù. Å« ½ºÅà ¼öÁØÀÇ ¹Ú½ºµéÀº Ç×»ó ³·Àº ½ºÅà ¼öÁØÀÇ ¹Ú½ºµé ¾Õ¿¡ ¾ç½ÄÈ­µÈ´Ù. ¹Ú½º´Â À½¼ö ½ºÅà ¼öÁØÀ» °¡Áú ¼ö ÀÖ´Ù. ½ºÅà ¹®¸Æ¿¡¼­ °°Àº ½ºÅà ¼öÁØÀÇ ¹Ú½ºµéÀº ¹®¼­°èÅë(tree) ¼ø¼­¿¡ µû¶ó ¾Æ·¡¼­ À§·Î(bottom-to-top) ½ºÅõȴÙ.

ÃÖ»óÀ§(root) ¿¤·¹¸àÆ®´Â ÃÖ»óÀ§ ½ºÅÃ(stack) ¹®¸ÆÀ» »ý¼ºÇÏÁö¸¸, ´Ù¸¥ ¿¤·¹¸àÆ®µéÀº Áö¿ª ½ºÅÃ(local stack) ¹®¸ÆÀ» Çü¼ºÇÒ ¼ö ÀÖ´Ù. ½ºÅà ¹®¸ÆÀº Àü´Þ(inherit)µÈ´Ù. Áö¿ª ½ºÅà ¹®¸ÆÀº ÇÙ ¸ð¾ç(atomic)ÀÌ´Ù; ½ºÅà ¹®¸Æ ¼ÓÀÇ ¹Ú½ºµéÀº ´Ù¸¥ ¹Ú½ºµé»çÀÌ¿¡ ³ª¿Ã ¼ö ¾ø´Ù.

Áö¿ª ½ºÅà ¹®¸ÆÀ» Çü¼ºÇÏ´Â ¿¤·¹¸àÆ®´Â µÎ ½ºÅÃ(stack) ¼öÁصéÀ» °®´Â ¹Ú½º¸¦ »ý¼ºÇÑ´Ù: Çϳª´Â ½ºÅà ¹®¸Æ¿¡¼­ »ý¼ºÇÏ°í(Ç×»ó '0'), ´Ù¸¥ Çϳª´Â ±×°ÍÀÌ ¼ÓÇØÀÖ´Â ½ºÅà ¹®¸Æ('z-index' ¼Ó¼º¿¡ ÀÇÇÏ¿© ÁÖ¾îÁø)ÀÌ´Ù.

¿¤·¹¸àÆ®ÀÇ ¹Ú½º´Â, 'z-index' ¼Ó¼ºÀ¸·Î ´Ù¸¥ ½ºÅà ¼öÁØÀ» ÁÖ¾îÁö ¾ÊÀ¸¸é, ±×ÀÇ ¸ðüÀÇ ¹Ú½º¿Í °°Àº ½ºÅà ¼öÁØÀ» °®´Â´Ù.

9.9.1 ½ºÅÃ(stack) ¼öÁØ ÁöÁ¤: 'z-index' ¼Ó¼º

'z-index'
°ª:  auto | <Á¤¼ö> | inherit
ÃÖÃÊ°ª:  auto
Àû¿ë:  À§Ä¡µÈ(positioned) ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

À§Ä¡µÈ ¹Ú½º¿¡¼­, 'z-index' ¼Ó¼ºÀº ´ÙÀ½ »çÇ×À» ÁöÁ¤ÇÑ´Ù:

  1. ÇöÀçÀÇ ½ºÅà ¹®¸Æ¿¡¼­ ¹Ú½ºÀÇ ½ºÅÃ(stack) ¼öÁØ.
  2. ±× ¹Ú½º°¡ Áö¿ª ½ºÅà ¹®¸ÆÀ» Çü¼ºÇϴ°¡.

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

<Á¤¼ö>
ÀÌ Á¤¼ö´Â ÇöÀçÀÇ ½ºÅÃ(stack) ¹®¸Æ¿¡¼­ »ý¼ºµÈ ¹Ú½ºÀÇ ½ºÅà ¼öÁØÀÌ´Ù. ÀÌ ¹Ú½º´Â ¶ÇÇÑ ½ºÅà ¼öÁØÀÌ '0'ÀÎ Áö¿ª(local) ½ºÅà ¹®¸ÆÀ» Çü¼ºÇÑ´Ù.
auto(ÀÚµ¿)
ÇöÀçÀÇ ½ºÅà ¹®¸Æ¿¡¼­ »ý¼ºµÈ ¹Ú½ºÀÇ ½ºÅà ¼öÁØÀº ±× ¸ðüÀÇ ¹Ú½º¿Í °°´Ù. ¹Ú½º »õ·Î¿î Áö¿ª(local) ½ºÅà ¹®¸ÆÀ» Çü¼ºÇÏÁö ¾Ê´Â´Ù.

´ÙÀ½ ¿¹Á¦¿¡¼­, ¹Ú½ºµéÀÇ ½ºÅà ¼öÁصéÀº("id" ¾ÖÆ®¸®ºäÆ®·Î À̸§Áö¾î Áü): "text2"=0, "image"=1, "text3"=2, "text1"=3ÀÌ´Ù. "text2"ÀÇ ½ºÅà ¼öÁØÀº ÃÖ»óÀ§(root) ¹Ú½º·Î ºÎÅÍ Àü´ÞµÈ´Ù. ´Ù¸¥ °ÍµéÀº 'z-index' ¼Ó¼º¿¡ ÀÇÇÏ¿© ÁöÁ¤µÈ´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Z-order À§Ä¡ ¸ÂÃß±â</TITLE>
    <STYLE type="text/css">
      .pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG id="image" class="pile" src="butterfly.gif" alt="³ªºñ À̹ÌÁö" style="z-index: 1">
    <DIV id="text1" class="pile" style="z-index: 3">
       ÀÌ ÅؽºÆ®´Â ³ªºñ À̹ÌÁö¸¦ À§¿¡ °ãÄ¡°Ô ÇÑ´Ù. </DIV>
    <DIV id="text2">ÀÌ ÅؽºÆ®´Â ¸ðµÎÀÇ ¾Æ·¡¿¡ ¿Ã °ÍÀÌ´Ù. </DIV>
    <DIV id="text3" class="pile" style="z-index: 2">
       ÀÌ ÅؽºÆ®´Â text1À» ¾Æ·¡ °ãÄ¡°Ô ÇÏÁö¸¸,
       ³ªºñ À̹ÌÁö¸¦ À§¿¡ °ãÄ¡°Ô ÇÑ´Ù.</DIV>
  </BODY>
</HTML>

ÀÌ ¿¹Á¦´Â Åõ¸í¼º(transparency)ÀÇ Ç¥½Ã¸¦ ¼³¸íÇÑ´Ù. ¹Ú½ºÀÇ µðÆúÆ®(default) ÀÛ¿ëÀº Åõ¸í Áö¿ª ¾È¿¡¼­ µÚ ¹Ú½ºµéÀÌ ³»¿ë º¸ÀÌ°Ô ÇÑ´Ù. ÀÌ ¿¹Á¦¿¡¼­, °¢ ¹Ú½º´Â Åõ¸íÇÏ°Ô ±× ¾Æ·¡ ¹Ú½ºµé À§¿¡ °ãÄ¡°ÔÇÑ´Ù. ÀÌ ±â´ÉÀº ÇϳªÀÇ ¹è°æ ¼Ó¼ºÀ» »ç¿ëÇÏ¿© µ¤¾î¾º¿ö(override)Áú ¼ö ÀÖ´Ù.

9.10 ÅؽºÆ® ¹æÇâ: 'direction'°ú 'unicode-bidi' ¼Ó¼º

¾Æ¶ø¾î³ª Èñ¶ø¾î °°Àº ÀϺΠ¹®¼­µé¿¡¼­´Â, ½ºÅ©¸³Æ®ÀÇ ±ÛÀÚµéÀÌ ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î ¾²¿©Áø´Ù. ¶ÇÇÑ, ÀϺδ ȥÇÕµÈ ¾ð¾î ±¸Á¶¸¦ °¡Áø °æ¿ì¿¡´Â, ½Ã°¢ÀûÀ¸·Î Çϳª·Î µð½ºÇ÷¹À̵Ǵ ºí·° ¾ÈÀÇ ÅؽºÆ®°¡ È¥ÇÕµÈ ¹æÇ⼺À» °¡Áú ¼ö ÀÖ´Ù. ÀÌ Çö»óÀ» ¾ç¹æÇ⼺(bidirectionality), ¶Ç´Â ª°Ô "bidi"¶ó ÇÑ´Ù.

ÀÌ À¯´ÏÄÚµå Ç¥ÁØ([Unicode], Ç׸ñ 3.11)Àº ÅؽºÆ®ÀÇ ÀûÁ¤ÇÑ ¹æÇ⼺À» °áÁ¤Çϱâ À§ÇÏ¿© º¹ÇÕ ±â´ÉÀ» Á¤ÀÇÇÑ´Ù. ±× ±â´ÉÀº ¼Ó¼ºµéÀÇ ¼º°Ý¿¡ ±âÃÊÇÑ ÇÔÃàÀûÀÎ ºÎºÐÀ¸·Î ±¸¼ºµÇ°í, ¿©±â¿¡´Â ±ò¸²(embedding)µé°ú µ¤¾î¾º¿ò(override)ÀÇ Á¦¾î¸¦ À§ÇÑ ¸í½Ãµµ ÀÖ´Ù. CSS2´Â ÀûÁ¤ÇÑ ¾ç¹æÇâ Ç¥ÇöÀ» ´Þ¼ºÇϱâ À§ÇÏ¿© ÀÌ ±â´É¿¡ ÀÇÁ¸ÇÑ´Ù. 'direction'°ú 'unicode-bidi' ¼Ó¼ºµéÀº Á¦ÀÛÀÚµé·Î ÇÏ¿©±Ý, ¹®¼­¾ð¾îÀÇ ¿¤·¹¸àÆ®µé°ú ¾ÖÆ®¸®ºäÆ®µéÀ» ÀÌ ±â´ÉÀ¸·Î ÁöÁ¤ÇÏ´Â°Ô ÇØ ÁØ´Ù.

¸¸ÀÏ ¹®¼­°¡ ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î(right-to-left)ÀÇ ±ÛÀÚµéÀ» Æ÷ÇÔÇÏ°í ÀÖ°í, »ç¿ëµµ±¸°¡ ÀÌµé ±ÛÀÚµéÀ»(¹°À½Ç¥, 16Áø¼ö ÄÚµå, °ËÁ¤¹Ú½º, µîÀ¸·Î ´ëüÇÏÁö ¾Ê°í, Àû´çÇÑ ±×¸²¹®ÀÚµé·Î) µð½ºÇ÷¹ÀÌ ÇÏ·Á¸é, »ç¿ëµµ±¸´Â ÀÌ ¾ç¹æÇâ ±â´ÉÀ» Àû¿ëÇÏ¿©¾ß ÇÑ´Ù. ÀÌ ÀϹæÀûÀ¸·Î º¸ÀÌ´Â ÇÊ¿ä»çÇ×Àº, Èñ¶ø¾î(Hebrew)³ª ¾Æ¶ø¾î(Arabic) ¹®¼­°¡ È¥ÇÕµÈ °¢ ¹æÇ⼺ÀÇ ÅؽºÆ®¸¦ °¡Áö°í ÀÖÁö ¾Ê´õ¶óµµ, ÀÌ¿Í °°Àº ¹®¼­µéÀº, ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î(left-to-right)ÀÇ ¾ð¾îµé·Î ¾²¿©Áø ¹®¼­(¿¹: ´Ù¸¥ ¾ð¾îµéÀÇ ¼öÀÚ, ÅؽºÆ®µé)¿¡¼­ º¸´Ù, ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î(left-to-right)ÀÇ ÅؽºÆ®¸¦ Æ÷ÇÔÇÒ °¡´É¼ºÀÌ ³ô´Ù´Â »ç½ÇÀ» ¹Ý¿µÇÑ´Ù.

¹®¼­¾ð¾îÀÇ ±¸Á¶¿Í ¹®¹ý¿¡ µû¶ó ÅؽºÆ®ÀÇ ¹æÇ⼺ÀÌ ´Ù¸£¹Ç·Î, ÀÌ ¼Ó¼ºµéÀº, ´ëºÎºÐÀÇ °æ¿ì, ¹®¼­ ŸÀÔ Á¤ÀÇ(DTD)ÀÇ ¼³°èÀÚ³ª Ư¼ö ¹®¼­ÀÇ Á¦ÀÛÀڵ鿡 ÀÇÇؼ­ ¸¸ »ç¿ëµÇ¾î¾ß ÇÑ´Ù. ¸¸ÀÏ µðÆúÆ® ½ºÅ¸ÀϽ¬Æ®°¡ ÀÌµé ¼Ó¼ºµéÀ» ÁöÁ¤Çϸé, Á¦ÀÛÀÚµé°ú »ç¿ëÀÚµéÀº À̵éÀ» µ¤¾î¾º¿ì´Â(override) ¸í·ÉÀ» ÁöÁ¤ÇÏÁö ¾Ê¾Æ¾ß ÇÑ´Ù. »ç¿ëµµ±¸°¡ »ç¿ëÀÚ ¿äû¿¡ µû¶ó Yiddish(º¸Åë Èñ¶ø¾î ±ÛÀÚ·Î ¾²¿©Áø)¸¦ ¶óƾ(Latin)±ÛÀÚµé·Î ¹ø¿ªÇÏ´Â °æ¿ì¿¡, »ç¿ëµµ±¸¿¡¼­ ¾ç¹æÇâ(bidi) ±â´ÉÀ» µ¤¾î¾º¿ì´Â °ÍÀº ÀüÇüÀûÀÎ ¿¹¿ÜÀÌ´Ù.

¹ø¿ª¹® HTML 4 ±Ô°Ý Ç׸ñ 8.2´Â HTML ¿¤·¹¸àÆ®µéÀÇ ¾ç¹æÇ⼺ ±â´ÉÀ» Á¤ÀÇÇÑ´Ù. µû¶ó¼­ ±Ô°Ý¿¡ ºÎÇÕÇÏ´Â HTML »ç¿ëµµ±¸µéÀº Á¦ÀÛÀÚ¿Í »ç¿ëÀÚ ½ºÅ¸ÀϽ¬Æ®µé ¾È¿¡ ÀÖ´Â 'direction'°ú 'unicode-bidi' ¼Ó¼ºÀ» ¹«½ÃÇÒ ¼ö ÀÖ´Ù. ¹ø¿ª¹® HTML 4¿¡¼­ ÁöÁ¤ÇÑ ¹æÇ⼺ ±â´ÉÀ» ¾ò±â À§ÇÑ ½ºÅ¸ÀϽ¬Æ® ¸í·ÉµéÀÇ ½ºÅ¸ÀϽ¬Æ® ¿¹Á¦¿¡ Á¦½ÃµÇ¾ú´Ù. HTML 4 ±Ô°Ý¿¡´Â Ãß°¡ÀûÀÎ ¹ø¿ª¹® ¾ç¹æÇ⼺ ¹®Á¦¿¡ ´ëÇÑ Á¤º¸°¡ ÀÖ´Ù.

'direction'
°ª:  ltr | rtl | inherit
ÃÖÃÊ°ª:  ltr
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé, ±×·¯³ª prose ÂüÁ¶
Àü´Þ:  µÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ºí·°µéÀÇ ±âº» ¾²´Â ¹æÇâ°ú ±ò¸²(embedding)°ú µ¤¾î¾º¿ò(override)ÀÇ ¹æÇâÀ» ÁöÁ¤ÇÑ´Ù(À¯´ÏÄÚµå(Unicode) ¾ç¹æÇâ ±â´ÉÀ» À§ÇÑ 'unicode-bidi' ÂüÁ¶). Ãß°¡ÀûÀ¸·Î, ÀÌ´Â Å×À̺í(table) Ä÷³(column) ¹è¿­ ¹æÇâ, ¼öÆò ³ÑóÈ帧(overflow) ¹æÇâ°ú, 'text-align: justify'ÀÎ °æ¿ì, ºí·° ¾ÈÀÇ ºÒ¿ÏÀüÇÑ ¸¶Áö¸· ÁÙÀÇ À§Ä¡¸¦ ÁöÁ¤ÇÑ´Ù.

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

ltr
¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î(left-to-right)ÀÇ ¹æÇâ.
rtl
¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î(right-to-left)ÀÇ ¹æÇâ.

'direction' ¼Ó¼ºÀÌ ÀζóÀÎ ¿¤·¹¸àÆ®¿¡¼­ È¿°ú¸¦ °¡Áö·Á¸é, 'unicode-bidi' ¼Ó¼º°ªÀÌ ±ò·Á('embed')Àְųª ¶Ç´Â µ¤¾î¾º¿ö('override')¾ß ÇÑ´Ù.

ÁÖ¼®. 'direction' ¼Ó¼ºÀÌ Å×À̺íÀÇ Ä÷³ ¿¤·¹¸àÆ®¿¡ ÁöÁ¤µÇ¸é, ¹®¼­°èÅë(tree)¿¡¼­´Â Ä÷³µéÀÌ Á¸ÀçÇÏÁö ¾ÊÀ¸¹Ç·Î, Ä÷³ÀÇ ¼¿(cell)µé¿¡ ÀÇÇÏ¿© Àü´ÞµÇÁö ¾Ê´Â´Ù. µû¶ó¼­, CSS´Â HTML4ÀÇ Ç׸ñ 11.3.2.1¿¡ ±â¼úµÈ, "dir" ¾ÖÆ®¸®ºäÆ® Àü´Þ ±ÔÄ¢µé¸¦ ½±°Ô ÀνÄÇÒ ¼ö ¾ø´Ù.

'unicode-bidi'
°ª:  normal | embed | bidi-override | inherit
ÃÖÃÊ°ª:  normal
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé, ±×·¯³ª prose¸¦ ÂüÁ¶Ç϶ó.
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

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

normal(Á¤»ó)
±× ¿¤·¹¸àÆ®´Â ¾ç¹æÇâ ±â´É¿¡ ´ëÇÏ¿© Ãß°¡ÀûÀÎ ¼öÁØÀÇ ±ò¸²(embedding)À» ¿­Áö ¾Ê´Â´Ù. ÀζóÀÎ ¿¤·¹¸àÆ®¿¡¼­, ¿¤·¹¸àÆ® ¹Ù¿î´Ù¸®(boundary)µéÀ» ÅëÇÏ¿©, ÇÔÃàÀû Àç Á¤·Ä ÀÛ¾÷ÀÌ ÀϾ´Ù.
embed(±ò¸²)
±× ¿¤·¹¸àÆ®°¡ ÀζóÀÎÀ̸é, ÀÌ °ªÀº ¾ç¹æÇâ ±â´É¿¡ ´ëÇÏ¿© Ãß°¡ÀûÀÎ ¼öÁØÀÇ ±ò¸²À» ¿¬´Ù. ±× ±ò¸² ¼öÁØÀÇ ¹æÇâÀº 'direction' ¼Ó¼º¿¡ ÀÇÇÏ¿© ÁÖ¾îÁø´Ù. ±× ¿¤·¹¸àÆ® ¾È¿¡¼­, ÇÔÃàÀûÀ¸·ÎÀ¸·Î ÀçÁ¤·ÄÀÌ ÀϾ´Ù ÀÌ´Â ±× ¿¤·¹¸àÆ®ÀÇ ½ÃÀÛ¿¡, 'direction: ltr'¸¦ À§ÇØ, LRE(U+202A) ¶Ç´Â, 'direction: rtl'À» À§ÇØ, RLE(U+202B)¿Í ¿¤·¹¸àÆ®ÀÇ ³¡¿¡ PDF (U+202C)¸¦ Ãß°¡ÇÏ´Â °Í°ú °°´Ù.
bidi-override(¾ç¹æÇ⼺ µ¤¾î¾º¿ò)
¸¸ÀÏ ±× ¿¤·¹¸àÆ®°¡ ÀζóÀÎ ¶Ç´Â ÀζóÀÎ ¿¤·¹¸àÆ®µé ¸¸À» Æ÷ÇÔÇÏ´Â ºí·°·¹º§ ¿¤·¹¸àÆ®À̸é, µ¤¾î¾º¿ì±â°¡ ÀϾ´Ù. ÀÌ´Â ±× ¿¤·¹¸àÆ® ¾È¿¡¼­ ÀçÁ¤·ÄÀº ¾ö°ÝÇÏ°Ô ±× 'direction' ¼Ó¼ºÀÇ ¼ø¼­¿¡ µû¶ó ÀÌ·ç¾îÁø´Ù´Â ÀǹÌÇϸç, ¾ç¹æÇâ ±â´É(algorithm)ÀÇ ÇÔÃàÀû ºÎºÐÀº ¹«½ÃµÈ´Ù. ÀÌ´Â ±× ¿¤·¹¸àÆ®ÀÇ ½ÃÀÛ¿¡, 'direction: ltr'¸¦ À§ÇØ, LRO(U+202D) ¶Ç´Â, 'direction: rtl'À» À§ÇØ, RLO(U+202E)¿Í ¿¤·¹¸àÆ®ÀÇ ³¡¿¡ PDF (U+202C)¸¦ Ãß°¡ÇÏ´Â °Í°ú °°´Ù.

°¢ ºí·°·¹º§ ¿¤·¹¸àÆ® ¾È¿¡¼­ ÃÖÁ¾ ±ÛÀÚµéÀÇ ¼ø¼­´Â, ±× ¾ç¹æÇâ(bidi) Á¦¾î ÄÚµå(code)µéÀÌ À§¿¡¼­ ¼³¸íÇÑ ¹Ù¿Í °°ÀÌ Ãß°¡µÈ °Íó·³, ¸¶Å©¾÷(markup)ÀÌ ÀоîÁ®, ½ºÅ¸ÀÏ ÅؽºÆ®¿Í °°Àº Áٹٲ޵éÀº »ý¼ºÇÏ´Â ´Ü¼øÇÑ ÅؽºÆ®¿¡¼­, °á°úÀûÀÎ ±ÛÀÚµéÀÇ ¼ø¼­´Â À¯´ÏÄÚµå(Unicode) ¾ç¹æÇâ ±â´É¿¡ Àü´ÞµÈ´Ù. ÀÌ Ã³¸®¿¡¼­, À̹ÌÁöµé°ú °°Àº ºñ ÅؽºÆ® »çÇ×µéÀº, 'unicode-bidi' ¼Ó¼ºÀÌ 'normal' ÀÌ ¿ÜÀÇ °ªÀ» °¡Áö°í ÀÖÁö ¾Ê´Â ÇÑ, Áß¼º(neutral) ±ÛÀڷΠ󸮵ȴÙ. 'normal' ÀÌ ¿ÜÀÇ °ªÀ» °¡Áö´Â °æ¿ì¿¡´Â ±× ¿¤·¹¸àÆ®¿¡¼­ ÁöÁ¤µÈ 'direction'À¸·Î Áö½ÃµÈ ±ÛÀÚµé·Î 󸮵ȴÙ.

ÀζóÀÎ ¹Ú½ºµéÀÇ ´ÜÀÏÇÑ ¹æÇâ(ÀüºÎ left-to-right ¶Ç´Â ÀüºÎ right-to-left)À¸·Î È帧ÀÌ °¡´ÉÇϱâ À§Çؼ­´Â, Ãß°¡ÀûÀÎ ÀζóÀÎ ¹Ú½ºµé(°¡¸í ÀζóÀÎ ¹Ú½ºµé Æ÷ÇÔ)ÀÌ »ý¼ºµÇ¾î¾ß ÇÒ ¼ö ÀÖ°í, ÀϺΠÀζóÀÎ ¹Ú½º(inline box)µéÀº È帧 Àü¿¡ À߶óÁö°í Àç ¹èÄ¡µÉ ÇÊ¿ä°¡ ÀÖÀ» ¼ö ÀÖ´Ù´Â Á¡¿¡ À¯ÀÇÇ϶ó.

À¯´ÏÄÚµå(Unicode) ±â´ÉÀÌ ±ò¸²(embedding) ¼öÁØ 15·Î ÇÑÁ¤µÇ±â ¶§¹®¿¡, 'unicode-bidi'¸¦, Àû´çÇÑ °æ¿ì¸¦ Á¦¿ÜÇÏ°í´Â, 'normal' ÀÌ¿ÜÀÇ ´Ù¸¥ °ªÀ» »ç¿ëÇÏÁö ¾Êµµ·Ï ÁÖÀÇÇÏ¿©¾ß ÇÑ´Ù. ƯÈ÷, °ª 'inherit'´Â Ưº°È÷ ÁÖÀÇÇÏ¿© »ç¿ëÇÏ¿©¾ß ÇÑ´Ù. ±×·¯³ª, ÀϹÝÀûÀ¸·Î, ºí·°µé·Î µð½ºÇ÷¹ÀÌ µÇµµ·Ï Çϱâ À§ÇÏ¿© »ç¿ëµÇ´Â ¿¤·¹¸àÆ®¿¡¼­´Â, ÀζóÀÎ(inline)À¸·Î º¯°æµÇ µð½ºÇ÷¹À̵Ǵ °æ¿ì, ±× ¿¤·¹¸àÆ®¸¦ °°ÀÌ À¯ÁöÇϱâ À§ÇÏ¿©, 'unicode-bidi: embed'ÀÇ ¼³Á¤ÀÌ ¼±È£µÈ´Ù(¾Æ·¡ ¿¹Á¦ ÂüÁ¶).

´ÙÀ½ ¿¹Á¦´Â ¾ç¹æÇâ ÅؽºÆ®¸¦ °¡Áö°í ÀÖ´Â XML ¹®¼­¸¦ º¸¿©ÁØ´Ù. ÀÌ´Â Áß¿äÇÑ ¼³°è ¿øÄ¢À» ¼³¸íÇÑ´Ù: DTD ¼³°èÀÚµéÀº, ±× ¾ð¾î¿¡ Àû´çÇÑ ¿¤·¹¸àÆ®¿Í ¾ÖÆ®¸®ºäÆ®µé°ú µ¿¹Ý ½ºÅ¸ÀϽ¬Æ®µé¿¡¼­, µÎ ¾ç¹æÇ⼺(bidi)À» ´Ù °í·ÁÇÏ¿©¾ß ÇÑ´Ù. ½ºÅ¸ÀϽ¬Æ®µéÀº ¾ç¹æÇâ ¸í·ÉµéÀº ´Ù¸¥ ½ºÅ¸ÀÏ ¸í·Éµé°ú ±¸ºÐ µÇµµ·Ï ¼³°èµÇ¾î¾ß ÇÑ´Ù. ¾ç¹æÇâ ¸í·ÉµéÀº, ±× ¹®¼­¾ð¾î ¶Ç´Â DTDÀÇ ¾ç¹æÇâ ±â´ÉÀÌ À¯ÁöµÇµµ·Ï, ´Ù¸¥ ½ºÅ¸ÀϽ¬Æ®µé¿¡ ÀÇÇÏ¿© µ¤¾î, ¾º¿ö(override)ÁöÁö ¾Ê¾Æ¾ß ÇÑ´Ù.

¿¹Á¦:

ÀÌ ¿¹Á¦¿¡¼­, ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î(left-to-right)ÀÇ ¼Ó¼ºÀ» °®´Â ±ÛÀÚµéÀº ¼Ò¹®ÀÚ·Î, ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î(right-to-left) ±ÛÀÚµéÀº ´ëºÐÀÚ·Î ÇÏ¿´´Ù.

<HEBREW>
  <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
  <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
</HEBREW>
<ENGLISH>
  <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
  <PAR>english14 english15 english16</PAR>
  <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
</ENGLISH>

ÀÌ °ÍÀÌ XMLÀ̹ǷÎ, ½ºÅ¸ÀϽ¬Æ®´Â ¾²´Â ¹æÇâÀ» ÁöÁ¤ÇÏ¿©¾ß ÇÑ´Ù. ±× ½ºÅ¸ÀϽ¬Æ®´Â:

 /* ¾ç¹æÇ⼺(bidi) ÁöÁ¤À» À§ÇÑ ¸í·Éµé */
HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed}
ENGLISH {direction: ltr; unicode-bidi: embed}

 /* Ç¥ÇöÀ» À§ÇÑ ¸í·Éµé*/
HEBREW, ENGLISH, PAR {display: block}
EMPH {font-weight: bold}

HEBREW ¿¤·¹¸àÆ®´Â ±âÃÊ ¹æÇâÀÌ ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î(right-to-left)ÀÇ ºí·°ÀÌ°í, ENGLISH ¿¤·¹¸àÆ®´Â ±âÃÊ ¹æÇâÀÌ ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î(left-to-right)ÀÇ ºí·°ÀÌ´Ù. PARµéÀº ±×µéÀÇ ¸ðüµé·Î ºÎÅÍ ±âÃÊ ¹æÇâÀÌ Àü´ÞµÈ ºí·°(block)µéÀÌ´Ù. µû¶ó¼­, ù¹ø° µÎ°³ÀÇ PARµéÀº ¸ÇÀ§ ¿À¸¥ÂÊ¿¡¼­ ½ÃÀÛÇÏ¿© Àаí, ³ªÁß ¼¼°³´Â ¸ÇÀ§ ¿ÞÂÊ¿¡¼­ ½ÃÀÛÇÏ¿© Àд´Ù. HEBREW¿Í ENGLISH´Â ¿¤·¹¸àÆ® À̸§µéÀº ¸íÈ®¼º ¸¸À» À§Çؼ­ ¼±ÅõǾú´Ù´Â Á¡À» À¯À§Ç϶ó; ÀϹÝÀûÀ¸·Î, ¿¤·¹¸àÆ® À̸§µéÀº ¾ð¾î¸¦ ÂüÁ¶ÇÏÁö ¾Ê°í ±¸Á¶¸¦ Àü´ÞÇÏ¿©¾ß ÇÑ´Ù.

EMPH ¿¤·¹¸àÆ®´Â ÀζóÀÎ(inline-level)ÀÌ°í, 'unicode-bidi'ÀÇ °ªÀÌ 'normal'(ÃÖÃÊ°ª)À̹ǷÎ, ÅؽºÆ®ÀÇ ¼ø¼­¿¡´Â ¾Æ¹« È¿°úµµ ¾ø´Ù. ÀÌ¿Í´Â ´Þ¸®,HE-QUO ¿¤·¹¸àÆ®´Â ±ò¸²(embedding)À» »ý¼ºÇÑ´Ù.

ÀÌ ÅؽºÆ®ÀÇ ¾ç½ÄÈ­´Â ±× ÁÙÀÇ ±æÀÌ°¡ ±æ¸é ¾Æ·¡¿Í °°¾Æ Áú °ÍÀÌ´Ù:

5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

             8WERBEH 7WERBEH 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 20WERBEH english19 18WERBEH

HE-QUO ±ò¸²(embedding)Àº HEBREW18ÀÌ english19ÀÇ ¿À¸¥ÂÊ¿¡ ¿Àµµ·Ï ÇÑ´Ù´Â Á¡¿¡ À¯ÀÇÇ϶ó.

ÁٹٲÞÀ» ÇÏ¿©¾ß Çϸé, ÀÌ´Â ´ÙÀ½°ú °°ÀÌ µÈ´Ù:

2WERBEH 1WERBEH
-EH 4WERBEH english3
5WERB

-EH 7WERBEH 6WERBEH
8WERB

english9 english10 en-
glish11 12WERBEH
13WERBEH

english14 english15
english16

english17 18WERBEH
20WERBEH english19

HEBREW18Àº english19º¸´Ù ¸ÕÀú ÀÐÇôÁ®¾ß ÇϹǷÎ, english19ÀÇ À­ÁÙ¿¡ ÀÖ´Ù. ¾ÕÀÇ ¾ç½ÄÈ­·Î ºÎÅÍ ±ä ÁÙÀÇ ´Ü¼øÇÑ ÀÚ¸§ÀÌ ÀϾÁö ¾Ê´Â´Ù. english19ÀÇ Ã¹¹ø° ´ÜÀý(syllable)Àº ¾Õ ÁÙ¿¡ ¸ÂÀ» ¼ö ÀÖÀ¸³ª, right-to-left ¹®¸Æ¿¡¼­ ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î(left-to-right) ´Ü¾î¿¡ ÇÏÀÌÇÂ(-) ³Ö±â¿Í, ±× ¿ªÀº ÁÙÀÇ ÇÑ °¡¿î¿¡ ÇÏÀÌÇÂ(-)ÀÌ µð½ºÇ÷¹À̵Ǵ °ÍÀ» ȸÇÇÇϱâ À§ÇÏ¿© ÀϹÝÀûÀ¸·Î ¾ïÁ¦µÈ´Ù Á¡µµ À¯³äÇ϶ó.


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