![](/bink.gif) |
|
| ![](/bink.gif) |
display:inlineÀÇ À߸øµÈ ¿ÀÇØ |
|
|
![](icon/private_name/1.gif) |
12³â Àü |
1. display
block Element ¸¦ Á¤·ÄÇÒ¶§ display: inline; À̳ª float¸¦ »ç¿ëÇÑ´Ù°í ¾Ë°í°è½Ã´Â ÆÛºí¸®¼ÅµéÀÌ ¸î¸íÀÌÀÖ´Ù.
ÇÏÁö¸¸ display°æ¿ì¿¡´Â ¸»±×´ë·Î µð½ºÇ÷¹ÀÌµÉ »óŸ¦ ¼³Á¤Çϴ°ÍÀÌ´Ù.
Áï ! inline ·¹º§·Î ÇÒ°ÍÀÌ³Ä block·¹º§·Î ÇÒ°ÍÀÌ³Ä ¾Æ´Ï¸é ¼û±æ°ÍÀ̳ĸ¦ ¼³Á¤Çϴ°ÍÀÌ´Ù.
¿¹Àü¿¡ ¾îµò°¡¿¡¼ display: inline; °ú float:left;¸¦ °°Àº ¿ëµµ·Î Á¤·Ä·Î »ç¿ëÇϴµ¥ Â÷ÀÌÁ¡À» ¹¯´Â ±ÛÀ» º»ÀûÀÌ ÀÖ´Ù.
blockÀ» inlineÀ¸·Î Çϸé ÀÚ¿¬½º·´°Ô ÀζóÀÎÀÇ Æ¯Â¡ÀÎ leftÁ¤·ÄÀÌ µÇ´Â°ÍÀÌ ´ç¿¬ÇÏ´Ù.
¿¹¸¦ µé¾î spanµµ inline¿ä¼ÒÀÌ´Ù À̳༮À» <span>aaa</span><span>aaa</span> ´ç¿¬È÷ leftÁ¤·ÄÀÌ µÈ´Ù.
ÇÏÁö¸¸ block¿ä¼ÒµéÀº float·Î ¼³Á¤ÇÏÁö¾ÊÀºÀÌ»óÀº ¶³¾îÁ®¼ ÇÑÁÙ¾¿³ª¿Â´Ù.
°í·Î °á·ÐÀº
blockÀÇ Á¤·ÄÀº float ! ! !
inlineÀÇ ¿ä¼ÒÀÇ Á¤·ÄÀº text-alignÀΰÍÀÌ´Ù.
ps. blockÀÇ Áß¾ÓÁ¤·ÄÀº Á¤·ÄÀ» ¿øÇÏ´Â block¿ä¼Ò¿¡¼ margin: 0 auto;¸¦ ÇØÁÖ¸é Áß¾Ó Á¤·ÄÀÌ µÈ´Ù
´Ü blockÀÇ Æ¯¼º»ó(IE) width°ªÀ» Áà¾ßÁß¾ÓÁ¤·ÄÀÌ µÈ´Ù.
(DTD¼³Á¤Àº ´ç¿¬ ÇØÁà¾ßÇÔ)
2. float
float´Â À§¿¡¼ ¾ð±ÞÇÑ ¹Ù¿Í °°ÀÌ object Áï blockÀÇ Á¤·ÄÀ» ´ã´çÇÏ°íÀÖ´Â ³à¼®ÀÌ´Ù.
float Attribute
-none
Default. Object displays where it appears in the text.
-left
Text flows to the right of the object.
-right
Text flows to the left of the object.
À§ÀÇ Attribute ¸¦ º¸´Ù½ÍÀÌ ÃÑ 3°¡ÁöÀÇ Á¤·ÄÀÌ Á¸Àç ÇÑ´Ù.
float´Â ÀÚ¼®°úµµ °°´Ù ¼·Î¼·Î ¿ÞÂÊÀ¸·Î ºÙÀ»Áö ¿À¸¥ÂÊÀ¸·Î ºÙÀ»Áö °áÁ¤¸¸ÇØÁÖ¸é
floatÇØÁØ ´ÙÀ½ Element ³à¼®µéÀº ¹«Á¶²« ±× È¿°ú·Î ÀÎÇؼ ºÙ¾î¹ö¸°´Ù.
ÀÌ°ÍÀ» ¹Ì¿¬¿¡ ¹æÁöÇϱâÀ§¿¡¼ clearÀ» ÇØÁִ°ÍÀÌ´Ù.
´ÙÀ½Àº clear¿¡ °üÇÑ Attribute ÀÌ´Ù.
clear Attribute
-none
Default. Floating objects are allowed on both sides.
-left
Object is moved below any floating object on the left side.
-right
Object is moved below any floating object on the right side.
-both
Object is moved below any floating object.
clearÀº È¥ÀÚ »ç¿ëÇÒ¶§´Â ¾Æ¹« È¿°ú°¡ ¾ø´Ù À̳༮ÀÇ ¸ñÀûÀº floatµÈ ³à¼®µéÀ» ÃʱâÈ ½ÃÄѹö¸®´Â ±â´ÉÀ» ÇÑ´Ù .
Áï
clear:left; : ¿ÞÂÊÀ¸·Î ºÙÀº ³à¼®µé¸¸ ¿ø·¡´ë·Î ¶³¾îÁ® ! !
clear:right; : ¿À¸¥ÂÊÀ¸·Î ºÙÀº ³à¼®µé¸¸ ¿ø·¡´ë·Î ¶³¾îÁ®! !
clear:both; ´Ù ¶³¾îÁ® !
ps.¶³¾îÁ®´Â ¿ø·¡ÀÇ ¼Ó¼ºÀ¸·Î µ¹¾Æ°¡¶õ¸»ÀÌ´Ù ¤Ñ_¤Ì Áï block¿ä¼ÒÀÇ °íÀ¯ÀÇ Á¤·ÄÀÎ ÇÑÁÙ¾¿Á¤·Ä
float:right; ¿Í float: left;¸¦ °°ÀÌ »ç¿ëÇߴµ¥
clear:left;¸¦ Çعö¸®¸é float:right;´Â »ì¾Æ ÀÖ¾î¼ ÈÄ¿¡ ¿Ã ElementÀÇ ÇѳðÀº ¿À¸¥ÂÊÀ¸·Î ºÙ¾î ¹ö¸°´Ù
Àß»ý°¢Çؼ clear¸¦ »ç¿ëÇÏÀÚ
±×¸®°í ÇÏÀ§ Element°¡ ¾ø¾îµµ Á¾·á½ÃÁ¡¿¡´Â °¡´ÉÇϸé clearÀ» ÇØÁÖÀÚ ³ªÁß¿¡ include·Î ºÒ·¯µéÀ̰ųª ¾÷µ¥ÀÌÆ®ÇÒ¶§ ¶Ç ¿À·ù°¡ ¹ß»ýÇÒ¼öÀÖ´Â°É ¹Ì¿¬¿¡ ¹æÁöÇϱâÀ§ÇؼÀÌ´Ù.
|
|
̵̧ : 629 |
̵̧
¸ñ·Ï
|
|
| ![](/bink.gif) |
|