본문으로 바로가기

HTML iframe 에 대해

category 웹/웹.html.스크립트 2008. 2. 29. 16:07
간혹 IFRAME쓸일이 있어서 알고있는것 정리해봅니다~

1. IFRAME기본속성
<iframe src="불러올 html파일명" scrolling="yes" marginwidth="0" marginheight="0"    frameborder="0" vspace="0" hspace="0" height="높이" width="넓이"></iframe>

WIDTH

픽셀

ifram e의 폭을 지정합니다

HEIGHT

픽셀

iframe의 높이를 지정합니다.

FRAMEBORDER

yes, no

iframe의 경계선을 나타나게 할 것인지를 결정합니다.
yes로 하면 프레임 경계가 나타나고 no로 하면
프레임 경계가 나타나지 않습니다.

SCROLLING

yes, no, auto

yes : 스크롤 바가 항상 나타납니다 .
no : 내용이 잘리더라도 스크롤 바가 나타나지 않습니다.
auto : iframe의 크기보다 불러온 문서의 내용이 많으면
자동으로 나타납니다.

SRC

file name

iframe에서 불러올 문서의 경로와 문서의 이름을 지정합니다.

MARGINWIDTH

픽셀

좌우 여백을 지정합니다. (iframe 안의 여백임.)

MARGINHEIGHT

픽셀

상하 여백을 지정합니다. (iframe 안의 여백임.)

NAME

이름

iframe의 이름을 지정합니다. name을
이용하면 iframe을 포함하고 있는 문서에서 하이퍼링크를
클릭하면 iframe에 내용이 나타나도록 target을
지정할 수 있습니다.

HSPACE

숫자

좌우 여백을 지정합니다. (iframe 밖의 여백임.)

VSPACE

숫자

상하 여백을 지정합니다. (iframe 밖의 여백임.)



2. 세로 scroll 안보이게하기 (가로스크롤도 가능하겠죠?^-^)
iframe이 들어갈 페이지 <head></head>사이에
<style>
body{
        background-color: transparent;
        overflow-y: hidden;
        overflow-x: scroll;
        }
</style>

3. 배경투명한 IFRAME만들기
<iframe src="불러올 html파일명" allowtransparency="true" style="; top: 10; left: 10; z-index: 3">

*위 IFRAME에서 불러올 html웹문서의 BODY태그에  <body style="background-color: transparent"> 삽입!

* 브라우저 상의 절대적인 위치 지정시 (정확한위치)
   position: positive  브라우저 상의 상대적인 위치 지정시

4. 불러올 외부문서없는 IFRAME
<iframe name="불러올 html파일명" frameborder="1" width="넓이" height="높이" src="about:<body bgcolor=silver> 여기에 작성하세요</body>"></iframe>

5. 페이지 내용에따라 크기 자동늘어나는 IFRAME
<script>
function doResize()
{
container.height = myframe.document.body.scrollHeight+10;
container.width = myframe.document.body.scrollWidth;
}
</script>

<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
     <td id="container">
       <iframe name="myframe" src="bbs/zboard.php?id=flasource" width=100% height=100% frameborder=0 scrolling=no onload="doResize()"></iframe>
    </tr>
</table>
찾아헤매였던 소스~ 캬캬캬 드뎌 찾았당 (>ㅂ<)b