ȨÀ¸·Î | ¹«·áȸ¿ø°¡ÀÔ | ¾ÆÀ̵ð/ºñ¹øÃ£±â
ÃßõÀ½¾Ç¹æ¼Û
css ¼Ó¼º Áß float
11³â Àü
Ç÷Ô(float):

°íÀüÀû ´Ù´ÜÇü ±×¸®µå ·¹À̾ƿô ¹æ½Ä (¿¹:½Å¹®) CSS 1¿¡¼­ºÎÅÍ Áö¿ø ºê¶ó¿ìÀú°¡ ±¸ÇöÇϱ⠰¡Àå ¾î·Á¿î ¼Ó¼º À̹ÌÁö Á¤·Ä°ú »çÀ̵å¹Ù ±¸¼º, °¡·ÎÇü ³×ºñ°ÔÀÌ¼Ç ±¸¼º¿¡ À¯¿ë

¼Ó¼º

float:left; float:right; float:both;

ÇØÁ¦

clear:left; clear:right; clear:both;





ºê¶ó¿ìÀú°¡ ¿¤¸®¸ÕÆ®¸¦ Çϳª °¡Á® °¡¼­ ±×°ÍÀ» È­¸é ¿¡¼­ µÉ ¼ö ÀÖ´ÂÇÑ ¸Ö¸® ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊÀ¸·Î ¶°¿À¸£°Ô ÇÑ ÈÄ, ±× ¾Æ·¡ÀÇ ¿¤¸®¸ÕÆ®µéÀ» ¶° ÀÖ´Â ¿¤¸®¸ÕÆ® ÁÖÀ§·Î Èê·Á(flow) º¸³»´Â °ÍÀ» foat¶ó°í ÇÑ´Ù


flow : ºê¶ó¿ìÀú´Â ¾ðÁ¦³ª ÀÏÁ¤ÇÑ ¹ýÄ¢À» °¡Áö°í ¿¤¸®¸ÕÆ®¸¦ ¹èÄ¡ÇÑ´Ù. À̰ÍÀ» È帧(flow)À̶ó°í ÇÑ´Ù
       ºê¶ó¿ìÀú°¡ XHTML ¿¤¸®¸ÕÆ®µéÀ» ÆäÀÌÁö¿¡ ¹èÄ¡Çϱâ À§ÇØ »ç¿ë ÇÏ´Â °Í, Áï È帧À» Á¦¾î ÇÏ´Â °Í
           ºí·° ´ÜÀ§ : À§¿¡¼­ ¾Æ·¡·Î Â÷·Ê·Î ³ªÅ¸³» Áָ鼭, ºí·° ¿¤¸®¸ÕÆ®¸¦ ¸¸³ª¸é ¶óÀÎ ºê·¹ÀÌÅ©¸¦ °í·ÁÇØ¼­ ¶óÀÎÀ» ³Ö¾î ÁÖ¸ç

           ¹ØÀ¸·Î ³»·Á °£´Ù
           ÀζóÀÎ : ¼öÆò ¹æÇâÀ¸·Î, ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î ¹Ù¦ ºÙ¾î¼­ È帥´Ù
                     °ø°£ÀÌ ¸ðÀÚ¶ó¸é ´ÙÀ½ ÁÙ·Î À̵¿, ÀÌ ¶§ ¼³Á¤µÈ Á¤·Ä ¹æ¹ý¿¡ ¸Â°Ô ÅØ½ºÆ®¸¦ ÀÚ¸£°í ¹èÄ¡ ÇÑ´Ù
           ºê¶ó¿ìÀú°¡ µÎ °³ÀÇ ¿¤¸®¸ÕÆ®¸¦ ¼öÆòÀ¸·Î ¹èÄ¡ ÇßÀ» ¶§ ¸¶Áø ¼³Á¤ ÇÏ´Â ¹ý:µÎ ¿¤¸®¸ÕÆ®ÀÇ ¸¶ÁøÀ» ´õÇÑ ¸¸Å­À» ¼³Á¤

           ÇØÁØ´Ù
                      Áï, ÇÑÂÊÀÌ 10px, ´Ù¸¥ ÇÑÂÊÀÌ 20pxÀ̶ó¸é ºê¶ó¿ìÀú´Â ÀÌ µÑÀ» ¹èÄ¡ÇÒ ¶§ µÎ ¿¤¸®¸ÕÆ® »çÀÌ¿¡ 30pxÀÇ °ø°£À»

                      ÁØ´Ù
           ºê¶ó¿ìÀú°¡ µÎ °³ÀÇ ¿¤¸®¸ÕÆ®¸¦ ¼öÁ÷À¸·Î ¹èÄ¡ ÇßÀ» ¶§ ¸¶Áø ¼³Á¤ ÇÏ´Â ¹ý:µÎ ¿¤¸®¸ÕÆ® Áß ¸¶ÁøÀÌ Å« ÂÊÀÇ ¸¶Áø ¸¸Å­

           °ø°£À» ÁØ´Ù
                      Áï, µÎ ¿¤¸®¸ÕÆ®ÀÇ ¸¶ÁøÀº °ãÃÄ Áø´Ù
            

