2009/11/24 16:49
웹어플꾼/Programming Stuffs
외국 문서 찾아가면서 한참 삽질했네요. ^^
티스토리 쓰시는 분들에게도 도움이 될 것입니다.
원테이블(1 table) 구조로 웹사이트를 만들다보니 보안에서 뛰어난 부분도 있지만 화면 전체가 메뉴와 함께 이동하기 때문에 눈이 어지럽고 머리가 복잡해지는 경험을 많이 하셨을겁니다.
때문에 프레임 태그를 고집해서 쓰는 분들도 제법 있습니다.
프레임 태그를 쓰면 목차와 같은 메뉴가 화면의 상단이나 왼쪽, 오른쪽에 항상 고정되고 내용만 스크롤되면 글을 읽는 맛도 나고 눈이 덜 어지럽고, 덜 피곤한 것을 느낍니다. 하지만 뭔가 좀 깔끔하지 못하고 2% 부족한 느낌이 들기 마련입니다.
이것을 보충할만한게 무엇인가 찾다보니 DIV 태그에서 position:fixed 속성을 지정하는 것이 있더군요.
IE6 즉, 익스플로러 버전 6을 쓰시는 분들은 이 태그가 적용되지 않습니다.
IE7, IE8, FireFox, Safari 에서는 이 속성이 깔끔하게 적용됩니다.
특히, 티스토리(tistory)로 Frame 태그 쓰는 효과를 기대하시는 분들에게는 도움이 되리라 생각합니다.
가장 중요한 것은 반드시 페이지 상단에 Doctype을 꼭 넣어주세요 !!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- doctype이 있어야 고정됩니다. -->
아래는 제가 테스팅해본 소스코드 입니다.
참고하세요.
<div class="backcolor" style="position: relative; width: 730px; height: 300px; top: 50px;"> <!--This is the containing div position: relative to flow in sequence with the rest of the page-->
티스토리 쓰시는 분들에게도 도움이 될 것입니다.
원테이블(1 table) 구조로 웹사이트를 만들다보니 보안에서 뛰어난 부분도 있지만 화면 전체가 메뉴와 함께 이동하기 때문에 눈이 어지럽고 머리가 복잡해지는 경험을 많이 하셨을겁니다.
때문에 프레임 태그를 고집해서 쓰는 분들도 제법 있습니다.
프레임 태그를 쓰면 목차와 같은 메뉴가 화면의 상단이나 왼쪽, 오른쪽에 항상 고정되고 내용만 스크롤되면 글을 읽는 맛도 나고 눈이 덜 어지럽고, 덜 피곤한 것을 느낍니다. 하지만 뭔가 좀 깔끔하지 못하고 2% 부족한 느낌이 들기 마련입니다.
이것을 보충할만한게 무엇인가 찾다보니 DIV 태그에서 position:fixed 속성을 지정하는 것이 있더군요.
IE6 즉, 익스플로러 버전 6을 쓰시는 분들은 이 태그가 적용되지 않습니다.
IE7, IE8, FireFox, Safari 에서는 이 속성이 깔끔하게 적용됩니다.
특히, 티스토리(tistory)로 Frame 태그 쓰는 효과를 기대하시는 분들에게는 도움이 되리라 생각합니다.
가장 중요한 것은 반드시 페이지 상단에 Doctype을 꼭 넣어주세요 !!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- doctype이 있어야 고정됩니다. -->
아래는 제가 테스팅해본 소스코드 입니다.
참고하세요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- doctype이 있어야 고정됩니다. -->
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- doctype이 있어야 고정됩니다. -->
<style type="text/css">
.background { background:silver; }
.backcolor { background:green; }
#fixedtop11 { position: fixed; top: 0px; left: 0px; width: 220px; height: 40px; }
#fixedtop { position: fixed; top: 15px; left: 0; right: 0; border: none; z-index: 50; }
#center250 { width: 250px; margin: auto; background-color: #f0ffff; }
</style>
.background { background:silver; }
.backcolor { background:green; }
#fixedtop11 { position: fixed; top: 0px; left: 0px; width: 220px; height: 40px; }
#fixedtop { position: fixed; top: 15px; left: 0; right: 0; border: none; z-index: 50; }
#center250 { width: 250px; margin: auto; background-color: #f0ffff; }
</style>
<body>
<div id="fixedtop11" class="backcolor">
position: fixed; top: 80px; left: 30px; width: 220px; height: 40px
</div>
<div id="fixedtop11" class="backcolor">
position: fixed; top: 80px; left: 30px; width: 220px; height: 40px
</div>
<div class="background" style="position: relative; width: 730px; height: 300px; top: 15px; margin: auto;">
<!--This is the containing div position: relative; margin: auto; to centralise-->
<!--This is the containing div position: relative; margin: auto; to centralise-->
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">
put all div content here
</div>
put all div content here
</div>
<div style="position: absolute; top: 10px; left: 5px; width: 240px; height: 150px; background-color: pink;">
put all div content here
</div>
put all div content here
</div>
<div style="position: absolute; top: 25px; left: 505px; width: 210px; height: 125px; background-color: yellow;">
put all div content here
</div>
put all div content here
</div>
</div> <!--end of containing div-->
<div class="backcolor" style="position: relative; width: 730px; height: 300px; top: 50px;"> <!--This is the containing div position: relative to flow in sequence with the rest of the page-->
<div style="position: absolute; top: 30px; left: 255px; width: 240px; background-color: azure;">
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
</div>
<div style="position: absolute; top: 27px; left: 5px; width: 240px; height: 150px; background-color: pink;">
position: absolute; top: 10px; left: 5px; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
</div>
<div style="position: absolute; top: 20px; left: 505px; width: 210px; height: 125px; background-color: yellow;">
position: absolute; top: 25px; left: 505px; width: 210px; height: 125px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
</div>
</div> <!--end of containing div class="background"-->
<div id="fixedtop">
<div id="center250">
Item 5b (1):- Div with position: fixed
</div>
</div>
<div id="center250">
Item 5b (1):- Div with position: fixed
</div>
</div>
</body>
