dz¼±µµ¿ò¸»... |
|
ÄÄÇ»ÅÍ¿Í °ü·ÃÀÖ´Â ¸ðµç ÆÁÀ» °øÀ¯ÇսôÙ.
<html> <head> <title> ¹ÝÀÀÇü ·¹À̾ƿôÀ» ¸¸µé±â </title> ¹ÝÀÀÇü ·¹À̾ƿôÀ» ¸¸µé±â À§Çؼ´Â Çػ󵵿¡ Á¾¼ÓµÇ¾î¾ß Çϱ⶧¹®¿¡ ´ÙÀ½À» html head ¿¡ »ðÀÔÇÑ´Ù. <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{margin:0%;} .ho-header, .ho-sidebar, .ho-content, .ho-footer{border:solid 1px gray; margin: 2%; padding: 10px;} /* sidebar ¸¦ ¿ÞÂÊ¿¡ À§Ä¡ ½ÃŲ´Ù */ .ho-sidebar{float:left; width:16%; margin-right:0%;} /* content ¸¦ ¿À¸¥ÂÊ¿¡ À§Ä¡ ½ÃŲ´Ù */ .ho-content{float:right; width:72%; margin-left:0%;} /* À§ÀÇ float ¼Ó¼º ¹«½ÃÇÏ°í block À¸·Î ÀνÄÇϵµ·Ï clear ¼Ó¼º »ç¿ë */ .ho-footer{clear:both;} /* ÆøÀÌ 600 ÀÌÇÏÀ϶§´Â ·¹À̾ƿô ¼³Á¤ */ @media (max-width: 600px) { /* ¹ÝÀÀÇü ·¹À̾ƿôÀ» float ¼Ó¼ºÀ» none·ÎÇÏ¿© block À¸·Î ¼³Á¤ ÆøÀ» auto ¼³Á¤ */ .ho-sidebar, .ho-content{float:none; width:auto; margin: 2%;} } </style> </head> <body> <div id="" class="ho-header"> <h1>¹ÝÀÀÇü ·¹À̾ƿô</h1> </div> <div id="" class="ho-sidebar"> <h2>Sidebar</h2> <ul> <li>È£°¡°èºÎ</li> <li>°£ÆíÀåºÎ</li> <li>¾÷¹«°ü¸®</li> <li>¼¼±Ý°è»ê¼</li> </ul> </div> <div id="" class="ho-content"> <h2>Content</h2> <p> 2002³â ¸»¿¡ °³¹ßÀ» ½ÃÀÛÇؼ 2003³â 4¿ù¿¡ ¼öÀÔ/ºñ¿ëÀ» Áß½ÉÀ¸·Î ±â·Ï, °ü¸®ÇÏ´Â "À¥°¡°èºÎ"·Î ¼ºñ½º¸¦ ½ÃÀÛÇß½À´Ï´Ù. 2004³â 11¿ù¿¡ ÇÁ·Î±×·¥ÀÇ ±â´É°ú ¼º´ÉÀ» °³¼±Çؼ °³Á¤ÆÇÀÎ "È£°¡°èºÎ"·Î ¹ßÀü Çß½À´Ï´Ù. (ÀÚ»ê/ºÎä/¼öÀÍ/ºñ¿ë/Ä«µå»ç¿ë/ÀºÇàÀÔÃâ±Ý °ü¸® ¹× À½/¾ç·Â ±â³äÀÏ, ¸Å¿ùÇà»ç, ¸ÅÀϸ޸ð ÀÔ·Â, Áñ°Üã±â µî·Ï °ü¸®) 2006³â 2¿ù¿¡´Â ÇÁ·Î±×·¥ÀÇ ±â´Éº¸´Ù´Â »ç¿ëÀÚÀÇ ÆíÀǸ¦ À§Çؼ ·Î±×ÀÎ ÆäÀÌÁö¸¦ ´ë½ÅÇÒ Áñ°Üã±â ÆäÀÌÁö¸¦ ¸ÞÀÎÆäÀÌÁö·Î º¯°æÇß½À´Ï´Ù. °¡°èºÎ¸¦ ½ÃÀÛÆäÀÌÁö·Î µî·ÏÇϼż ÀÎÅÍ³Ý ¼ÇÎÀÌ º¸´Ù Æí¸®ÇÏ°í ¾ÈÁ¤ÀûÀ¸·Î ÀÌ·ïÁö±æ ±â´ëÇÕ´Ï´Ù. 2007³â 4¿ù¿¡ ±â´Éµµ ¾à°£ °³¼±Çؼ ȨÆäÀÌÁö¸¦ ¸®´º¾ó Çß½À´Ï´Ù. ±×¸®°í ȸ¿ø´ÔÀÇ ¿äûÀ̳ª ÇÊ¿ä°¡ ¹ß»ýÇÏ¸é °è¼Ó ¹öÁ¯¾÷ ÇÏ°í ÀÖ´Â ÁßÀÔ´Ï´Ù. È£ °¡°èºÎÀÇ ÃÖ´ë ÀåÁ¡Àº ¿ì¼± ¹«·á¶ó´Â °ÍÀÌ°ÚÁÒ...! ±×¸®°í ´Ù¾çÇÏ°í ¹«ÇÑ´ëÀÇ º¸°í¼¸¦ Á¦°øÇÑ´Ù´Â °ÍÀÔ´Ï´Ù. ÇöÀç Á¦°øÇÏ´Â º¸°í¼ ¿Ü¿¡ ´Ù¸¥ º¸°í¼¸¦ ¿øÇÏ½Å´Ù¸é º¸°í¼ ¾ç½Ä¸¸ Á¦ÃâÇØ ÁÖ½Ã¸é º¸°í¼¸¦ Ãß°¡ÇØ µå¸°´Ù´Â °Ì´Ï´Ù. ±×¸®°í Ãß°¡·Î ȸ»ç¿¡¼¸¸ »ç¿ëÇÏ´Â °ÍÀÌÁö¸¸ ¼¼±Ý°è»ê¼, °è»ê¼, ÀÔ±ÝÇ¥ ¾ç½Äµµ ¼ºñ½ºÇÏ°í ÀÖ½À´Ï´Ù. </p> </div> <div id="" class="ho-footer"> <p><b>http://www.hosoft.kr</b></p> </div> </body> </html> TAG : CSS ¹ÝÀÀÇü ·¹À̾ƿô
|
ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ ´ç°¨ 4µ¿ 659-1. ÁÁÀº ¼ÒÇÁÆ®¿þ¾î °³¹ß ¿îµ¿º»ºÎ. ´ëÇ¥ ¾ÈµæÈ£ / sinmungo @ hotmail . com Copyright(c) È£°¡°èºÎ. All Rights Reserved. Since 2003. 04 |