dz¼±µµ¿ò¸»...

¤ýÈ£°¡°èºÎ¸¦ ½ÃÀÛÆäÀÌÁö·Î

ÀºÇà Ä«µå Áõ±Ç º¸Çè ºÎµ¿»ê

     
My Áñ°Üã±â ¼öÁ¤
[¹«·á]  ¿À´ÃÀÇ ¿î¼¼  /  ¹ÙÀÌ¿À¸®µë
¿©±â´Â ȸ¿ø´ÔÀÌ Á÷Á¢ µî·ÏÇϽÅ
Áñ°Üã´Â »çÀÌÆ®°¡ Ãâ·ÂµË´Ï´Ù.
ÄÄÇ»ÅÍ¿Í °ü·ÃÀÖ´Â ¸ðµç ÆÁÀ» °øÀ¯ÇսôÙ.

CSS ¹ÝÀÀÇü ·¹À̾ƿô ¸¸µé±â

È£°¡°èºÎ|2018-07-25 14:38:13|Á¶È¸ : 55954
<!DOCTYPE>
<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  ¹ÝÀÀÇü  ·¹À̾ƿô 


¹øÈ£ Á¦             ¸ñ ÷ºÎ ÀÛ ¼º ÀÏ ÀÛ¼ºÀÚ Á¶È¸
88  

CSS ¹ÝÀÀÇü ·¹À̾ƿô ¸¸µé±â

2018-07-25 È£°¡°èºÎ 55954
45  

¾Æ´Ï...¿Ö ±×·±Áö¿ä

(1)
  2008-04-14 ÀÓÁ¤¹Î 5094
41  

Internet Explorer 7 (IE7) ÀÚµ¿¾÷µ¥ÀÌÆ® 11¿ù 6ÀÏ ºÎÅÍ ½ÃÀÛ

  2007-10-06 °ü¸®ÀÚ 8293
18  

ÀͽºÇ÷η¯ ÁÖ¼Òâ¿¡ °Ë»ö ±â´É ³Ö±â, ÁÖ¼Ò º°¸í±â´É

2006-05-23 °ü¸®ÀÚ 4106
14  

ÀÎÅÍ³Ý ¿¬°áÅë ¹× È¸¼±»óÅ ¾Ë¾Æº¸±â(tracert)

  2006-05-05 °ü¸®ÀÚ 2596
óÀ½À¸·Î ¾ÕÀ¸·Î | [1] | ´ÙÀ½ ¸¶Áö¸·