Float, clear ¼Ó¼º
¢¸ ¢º
±âÈ£ ¼³¸í
A | B : A ¶Ç´Â B ÁßÀÇ ÇϳªÀÌ´Ù.
float : left | right | none
float ¼Ó¼ºÀº º¸Åë À̹ÌÁö¿¡ ¸¹ÀÌ »ç¿ëÇÑ´Ù. À̹ÌÁö¸¦ ¿ÞÂÊÀ̳ª ¿À¸¥ÂÊ¿¡ ¶°´Ù´Ïµµ·Ï Çϸé, À̹ÌÁö ´ÙÀ½¿¡ ³ª¿À´Â ¹®ÀÚ¿ÀÌ À̹ÌÁö¸¦ µÑ·¯½Î°í ³ª¿À°Ô µÈ´Ù. HTML¿¡¼´Â ±×¸² ¿·¿¡ ¹®ÀÚ¿À» ³ÖÀ» °æ¿ì, Ç×»ó ÇÑ ÁÙ¸¸ ³ª¿À°í, ³ª¸ÓÁö´Â ±×¸² ¾Æ·¡·Î ³»·Á°¡°Ô µÈ´Ù.
¸ðµç element¿¡ Àû¿ëµÇ¸ç, À¯ÀüµÇÁö ¾Ê´Â´Ù.
ÃʱⰪÀº noneÀÌ´Ù.
clear : none | left | right | both
ÁöÁ¤ÇÑ ¹æÇâ¿¡´Â ¶°´Ù´Ï´Â box°¡ ÀÚ¸®ÇÒ ¼ö ¾øÀ½À» ³ªÅ¸³½´Ù. Áï, clearÀÇ °ªÀ» both·Î Çϸé, ÇØ´ç element boxÀÇ Á¿쿡´Â ¶°´Ù´Ï´Â box°¡ ¿Ã ¼ö ¾ø´Ù. µû¶ó¼, ¶°´Ù´Ï´Â boxÀÇ ´ÙÀ½ ÁÙ·Î ³»·Á°¡°Ô µÈ´Ù.
¸ðµç element¿¡ Àû¿ëµÇ¸ç, À¯ÀüµÇÁö ¾Ê´Â´Ù.
ÃʱⰪÀº noneÀÌ´Ù.
<HTML>
<HEAD>
<STYLE type="text/css">
IMG { float : left }
HR.clear { clear : both }
</STYLE>
<BODY>
<IMG src = "leaves.gif">¿¹»Û ³ª¹µÀÙµéÀÔ´Ï´Ù. °¡À» °°Áö¿ä?
HTML¿¡¼´Â ÀÌ·¸°Ô ±×¸² ´ÙÀ½¿¡ ±ÛÀÚ¸¦ ¾²¸é ±×¸² ¿·¿¡ ÇÑ ÁÙ ³ª¿À°í,
³ª¸ÓÁö´Â ±×¸² ¾Æ·¡·Î ³»·Á°¡ ¹ö·Á¿ä.
°¡·Î¼±µµ ÀÌ ±ÛÀÚµé ¾Æ·¡, ±×¸² ¿·¿¡ ³ª¿ÀÁö¿ä.
clear ¼Ó¼ºÀ» ¾´ °¡·Î¼±Àº ±×¸² ¾Æ·¡·Î ³»·Á°¡±¸¿ä.
<HR>
<HR class=clear>
<BODY>
</HTML> ÀÌ·¸°Ô ³ª¿Í¿ä
¢¸ ¢º