<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>11</title>
<style type="text/css">
* {margin:0; padding:0;}
*html body {height:100%}
*html {overflow:hidden;}
*html #wrapBody {height:100%;overflow:auto;overflow-x:hidden;position:relative; width:99.9%;z-index:1;}
*html #layAccount {left:0; bottom:0; width:100%; height:27px; z-index:4; position:absolute; overflow-y:hidden; min-width:990px; margin-bottom:-1px;}
#layAccount {left:0; bottom:0; width:100%; height:27px; z-index:5;position:fixed; overflow-y:hidden; min-width:990px;}
</style>
</head>
<body>
<div id="layAccount"> 111 </div>
<div id="wrapBody"> <p style="height:1900px;background:#eee;"></p> </div>
</body>
</html>
[출처] [펌] IE6에서도 CSS Position: fixed 먹히게 및 하단고정 레이어|작성자 뽀대만땅
===========================================================================================================================
===========================================================================================================================
ie6의 골치거리인 Fixed 속성 해결 방법입니다.
나라디자인 에서 참조하여 해결되지 않았던 버그(?)들을 수정해 보았습니다.
첫번째: fixed layer가 가로 100%일때 ie6에서 스크롤바를 덥는 문제
해결방법: 의외로 간단히 해결 되었습니다. onresize시 fixed layer의 width값을 감싸고 있는(스크롤이 있는) div의 clientWidth값으로 치환
두번째: 가로 스크롤 시 레이어는 고정되었던 부분 (전 브라우저 공통)
해결방법: ie6에선 감싸고 있는(스크롤이 있는) div의 scrollLeft 값을 구해서 fixed layer의 marginLeft 값을 빼줌.
marginLeft값을 빼준만큼 Width 값 더해줌
나머지 브라우저에선 pageXOffset을 이용 스크롤 된값을 구하고 ie6과 마찮가지로 계산
===========================================================================================================================
===========================================================================================================================
http://phpleader.net/bbs/view.php?&bbs_id=php_07&page=5&doc_num=322
CSS를 이용해 Flash를 배경화면에 고정시키기
다운로드 #1  |
Flash를 화면에 고정하기_jidolstar.zip ( 42 KB ), Down: 27 |
|
var img1_width = 0; var img2_width = 0; var img1_exist = false; var img2_exist = false; function set_img_init() { if(img1_exist) setInterval(set_img1, 100); if(img2_exist) setInterval(set_img2, 100); if(old_onload) old_onload(); } function set_img(name,omy_width,view_width) { var img = eval((navigator.appName == 'Netscape') ? nsdoc+'.'+name : 'document.all.'+name); if (img) { if(omy_width>view_width) { img.width=view_width; } else if(omy_width < view_width) { img.width=omy_width; } } } if(onload) var old_onload=onload; onload=set_img_init;
Flash를 배경화면에 고정시키기 위해 가장 먼저 생각하는 방법은 Javascript를 이용하는 방법일 것입니다. 하지만 Javascript는 화면 스크롤할때 마다 지속적으로 함수를 호출하여 사용자의 시스템에 부하를 줄 뿐만 아니라 코드해야할 양도 길어집니다. 그러나 CSS를 이용하면 이러한 문제를 해결할 수 있습니다.
1. 이미지를 화면에 고정시키기
Flash를 배경화면에 고정시키는 방법을 언급함에 앞서 배경화면을 이미지로 고정시키는 방법에 대해 잠깐 설명하겠습니다.
가장 쉬운 방법은 아래와 같이 HTML의 body 태그의 bgproperties 속성을 이용하는 방법입니다.
<body background="배경이미지주소" bgproperties="fixed">
만약 배경화면을 원하는 위치에 고정시키기 위해서는 다음과 같이 CSS를 이용합니다.
배경을 가운데에 고정시키기
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경주소);
background-repeat: no-repeat; background-position: center bottom}
</style>
배경을 오른쪽에 고정시키기
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경주소);
background-repeat: no-repeat; background-position: right bottom}
</style>
배경을 왼쪽에 고정시키키기
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경주소);
background-repeat: no-repeat; background-position: left bottom}
</style>
배경을 왼쪽 위에 고정시키고 x축 방향으로 패턴 주기
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경주소);
background-repeat: repeat-x; background-position: left top}
</style>
또는
<style>
body {
background: #FFFFFF url(배경주소) repeat-x left top fixed;
}
</style>
하지만 Flash를 화면에 고정시키는 것은 이러한 방법으로 할 수 없습니다.
<style>
body {
background: #FFFFFF url(플래시주소) no-repeat left top fixed;
}
</style> 이런 방식으로 할 수 있다면 얼마나 좋을까요? 당연히 안됩니다. ㅋ
그럼 Flash를 배경화면에 고정시키는 방법에 대해서 본격적으로 설명하겠습니다.
2. 테스트해 보기아래 파일은 다음에 설명할 내용이 모두 적용된 예제를 압축한 파일입니다.
먼저 아래 파일을 다운받아보시고 Firefox(이하 FF), 익스플로러6(이하 IE6), 익스플로러7(이하 IE7)에서 테스트 해보시기 바랍니다. 만약 사파리와 같은 다른 브라우저가 있다면 테스트 해주시면 감사하겠습니다.
위 파일은 http://blog.jidolstar.com/web_example/28/ 으로 연결해도 테스트 하실 수 있습니다.
참고로 언급해야할 점은 IE6의 CSS 규격이 IE7과 FF가 많이 다르다는 겁니다. 마이크로소프트사(이하 MS)에서 IE6를 만들때 HTML, CSS를 표준에 맞추지 않고 만들었기 때문에 UI디자인이나 설계하시는 분들을 무척 힘들게 합니다. 저는 먼저 CSS규격을 어느정도 맞춘 IE7과 FF에서 동작할 수 있게 구현하고 IE6에서도 적용될 수 있게 수정하는 방법 설명하는 방식으로 진행하고자 합니다.
3. IE7과 FF에서 플래시를 배경화면에 고정시키기
위 화면은 IE6에서 실행해본 화면입니다. 스크롤을 해보면 플래시와 내용이 같이 올라가는 것을 볼 수 있습니다. 게다가 플래시 아래로 글이 내려갔습니다.
하지만 이제 똑같은 주소(http://blog.jidolstar.com/web_example/2 ··· dex.html)를 FF나 IE7에서 열어보면 아래와 같이 정상적인 화면을 보여줍니다. 스크롤해도 플래시는 잘 고정되어 있습니다.
소스를 봅시다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>지돌스타 블로그 :: 플래시를 배경화면으로 고정시키기(IE6적용 안됨)</title>
<script type="text/javascript" src="FlashObject.js"></script>
<style type="text/css">
body {
margin:0px;
padding:0px;
background: #000000 url(img.jpg) no-repeat left top fixed;
}
#flash_background{
position:fixed;
top: 0px;
left: 0px;
z-index:0;
}
#post{
position:absolute;
z-index:1;
margin:100px 100px 100px 100px;
padding:10px 10px 10px 10px;
background-color:#fcfcfc;
width:600px;
border:#fe2334 solid 2px;
}
</style>
</head>
<body>
<div id="flash_background">
<script type="text/javascript">FlashObject("bg.swf", "1100", "500", "#000000", "transparent");</script>
</div>
<div>
<div id="post">
<h2>Flash를 배경으로 고정시키기</h2>
<h4>테스트 완료 브라우져 : FF, IE6, IE7</h4>
<h4>만든이 : 지돌스타 (<a href="http://blog.jidolstar.com" target="_black">http://blog.jidolstar.com</a>)</h4>
<h2>요한복음 1장</h2>
....(생략)
</div>
</div>
</body>
</html>
위 코드에는 중요한 2개의 div 태그(이하 Layer라 불러요.)가 있습니다. 플래시를 올릴 Layer(flash_background)와 글 포스트가 올라갈 Layer(post)입니다. 플래시 Layer안에는 FlashObject 자바스크립트 함수를 호출하여 간접적으로 화면에 출력합니다. 직접 Embed나 Object 태크를 쓰지 않고 Javascript를 이용하여 플래시를 출력하는 이유는 일단 브라우져 특성을 타지않게 할 수 있고 버전관리가 가능해지기 때문입니다.
<style>를 보면 body, #flash_background, #post 속성이 있습니다. body는 말그대로 Body 태그에 적용되는 것이고 나머지 flash_background, post 레이어에 적용되는 겁니다. body의 배경색은 검은색(#000000), 배경이미지는 img.jpg(나비모양)으로 하고 이 배경이미지를 좌측상단에 고정(fixed)시키고 이미지를 반복하지 않고 붙힙니다.(no-repeat) 이 부분은 IE7, FF에서는 필요없는 부분이긴 하지만 IE6에서 꼭 필요한 부분이다. 이에 대해서는 IE6에 적용할 때 다시 설명할께요.
Layer의 기본 위치 설정은 CSS에서 position 속성을 이용하면 됩니다. position 속성의 값의 종류는 4가지가 있습니다.
position 속성
- static : Default 값으로 HTML문서의 문단에서 처럼 일반적인 내용물의 흐름을 말한다. 상단(top)과 좌측(left)에서의 거리를 지정할 수 없다.
- absolute : 자신의 상위 레이어속에서의 top, left, right, bottom 등의 절대적인 위치, 즉, 변하지 않는 위치를 지정할 수 있다.
- relative : HTML 문서에서의 일반적인 내용물들의 흐름을 말하지만 상단(top)과 좌측(left)에서의 거리를 지정할 수 있습니다.
- fixed : 고정시킨다는 뜻인데, scroll이 일어나도 항상 지면상의 지정된 위치에 있습니다. 하지만 IE6에서는 적용되지 않으며 IE7과 FF등에서는 적용됩니다. 이 속성값은 표준이지만 IE6에서 지켜지지 않은 겁니다.
플래시가 들어가는 Layer는 position:fixed로 해서 스크롤해도 움직이지 않도록 했습니다.
포스트가 들어가는 Post Layer는 position:absolute 로 지정했습니다.
이렇게만 하면 스크롤을 해도 플래시를 배경화면에 고정되는 반면 Post은 스크롤 됩니다.
하지만 플래시 Layer가 Post Layer 뒤에 있어야 하므로 플래시 Layer는 z-index: 0, Post Layer는 z-index: 1로 했습니다. z-index가 크면 클수록 다른 z-index값이 상대적으로 작은 Layer에 위로 올라오게 됩니다.
한가지 더 설정해야할 것은 플래시의 wmode 속성입니다. 플래시를 추가할때 FlashObject()함수를 호출하게 되는데 제일 뒤에 인자중 "transparent"이 있습니다. 잠깐 FlashObject() 함수가 있는 Javascript 코드를 살펴봐요.
function FlashObject(swf, width, height, bgcolor, wmode, flashvars)
{
var strFlashTag = new String();
if (navigator.appName.indexOf("Microsoft") != -1)
{
strFlashTag += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ';
strFlashTag += 'codebase="http://download.macromedia.com/pub/shoc ··· %2C0%2C0" ';
strFlashTag += 'width="' + width + '" height="' + height + '">';
strFlashTag += '<param name="movie" value="' + swf + '"/>';
if(flashvars != null) {strFlashTag += '<param name="flashvars" value="' + flashvars + '"/>'};
strFlashTag += '<param name="quality" value="best"/>';
strFlashTag += '<param name="bgcolor" value="' + bgcolor + '"/>';
strFlashTag += '<param name="menu" value="false"/>';
strFlashTag += '<param name="salign" value="LT"/>';
strFlashTag += '<param name="scale" value="noscale"/>';
strFlashTag += '<param name="wmode" value="'+wmode+'"/>';
strFlashTag += '<param name="allowScriptAccess" value="always"/>';
strFlashTag += '</object>';
}
else
{
strFlashTag += '<embed src="' + swf + '" ';
strFlashTag += 'quality="best" ';
strFlashTag += 'bgcolor="' + bgcolor + '" ';
strFlashTag += 'width="' + width + '" ';
strFlashTag += 'height="' + height + '" ';
strFlashTag += 'menu="false" ';
strFlashTag += 'scale="noscale" ';
strFlashTag += 'salign="LT" ';
strFlashTag += 'wmode="'+wmode+'" ';
strFlashTag += 'allowScriptAccess="always" ';
if(flashvars != null) {strFlashTag += 'flashvars="' + flashvars + '" '};
strFlashTag += 'type="application/x-shockwave-flash" ';
strFlashTag += 'pluginspage="http://www.macromedia.com/go/getflashplayer">';
strFlashTag += '</embed>';
}
document.write(strFlashTag);
}
위 코드를 보면 wmode 속성에 어떤 속성값을 지정하게 되는데 잠깐 wmode에 지정되는 속성을 살펴보면 다음과 같습니다.
wmode 속성값
- window : 기본값으로 모든 HTML 엘리먼트 위로 flash가 나타난다.
- opaque : flash 위에 HTML 엘리먼트를 위치할때 쓴다. 불투명이다.
- transparent : opaque와 같지만 플래시가 투명으로 처리된다. 플래시 아래에 있는 HTML 엘리먼트가 투명으로 보인다. 하지만 opaque 속성값으로 지정할때보다 CPU 점유율이 크다.
우리의 목적은 Flash 위에 HTML 문서(Post Layer)를 올리는 것이므로 wmode 속성값을 opaque나 transparent를 써야합니다. 다음 두 화면은 각각 opaque를 쓸때와 transparent를 쓸때의 차이점을 보여주고 있습니다.
wmode:opaque 속성을 썼을때, 뒤에 backgroud로 넣은 나비 이미지가 안보인다.
wmode:transparent 속성을 썼을때, 뒤에 backgroud로 넣은 나비 이미지가 보인다.
이로써 IE6를 제외한 IE7과 FF에서 플래시를 배경화면에 고정하는 방법을 살펴보았습니다.
이미 한 것 처럼 IE6에서 위의 코드로는 적용이 되지 않습니다. 그래서 몇가지 hack을 쓸 필요가 있는데요. 지금부터 설명하겠습니다.
4. IE6에서도 플래시를 배경화면에 고정시키기
플래시를 배경화면에 고정시키기 위해 가장 큰 문제는 IE6에는 position:fixed 속성값을 지원하지 않는겁니다. IE6에서 플래시를 배경화면으로 고정하기 위해서 아래와 같이 CSS에 #flash_background를 추가합니다.
* html #flash_background{
position:absolute;
top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px");
}
여기에서 보면 * html를 쓰고 그 다음에 #flash_background을 쓴 다음 position을 absolute로 하고 top 속성이 자바스크립트로 표현한 것을 볼 수 있습니다. 여기서 * html은 일종에 hack과 같다. IE6일때는 * html이 먹혀들어간다는 것이다. 반대로 다른 브라우저에서는 * html이 무시됩니다. 이전에 #flash_background에서 지정한 CSS를 적용하면서 이 부분이 추가로 적용되는 것입니다. 이전에 position을 fixed로 했지만 바로 뒤에 absolute를 다시 적용하므로 absolute가 됩니다. 그러나 position:absolute만 한다면 첫화면에서 위에서 정의된 대로 화면우측 10픽셀, 상단 5픽셀의 위치로 올라가지만 스크롤하면 없어집니다. 이 문제를 해결하기 위해 그 아래 top 속성에 자바스크립트 코드가 들어갔습니다. 여기서 expression()은 CSS에 자바스크립트를 사용할 수 있도록 하는 일종의 함수이다. IE5.0 때부터 사용할 수 있던 기능인데요, 표준은 아니지만 우리가 필요로 하는 것을 구현할 수 있는 방법입니다. 어짜피 * html로 IE6에만 먹이는 것이므로 사용할 수 있습니다. 여기서 document.compactMode부분이 보이는데 이 내용은 http://www.koxo.com/lang/js/property/compatMode.html 를 참고하기 바랍니다. 저도 무슨말인지 잘모르고 관심을 두고 싶지 않네요. 어쨌든 이 방법을 사용해서 IE6.0에서도 플래시를 배경화면으로 고정시켜 올리는데 문제가 없습니다.
IE6에서 또 하나 중요하게 적용해야할 점은 바로 아래 코드 부분입니다.
body {
margin:0px;
padding:0px;
background: #000000 url(img.jpg) no-repeat left top fixed;
}
만약 background 부분 대신 background: #00000; 만 하고 IE6에서 실행하고 스크롤을 해보면 다음 링크처럼 동작합니다.
IE6에서 실행해 보시고 스크롤 해보세요 : http://blog.jidolstar.com/web_example/28/index2.html
플래시 배경화면이 떨리는 것을 볼 수 있나요? 다시 원래 코드로 복구 시킨뒤 하면 떨리는 문제가 해결됩니다.
플래시를 fixed하는 문제가 body의 background속성에 fixed속성값을 적용하는 것과 전혀 관계없는 것 같지만 IE6에서는 관련있어 보입니다. 어쨌든 결론은 body의 background 속성에 한개의 이미지를 fixed해야합니다. 뒤에 이미지를 원하지 않는다면 가장 작은 1픽셀 이미지(blank.gif - 제가 올린 첨부파일에 있습니다.)를 올려 fixed 시키면 되는겁니다. 가령 이렇게요~
body {
margin:0px;
padding:0px;
background: #000000 url(blank.gif) no-repeat left top fixed;
}
5. 정리하며....
지금까지 플래시를 배경화면으로 고정시키는 방법을 설명했습니다.
요즘 웹은 IE든 FF든지 어느 브라우져를 사용해도 똑같은 화면을 보일 수 있도록 하는 것이 중요합니다. 이러한 정의를 한마디로 말해 크로스 브라우징(cross browsing)이라고 합니다. 사실 크로스 브라우징의 의미는 더 큽니다. 웹이라는 환경은 일반 데스크톱에서 사용되는 웹브라우저 뿐만 아니라 모바일, 임베디드 기기, 홈네트워크용 장비등에도 적용되고 일반인, 장애인, 노약자, 어린이등의 다양한 이용자에게도 적용됩니다. 크로스 브라우징이라는 것인 이러한 모든 환경에서 똑같이 보일 수 있도록 하는 것입니다. 이는 접근성 향상과 기술적 공통성을 이어나가게 하고 장애인과 노약자와 같은 사람들에게 배려해나가는 것이기도 합니다.
우리나라는 아직도 ActiveX를 남발하여 IE 말고는 전혀 보이지도 않는 사이트들이 많습니다. ActiveX는 MS에서 만든 것이고 웹표준도 아닙니다. 물론 편의성을 제공했긴 했지만 그 때문에 악영향도 상당합니다. 그래도 요즘 MS도 IE7와 .net 기반을 통해 웹표준을 준수할려고 노력하는 모습은 보기 좋습니다. 그러나 아직도 이러한 문제를 인식못하고 IE6에만 최적화된 서비스를 하는 몇몇 포털업체들을 보면서 우리나라가 앞으로 IT강국의 명성을 제대로 연장시켜 나갈 수 있을까 걱정되기도 하네요. |
Fixed_layer.html
Flash를 화면에 고정하기_jidolstar.zip