1)
이번에 시도한 부분은 marquee 안에 style="position:absolute;" 를 사용하는 것입니다.
물론, 상대적인 위치를 표시한다고 선언하기 위해,
상위 <div 태그나, 상위 <marquee 태그 내에 position:relative 를 넣었습니다.
...
<marquee width=50 height=20 behavior=alternate scrollamount=2>
<div style="width:150px; height:20px; overflow:hidden; position:relative; background-color:#ffdddd">
<div style="position:absolute; left:0px; top:0px;">1</div>
<div style="position:absolute; left:100px; top:10px;">2</div>
</div>
</marquee>
<marquee width=50 height=20 behavior=alternate scrollamount=2 style="position:relative; background-color:#ddddff">
<div style="position:absolute; left:0px; top:0px;">1</div>
<div style="position:absolute; left:100px; top:10px;">2</div>
</marquee>
...
...
-- 새 창에서 보기 --
이 화면 내에서 보는 모습과, 새 창에서 보는 모습,
브라우져별로 보는 모습이 다 다르네요.
2)
에디터(IE8 사용)에서 보면
- 빨간 부분 크기가 150 이라 그런지, 파란색을 중심으로 삼등분 되어있습니다.
..
3)
IE8, Chrome, Safari 로 블로그를 보면
- 파란쪽 부분 스크롤이 살짝 되는 듯 싶기는 한데.. 파란쪽 타이밍이 조금 더 짧네요.
FireFox 로 블로그를 보면
- 파란쪽 스크롤이 전혀 안되고 있네요. absolute 라서 공간 크기를 허용하지 않는 분위기랄까요.. 글자 2 가 marquee 화면 밖으로 삐져나와있습니다.
Opera 로 블로그에서 보면
- marquee 가 위아래로 나뉘어져있네요. (다른 브라우져는 좌우로 나뉘어져 있음.) marquee 밖으로 문자가 나가지는 않았고, 스크롤도 되지 않습니다.
..
4)
IE8 로 새 창에서 보면
- 파란쪽과 빨간쪽 스크롤 타이밍은 비슷해보이는데, 파란쪽 스크롤 되는 거리가 짧아보입니다.
Chome, Safari 로 새 창에서 보면
- 블로그에서 보는 모습과 크게 다르지 않네요. 파란쪽 타이밍이 조금 더 짧습니다.
FireFox 로 새 창에서 보면..
- 읔.. document.close() 적용을 안해서 그런가요.. marquee 작동이 아얘 안되네요. (블로그 스킨 수정완료)
- 블로그에서 보는 모습과 같네요. 파란쪽 스크롤이 전혀 안되고, 글자 2가 marquee 화면 밖으로 삐져나와있습니다.
Opera 로 새 창에서 보면..
- 블로그에서 보는 모습과 같네요. marquee 가 위아래로 나뉘어져 있고, 스크롤도 안되고, 삐져나오지도 않았습니다.
...
5)
아마도.. 블로그 자체내에 가지고 있는 CSS default 값이나,
marquee 처리기준 때문인 것 같다는 생각은 해봅니다.
.. 거기에, position:absolute 에 관한 기준을 나타낼 수도 있겠구요.
6)
물론, 이런 방법의 test 는,
"빨간색쪽 방법이 표준화된 표시 방법이다"를 알리기 위한 것이긴 합니다만..
가끔씩은, 이런 트릭도 쓰고싶을 때가 있으까요.
easyBow killofki@.
이번에 시도한 부분은 marquee 안에 style="position:absolute;" 를 사용하는 것입니다.
물론, 상대적인 위치를 표시한다고 선언하기 위해,
상위 <div 태그나, 상위 <marquee 태그 내에 position:relative 를 넣었습니다.
...
<marquee width=50 height=20 behavior=alternate scrollamount=2>
<div style="width:150px; height:20px; overflow:hidden; position:relative; background-color:#ffdddd">
<div style="position:absolute; left:0px; top:0px;">1</div>
<div style="position:absolute; left:100px; top:10px;">2</div>
</div>
</marquee>
<marquee width=50 height=20 behavior=alternate scrollamount=2 style="position:relative; background-color:#ddddff">
<div style="position:absolute; left:0px; top:0px;">1</div>
<div style="position:absolute; left:100px; top:10px;">2</div>
</marquee>
...
...
-- 새 창에서 보기 --
이 화면 내에서 보는 모습과, 새 창에서 보는 모습,
브라우져별로 보는 모습이 다 다르네요.
2)
에디터(IE8 사용)에서 보면
- 빨간 부분 크기가 150 이라 그런지, 파란색을 중심으로 삼등분 되어있습니다.
..
3)
IE8, Chrome, Safari 로 블로그를 보면
- 파란쪽 부분 스크롤이 살짝 되는 듯 싶기는 한데.. 파란쪽 타이밍이 조금 더 짧네요.
FireFox 로 블로그를 보면
- 파란쪽 스크롤이 전혀 안되고 있네요. absolute 라서 공간 크기를 허용하지 않는 분위기랄까요.. 글자 2 가 marquee 화면 밖으로 삐져나와있습니다.
Opera 로 블로그에서 보면
- marquee 가 위아래로 나뉘어져있네요. (다른 브라우져는 좌우로 나뉘어져 있음.) marquee 밖으로 문자가 나가지는 않았고, 스크롤도 되지 않습니다.
..
4)
IE8 로 새 창에서 보면
- 파란쪽과 빨간쪽 스크롤 타이밍은 비슷해보이는데, 파란쪽 스크롤 되는 거리가 짧아보입니다.
Chome, Safari 로 새 창에서 보면
- 블로그에서 보는 모습과 크게 다르지 않네요. 파란쪽 타이밍이 조금 더 짧습니다.
FireFox 로 새 창에서 보면..
- 읔.. document.close() 적용을 안해서 그런가요.. marquee 작동이 아얘 안되네요. (블로그 스킨 수정완료)
- 블로그에서 보는 모습과 같네요. 파란쪽 스크롤이 전혀 안되고, 글자 2가 marquee 화면 밖으로 삐져나와있습니다.
Opera 로 새 창에서 보면..
- 블로그에서 보는 모습과 같네요. marquee 가 위아래로 나뉘어져 있고, 스크롤도 안되고, 삐져나오지도 않았습니다.
...
5)
아마도.. 블로그 자체내에 가지고 있는 CSS default 값이나,
marquee 처리기준 때문인 것 같다는 생각은 해봅니다.
.. 거기에, position:absolute 에 관한 기준을 나타낼 수도 있겠구요.
6)
물론, 이런 방법의 test 는,
"빨간색쪽 방법이 표준화된 표시 방법이다"를 알리기 위한 것이긴 합니다만..
가끔씩은, 이런 트릭도 쓰고싶을 때가 있으까요.
easyBow killofki@.
'image area' 카테고리의 다른 글
clip] style="clip:rect(); position:absolute;" 를 이용했을 때.. (0) | 2012.03.30 |
---|---|
scroll Position] 스크롤 최대값이 좀 크네요.. (0) | 2012.03.30 |
IE8:overflowHidden] DIV 내에서의 drawing 정책..? (0) | 2012.02.24 |
position:relative] 원위치를 찾아서... (0) | 2011.03.19 |
scroll] 따라오려는(?) 사진... (0) | 2011.02.18 |