float¸¦ ¼öÇàÇϱâ À§ÇØ ºê¶ó¿ìÀú°¡ ¿¤¸®¸ÕÆ®¸¦ ¶°¿À¸£°Ô ÇÏ´Â ¹æ¹ý
1. html ÆäÀÌÁö¿¡¼­ ¶°´Ù´Ï°Ô ÇÒ ¹®´ÜÀ» °ñ¶ó ±× ¹®´Ü¿¡ id¸¦ ÁØ´Ù
   <p id="sam">I .. zz</p>
2. ½ºÅ¸ÀÏ ½ÃÆ®¿¡¼­ 1.¿¡¼­ Á¤ÀÇÇÑ ¹®´Ü¿¡ ³Êºñ¸¦ ÁØ´Ù
   p#sam {width:200px;}
   ¿©±â¼­!! p ¿¤¸®¸ÕÆ®´Â ºí·° ¿¤¸®¸ÕÆ® À̹ǷΠ´ÙÀ½¿¡ µû¶ó¿À´Â ¿¤¸®¸ÕÆ®µéÀº ¶°´Ù´Ï´Â ¿¤¸®¸ÕÆ® À§·Î ¿Ã¶ó °¡Áö´Â ¸øÇÑ´Ù´Â
   °ÍÀ» ¿°µÎ¿¡ µÎ°í ´ÙÀ½ ´Ü°è·Î GOGO SSing~
3. float ¼Ó¼ºÀ» Àû¿ë ½ÃŲ´Ù
   p#sam {width:200px; float:right;}
   float ¼Ó¼ºÀÌ Àû¿ëµÇ¸é ºê¶ó¿ìÀú´Â -->id°¡ samÀÎ p ¿¤¸®¸ÕÆ®¸¦ ¶°¿À¸£°Ô ÇÑ´Ù

   a. ¿¤¸®¸ÕÆ®°¡ ¶°¿À¸£°í ³ª¸é ºê¶ó¿ìÀú´Â ¶°¿À¸¥ ¿¤¸®¸ÕÆ® ¾Æ·¡ÀÇ ¿¤¸®¸ÕÆ®µéÀ» ¹èÄ¡ÇÒ ¶§ ¶°¿À¸¥ ¿¤¸®¸ÕÆ®´Â ¾ø´Â °Í ó·³

       ´Ù¸¥ ¿¤¸®¸ÕÆ®¸¦ ¹èÄ¡ÇÑ´Ù
      Áï, ¶°¿À¸¥ ¿¤¸®¸ÕÆ®ÀÇ ¾Æ·¡¿¡µµ ´Ù¸¥ ¿¤¸®¸ÕÆ®ÀÇ ¿µ¿ªÀÌ ¼³Á¤µÈ´Ù
   b. ¿¤¸®¸ÕÆ®¿¡ ÀÖ´Â ÄÁÅÙÃ÷¸¦ ¹èÄ¡ÇÒ ¶§´Â ¶°´Ù´Ï´Â ¿¤¸®¸ÕÆ®ÀÇ ¿µ¿ªÀ» ħ¹üÇÏÁö´Â ¾Ê°Ô, ÁÖÀ§¸¦ °¨½Î°í È帣°Ô ¹èÄ¡ ÇÑ´Ù

   c. ¶°ÀÖ´ø ¿¤¸®¸ÕÆ®¸¦ ¹ØÀ¸·Î ³»¸®°í Ãâ·Â ÇÑ´Ù






  




tip1. ÀÌ ¶§, ÄÁÅÙÃ÷°¡ ¶°ÀÖ´ø ¿¤¸®¸ÕÆ® ¾Æ·¡·Îµµ È帣´Â°É ¸·°í ½ÍÀ¸¸é ¿ÞÂÊ ¿¤¸®¸ÕÆ®¿¡ ¶°ÀÖ´ø ¿¤¸®¸ÕÆ®°¡ Â÷ÁöÇÏ´Â °ø°£¸¸Å­

      ¸¶ÁøÀ» ÁØ´Ù



