홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
CSS 절대 위치를 사용한 프레임 효과
10년 전
프레임 셋을 사용하면 여러 파일을 관리해야 되고 요즘은 서버쪽 언어 없이 개발 되는 웹사이트도 거의 없기 때문에 프레임 셋을 이용해서 제작되는 사이트는 거의 없다. 또한 페이지 분할이 필요할 때에도 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
추천추천 : 495 추천 목록
번호 제목
1,338
 윈도우 로그, 관리 이벤트 삭제
1,337
 클린 부팅
1,336
 Windows 구성 요소 저장소에서 파일 손상 검사
1,335
 Windows Defender 검사 기록 삭제하기
1,334
 간단한 윈도우 10 정품 인증 (크랙프로그램 필요없음)
1,333
 오류난 폴더 강제삭제 방법
1,332
 크롬에서 플래시 항상 허용하도록 설정하기 (레지스트리) reg 파일 만들기
1,331
 GPT 디스크를 MBR 디스크로 변환
1,330
 MBR 디스크를 GPT 디스크로 변환
1,329
 구글 검색을 200% 활용하게 해주는 검색 명령어 총정리
1,328
 [Jquery] jQuery로 우클릭 방지, 드래그 방지, 선택 방지 (IE10, 파이어폭스, 크롬 확인)
1,327
 php 사용자 접속IP, 브라우저정보, os정보, http, https 접속프로토콜 알아오기
1,326
 [PHP] IE 브라우저 접속 검출하기
1,325
 윈도우10 시스템 예약 파티션 확인 및 삭제
1,324
 윈도우10 복구 파티션 삭제 방법
1,323
 윈도우10 부팅지연 검은화면에서 몇분간 머무는 현상 해결방법
1,322
 삼성노트북 바이오스 진입이 불가능한 경우 바이오스 재설치와 NVRAM 초기화
1,321
 익스플로러(IE)의 구글 검색공급자 한글로 변경 방법
1,320
 윈도우 10 기본 앱 삭제 및 복구
1,319
 meta 태그 http-equiv 설정방법과 차이점
1,318
 구글(Google)검색에서 고급연산자를 이용하여 많은 정보를 얻는 방법
1,317
 프로그램 없이 하드디스크 복사 및 백업하기
1,316
 Windows7 업데이트 기록 삭제방법
1,315
 포토샵 psd 파일 연결 레지스트리(registry) 편집
1,314
 윈도 10 최신 업데이트 후 인터넷 속도의 저하가 발생할 때 조치 사항
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.