회원가입∴아이디/비번찾기
홈으로


CSS 절대 위치를 사용한 프레임 효과
15년 전
프레임 셋을 사용하면 여러 파일을 관리해야 되고 요즘은 서버쪽 언어 없이 개발 되는 웹사이트도 거의 없기 때문에 프레임 셋을 이용해서 제작되는 사이트는 거의 없다. 또한 페이지 분할이 필요할 때에도 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
추천추천 : 844 추천 목록
번호 제목
396
Chrome NET::ERR CERT REVOKED 해결방법
395
구글 검색을 200% 활용하게 해주는 검색 명령어 총정리
394
[Jquery] jQuery로 우클릭 방지, 드래그 방지, 선택 방지 (IE10, 파이어폭스, 크롬 확인)
393
php 사용자 접속IP, 브라우저정보, os정보, http, https 접속프로토콜 알아오기
392
[PHP] IE 브라우저 접속 검출하기
391
meta 태그 http-equiv 설정방법과 차이점
390
구글(Google)검색에서 고급연산자를 이용하여 많은 정보를 얻는 방법
389
모바일 스마트폰 특수문자 모음
388
특수문자, 특수문자표, 특수문자 하트, 예쁜 특수문자
387
[안드로이드]파일 연결 - Intent setDataAndType(Uri , MimeType)
386
구글 검색 팁 (구글링, 구글 검색방법)
385
페이스북 동영상과 유튜브 동영상 다운받는 방법
384
쓸만한 jquery 플러그인
383
스타일시트(css)에서 A:link, A:visited, A:active, A:hover 설명
382
META Tag의 종류와 사용방법
381
홈페이지 로봇 설정 방법
380
레이어 상단 무조건고정
379
[jquery] alert박스 말고 레이어 박스를 띄워보세요
378
Internet Explorer 호환성 렌더링 모드로 보기
377
div 레이아웃 잡기!
376
웹표준을 위한 <iframe></iframe>
375
[CSS/웹표준] DOCTYPE 선언
CSS 절대 위치를 사용한 프레임 효과
373
Recommended Doctype Declarations to use in your Web document
372
DTD(Document Type Definition) 란?
371
Flash Action script
370
인터넷익스플로러 세션 중복 사용하기
369
인터넷 익스플로러 명령행 옵션 1
368
xml문서를 플래시로 불러오기
367
타인의 인터넷 사용 막기!
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침ㅣ모바일버전
Copyright ⓒ musictrot All rights reserved.