iframe

1. IFRAME기본속성

<iframesrc="불러올 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
<iframename="불러올 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 omload="doResize()"></iframe>
    </tr>
</table>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s