Top

[HTML/CSS] DIV ³ôÀÌ¿¡ ¸ÂÃç 100%·Î ³ª¿À°Ô ÇÏ´Â ¹æ¹ý | Web-Programing
±è°æÈÆ (admin) | Editor | 2014/06/24 11:26:57 | Á¶È¸:4009

DIV ³ôÀÌ¿¡ ¸ÂÃç 100%·Î ³ª¿À°Ô ÇÏ´Â ¹æ¹ý


ȨÆäÀÌÁ¦ ±âº» ·¹À̾ƿôÀ» DIV·Î ±¸¼ºÇßÀ»¶§.

º»¹® ³ôÀÌ¿¡µû¶ó ¼­ºê DIV³ôÀÌ°¡ ÀÚµ¿À¸·Î ¸¶ÃçÁö´Â ·¹À̾ƿôÀÇ ÇÑ ¹æ¹ýÀÌ´Ù. 

·¹À̾ƿôÀ» ¸¸µå´Âµ¥´Â ¿©·¯°¡Áö ¹æ¹ýÀÌ ÀÖÀ¸¸ç

°³ÀÎ ½º½º·Î À̹æ¹ý Àú¹æ¹ýÀ» ÅëÇØ¿© ÀÚ±âÇÑÅ× ¸Â´Â ÃÖÀûÀÇ ·¹À̾ƿôÀ» ¸¸µé¾î ³»´Â°Ô Áß¿äÇÏ´Ù.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> 
     <title>div Layout</title> 
     <style type="text/css"> 
          html, body {margin:0;padding:0;} 

          #wrap { position:relative; width:1000px; } 

          #leftside{ position:absolute; top:0px; left:0px; bottom:0px; width:200px; background:#89CB7B; } 

          #content{ position:relative; left:200px; width:600px; min-height:500px; background:#F48D4E; } 

          #rigthside{ position:absolute; top:0px; right:0px; bottom:0px; width:300px; background:#ff00CC; } 

          #footer { position:relative; width:1000px; height:77px; background:#7DAAE3; } 

     </style> 
</head> 
<body> 
     <div id="wrap"> 
          <div id="leftside">leftside</div> 

          <div id="content">content</div> 

          <div id="rigthside">rightside</div> 

          <div id="footer">footer</div> 

     </div> 
</body> 
</html>  


°øÀ¯Çϱâ
°øÀ¯Çϱâ
0
0
0


´ñ±ÛÀ» ºÒ·¯¿À´Â ÁßÀÔ´Ï´Ù.
¡ã ÀÌÀü±Û [CSS] ºê¶ó¿ìÀú ¹öÀüº° CSSÇÙ ±è°æÈÆ (admin) 2014-06-24 11:38:46
¡å ´ÙÀ½±Û [CSS] floatÀ» clearÇÏ´Â 4°¡Áö ¹æ¹ý. ±è°æÈÆ (admin) 2014-06-20 11:47:29