 |
|
|  |
CSS Àý´ë À§Ä¡¸¦ »ç¿ëÇÑ ÇÁ·¹ÀÓ È¿°ú |
|
|
 |
13³â Àü |
ÇÁ·¹ÀÓ ¼ÂÀ» »ç¿ëÇÏ¸é ¿©·¯ ÆÄÀÏÀ» °ü¸®ÇØ¾ß µÇ°í ¿äÁòÀº ¼¹öÂÊ ¾ð¾î ¾øÀÌ °³¹ß µÇ´Â À¥»çÀÌÆ®µµ °ÅÀÇ ¾ø±â ¶§¹®¿¡ ÇÁ·¹ÀÓ ¼ÂÀ» ÀÌ¿ëÇؼ Á¦À۵Ǵ »çÀÌÆ®´Â °ÅÀÇ ¾ø´Ù. ¶ÇÇÑ ÆäÀÌÁö ºÐÇÒÀÌ ÇÊ¿äÇÒ ¶§¿¡µµ CSS·Î À̸¦ ±¸ÇöÇÒ ¼ö Àֱ⠶§¹®¿¡ ÇÁ·¹ÀÓ ¼ÂÀ» »ç¿ëÇÒ °æ¿ì´Â ·ÎÄà ȯ°æ¿¡¼ »ç¿ëÇÒ °æ¿ì¹Û¿¡ ¾ø´Â °Í °°´Ù.
CSS·Î ÇÁ·¹ÀÓ È¿°ú¸¦ ¸¸µé±â À§Çؼ ÀÌÇØÇØ¾ß ÇÒ ¼Ó¼º °ªÀº autoÀÌ´Ù. ·¹À̾ƿô °¡¿îµ¥ Á¤·Ä¿¡¼µµ ÁÂ¿ì ¿©¹éÀ» auto·Î ÁöÁ¤À» ÇÏ¸é ºê¶ó¿ìÀú°¡ ¾Ë¾Æ¼ ÁÂ¿ì ¿©¹éÀ» ÁöÁ¤ÇÑ´Ù. Àý´ë À§Ä¡¸¦ ÁöÁ¤ÇÑ ¹Ú½º¿¡¼µµ ³ôÀ̳ª ³Êºñ¸¦ auto·Î ÁöÁ¤(±âº»°ª)ÇÏ¸é ¿ÀÇÁ¼Â¿¡ µû¶ó¼ ³ôÀÌ¿Í ³Êºñ°¡ °áÁ¤µÈ´Ù. À̸¦ ÀÌ¿ëÇؼ ȸ鿡 ¹Ú½ºµéÀÌ È¸é Å©±â¿¡ µû¶ó¼ ¹Ù²î°Ô ·¹À̾ƿôÀ» ±¸ÇöÇÒ ¼ö ÀÖ´Ù.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Frameset like layout using absolute position</title>
<style type="text/css">
body {
margin: 0;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: #ccc;
}
article {
position: absolute;
top: 100px;
bottom: 50px;
left: 0;
right: 200px;
overflow: auto;
}
aside {
position: absolute;
top: 100px;
bottom: 50px;
right: 0;
width: 200px;
overflow: auto;
background-color: #eee;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<header>Header</header>
<div id="body">
<article>Article</article>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>HTML5 ¸¶Å©¾÷À» ½è±â ¶§¹®¿¡ IE¿¡¼ ű׵éÀÌ Àνĵǵµ·Ï ¾Æ·¡¿Í °°ÀÌ createElement¸¦ ÀÌ¿ëÇؼ ¿ä¼Ò¸¦ ¸¸µé¾îÁØ´Ù.
<!--[if IE]>
<script type="text/javascript">
document.createElement('header');
document.createElement('aside');
document.createElement('article');
document.createElement('footer');
</script>
<![endif]-->
IE6 ÀÌÇÏ ¹öÀü¿¡¼´Â ÀÌ ±â¹ýÀ» ÀÌ¿ëÇؼ ¹Ú½º Å©±â¸¦ ¼³Á¤ÇÒ ¼ö ¾ø´Ù. IE6¿¡¼ ÆäÀÌÁö¸¦ ¿¾îº¸¸é ǪÅÍ°¡ Áß°£¿¡ °ÉÄ¡´Â °ÍÀ» º¼ ¼ö ÀÖ´Ù. ÄÜÅÙÃ÷¸¦ »ç¿ë ¸øÇÏ°Ô °¡·Á¼´Â ¾ÈµÇ±â ¶§¹®¿¡ Àý´ë À§Ä¡¸¦ Ç®¾î¹ö¸®°í Àüü ½ºÅ©·ÑÀÌ »ý±âµµ·Ï ó¸®Çϸé ÃæºÐÇÏ´Ù.
<!--[if lte IE 6]>
<style type="text/css">
header,
article,
footer {
position: static;
display: block;
}
article {
margin: 0 200px 0 0;
}
footer {
margin: 0 200px 0 0;
}
</style>
<![endif]-->ÀϹÝÀûÀÎ À¥»çÀÌÆ®¿¡¼´Â ¾µ¸ð°¡ ¸¹Áö ¾Ê°ÚÁö¸¸ À§Á¬°°ÀÌ ÀÛÀº ȸé¾È¿¡ µ¶¸³ÀûÀÎ ÀÎÅÍÆäÀ̽º¸¦ ¸¸µé¶§¿¡´Â À¯¿ëÇÏ°Ô »ç¿ëµÉ ¼ö ÀÖ´Ù. ¹°·Ð ±×·¯ÇÑ Æ¯¼öÇÑ È¯°æ¿¡¼´Â ºê¶ó¿ìÀú°¡ Á¤ÇØÁ® Àֱ⠶§¹®¿¡ IE ¿£ÁøÀ» »ç¿ëÇÏÁö ¾Ê´Â ÇÑ IE¸¦ À§ÇÑ Ã³¸®´Â ¾ÈÇصµ µÈ´Ù.
¿¹½Ã ÆäÀÌÁö.
http://hyeonseok.com/soojung/contents/upload/FramesetLikeLayoutUsingAbsolutePosition |
|
̵̧ : 656 |
̵̧
¸ñ·Ï
|
|
|  |
|