프레임 셋을 사용하면 여러 파일을 관리해야 되고 요즘은 서버쪽 언어 없이 개발 되는 웹사이트도 거의 없기 때문에 프레임 셋을 이용해서 제작되는 사이트는 거의 없다. 또한 페이지 분할이 필요할 때에도 CSS로 이를 구현할 수 있기 때문에 프레임 셋을 사용할 경우는 로컬 환경에서 사용할 경우밖에 없는 것 같다.
CSS로 프레임 효과를 만들기 위해서 이해해야 할 속성 값은 auto이다. 레이아웃 가운데 정렬에서도 좌우 여백을 auto로 지정을 하면 브라우저가 알아서 좌우 여백을 지정한다. 절대 위치를 지정한 박스에서도 높이나 너비를 auto로 지정(기본값)하면 오프셋에 따라서 높이와 너비가 결정된다. 이를 이용해서 화면에 박스들이 화면 크기에 따라서 바뀌게 레이아웃을 구현할 수 있다.
<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를 위한 처리는 안해도 된다.
추천 : 