tip2. ¸¸¾à ¹Ù´Ú±Û(footer)°¡ ¾Æ·¡¿¡ À־, ºê¶ó¿ìÀú¸¦ ³ÐÈ÷¸é ¹Ù´Ú±ÛÀÌ ¶°ÀÖ´ø ¿¤¸®¸ÕÆ® ¾Æ·¡·Î °ãÃÄÁ® µé¾î °£´Ù¸é?

      clear ¼Ó¼ºÀ» »ç¿ëÇÏ¸é µÈ´Ù

      clear : float¿¡ ÀÇÇØ ¶°¿À¸¥ ¿¤¸®¸ÕÆ®°¡ Ŭ¸®¾î·Î ÁöÁ¤ÇØ ÁØ ÂÊ¿¡ ¿À´Â °ÍÀ» Çã¿ëÇÏÁö ¾Ê´Â´Ù

      »ç¿ë¹æ¹ý : ¸ÕÀú ¹Ù´Ú±Û¿¡ id¸¦ ÁØ´Ù

                     ½ºÅ¸ÀÏ ½ÃÆ®¿¡ Ŭ¸®¾î ¼Ó¼ºÀ» Ãß°¡ÇÑ´Ù

                    -->html ¿¡¼­ <p id="footer">

                    css file : p#footer{ clear:right; }

                   ===> ÀÌ·¸°Ô ÇØÁÖ¸é ºê¶ó¿ìÀú°¡ ³Ð¾î Áö´õ¶óµµ ¶°ÀÖ´ø ¿¤¸®¸ÕÆ® ¾Æ·¡·Î µé¾î°¡Áö ¾Ê´Â´Ù
ÃßõÃßõ : 237 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
3,030
 Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
3,029
 À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
3,028
 ¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
3,027
 [HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
3,026
 HTML <Audio> »ç¿ë¹ý
3,025
 À©µµ¿ì10 ½Ã½ºÅÛÆÄÀÏ ¼Õ»ó (Ãʰ£´Ü ¿À·ù º¹±¸¹æ¹ý!!)
3,024
 PHP ÆÄÀÏ Á¸Àç ¿©ºÎ ÆÄ¾ÇÇϱâ(·ÎÄà ÆÄÀÏ Á¸Àç ¹× ¿ø°ÝÁö ÆÄÀÏ Á¸Àç)
3,023
 [CSS] ¹Ú½º ¼¼·Î °¡¿îµ¥ Áß¾Ó Á¤·Ä 6°¡Áö
3,022
 CSS Layout ¼öÆò & ¼öÁ÷ Á¤·Ä
3,021
 ¿©·¯ µµ¸ÞÀÎµé °£ ÄíŰ °øÀ¯Çϱâ
3,020
 ÅÂ±× »çÀÌ¿¡ ÀÖ´Â ÅØ½ºÆ®¸¦ ÃßÃâ
3,019
 [JQuery] textbox focus on offÀ϶§ ¼ýÀÚ ÄÞ¸¶ º¸¿©ÁÖ±â
3,018
 ÄíŰ »ý¼º,°¡Á®¿À±â,»èÁ¦
3,017
 »ç¿ëÀÚ ÇÔ¼ö ¸ðÀ½
3,016
 ¸¶¿ì½º,Űº¸µå Á¦ÇÑ ( ¿À¸¥ÂÊŬ¸¯,µå·¡±×,¿µ¿ª¼±Åõî..)
3,015
 [HTML5] <video> - DOMÀ¸·Î Á¦¾îÇϱâ
3,014
 HTML5 video ű׿¡¼­ ¿µ»ó Á¿ì¹ÝÀü
3,013
 PHP - ƯÁ¤ ÅÂ±× ¹× ¹®ÀÚ¿­ ÃßÃâ, Á¦°Å
3,012
 [PHP] define°ú definedÀÇ Â÷ÀÌ
3,011
 ¿ìŬ¸¯ ¿Ïº®Â÷´Ü ½ºÅ©¸³Æ®
3,010
 iframe ³ôÀÌ 100% ¸ÂÃß±â
3,009
 curl ÇÔ¼ö¸¦ ÀÌ¿ëÇÑ HTTP REFERER º¯°æ
3,008
 À©µµ¿ì10 ½Ã½ºÅÛ ÆÄÀÏ ¹× Dism °Ë»ç
3,007
 ÅؽºÆ® ÁٹٲÞ, ±ÛÀÚÀÚ¸£±â CSS
3,006
 jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æÄ§
Copyright (C) musictrot All rights reserved.