[따라해보는 예제]
| <body bgcolor="cornflowerblue"> <font size="3" face="돋움체">아래는 iframe 예제입니다</font><br> <iframe src="http://tagmania.net/html/m_iframe2ex.htm" ></iframe> |
② 크기조절과 스크롤바
( <iframe src="주소" width="가로수치" height="세로수치" scrolling="no"></iframe> )
| <body bgcolor="cornflowerblue"> <div align="center"> <font size="3" face="돋움체">아래는 iframe 예제입니다</font><br> <iframe src="http://tagmania.net/html/m_iframe2ex.htm" width="404" height="400" scrolling="no"></iframe> </div> |
③ iframe창의 정렬 ( <iframe src="주소" align="top/left/right/middle/bottom"> )
| <body bgcolor="cornflowerblue"> <font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br> <iframe src="http://tagmania.net/html/m_iframe2ex.htm" width="404" height="400" scrolling="no" align="left"></iframe> <font size="3" face="돋움체">새벽이네요... 한두번 맞는 새벽이<br>아니지만..그동안의 새벽과는 다른 <br> 특별한 느낌이 드는 새벽입니다. <br>갑자기 옛날 생각난단....^^; <p>소스 중에서 align="위치" 에 따라 프레임창과<br> 그다음에 오는 내용간의 정렬위치가<br> 바뀌어 집니다. </font> |
④ iframe 창의 간격조정( <iframe src="주소" hspace="가로간격" vspace="세로간격"> )
음..이미지태그에서도 같은 속성을 배웠죠? ^^ 이미지 대신 여기선 iframe 창의 가로세로 간격조절을
| <body bgcolor="cornflowerblue"> <font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br> <iframe src="http://tagmania.net/html/m_iframe2ex.htm" width="404" height="400" scrolling="no" align="left" hspace="30" vspace="10"></iframe> <font size="3" face="돋움체">새벽이네요... 한두번 맞는 새벽이<br>아니지만..그동안의 새벽과는 다른 <br> 특별한 느낌이 드는 새벽입니다. <br>갑자기 옛날 생각난단....^^; <p>hspace="iframe 창의 가로간격조정"<br>vspace="iframe 창의 세로간격조정"<br><br> 현재값<br>hspace="30"<br>vspace="10" </font> |
이제부턴 약간의 iframe 을 이용해서 홈페이지에서 멋찌게 사용할 수 있는 방법을 알려드리도록
| <body bgcolor="cornflowerblue"> <font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br> <iframe src="http://tagmania.net/html/m_iframe2ex2.htm" width="422" height="400" scrolling="auto" align="left"></iframe> |
| <style> <!-- td { font-size:10pt; font-family:돋움체;} --> </style> <body bgcolor="cornflowerblue"> <div align="center"> <font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br><br> <table border="0" width="500" cellpadding="0" cellspacing="0"> <tr> <td width="423"> <iframe src="http://tagmania.net/html/m_iframe2ex2.htm" width="423" height="400" scrolling="auto" align="left" name="ses"></iframe> </td> <td align="center"> <table border="1" cellpadding="0" cellspacing="0" bordercolorlight="black" bordercolordark="white" width="77" height="100%" align="center"> <tr><td align="center"><a href="../img/ses1.gif" target="ses">사진1</a></td></tr> <tr><td align="center"><a href="../img/ses2.gif" target="ses">사진2</a></td></tr> <tr><td align="center"><a href="../img/ses3.gif" target="ses">사진3</a></td></tr> <tr><td align="center"><a href="../img/ses4.gif" target="ses">사진4</a></td></tr> <tr><td align="center"><a href="../img/ses5.gif" target="ses">사진5</a></td></tr> <tr><td align="center"><a href="../img/ses6.gif" target="ses">사진6</a></td></tr> </table> </td> </table><br> 예제 ses 이미지는 교육목적을 위해 http://www.smtown.com 에서 발췌했습니다. </div> |
|
WIDTH |
픽셀 |
ifram e의 폭을 지정합니다 |
|
HEIGHT |
픽셀 |
iframe의 높이를 지정합니다. |
|
FRAMEBORDER |
yes, no |
iframe의 경계선을 나타나게 할 것인지를 결정합니다. |
|
SCROLLING |
yes, no, auto |
yes : 스크롤 바가 항상 나타납니다 . 않습니다. 많으면 자동으로 나타납니다. |
|
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>
*위 IFRAME에서 불러올 html웹문서의 BODY태그에 <body style="background-color: transparent"> 삽입!
* position: absolute 브라우저 상의 절대적인 위치 지정시 (정확한위치)
position: positive 브라우저 상의 상대적인 위치 지정시
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>
1. src
IFRAME 에 들어갈 파일의 주소(URL)를 입력
예) src=http://www.spectra.co.kr
2. width, height
IFRAME 창의 가로, 세로의 길이를 결정하는 요소
숫자를 입력해야 하며, 단위는 픽셀(Pixel)
예) width="500", height="600"
3. align
IFRAME 을 페이지안에 추가할때 좌,우,중앙 정렬을 어떻게 할것이지 결정
화면왼쪽은 left, 오른쪽은 rignt, 중앙은 center
예) align="left"
4. frameborder
웹 페이지안에 iframe 을 추가할때 iframe 의 테두리선을 보이게 할것인지 아닌지를 결정
보이게 할려면 1 또는 yes, 안보이게 할려면 0 또는 no
예) frameborder="0"
5. scrolling
IFRAME 내부에 상하스크롤을 나타나게 할 것인지 아닌지를 결정
'Yes' 라고 하면 페이지 내용의 많고 적음에 상관없이 스크롤이 생기고,
'No' 라고 하면 무조건 스크롤이 생기지 않음
'Auto' 로 설정하면 내용에 따라 자동으로 스크롤의 생성 여부를 결정
6. name
IFRAME 도 FRAME 이기 때문에 FRAME 에서 사용하는 NAME 속성이 존재한다.
그래서 만약 IFRAME 의 NAME 을 "swingme" 이라고 설정한 후,
다른 프레임의 하이퍼링크에서 TARGET="swingme" 와 같이 설정한다면
이 링크를 눌렀을 때 IFRAME 안에 있는 페이지가 링크를 따라 이동하게 된다.
7. marginwidth, marginheight
이 기능은 IFRAME 내부 페이지의 간격(여백)을 설정
즉, IFRAME 의 테두리와 내부 페이지 내용 사이에 어느 정도의 간격을 둘 것인가를 설정
숫자가 클 수록 테두리와 내용 사이의 거리는 멀어지게 되고, 숫자가 작을 수록 내용이
테두리와 가까워짐
예) marginwidth="10", marginheight="5"
8. allowtransparency
iframe 은 다른 페이지의 내부에 입력되므로 해당 페이지의 디자인 또는 색상에 영향을 받는다.
즉, swingme.html 페이지의 배경색상이 파랑 이라면 iframe 의 배경색도 파랑색으로 된다.
예를 들자면 하나의 iframe 을 a.html 과 b.html 에 삽입할때
a.html 은 배경색이 파랑, b.html 은 배경색이 빨강일 경우 어떻게 될까?
이럴때 유용하게 사용하는 속성이 바로 allowtransparency 속성이다.
이 속성은 현재 iframe 페이지의 배경색을 투명하게 만들어주는 속성으로
a.html 에 넣으면 파랑으로 b.html 에 넣으면 빨강으로 보여지게 된다.
( 참고로 이 속성은 Internet Explorer 5.5 버전 이상부터 지원 )
9. hspace, vspace
가로,세로 여백을 정함
============================================================================================
'IT_Programming > HTML&CSS' 카테고리의 다른 글
| [CSS] 링크 색상 (0) | 2008.07.27 |
|---|---|
| DIV 태그 속성 (0) | 2007.11.06 |
| 프레임(Frame) 나누기 (0) | 2006.05.25 |
| Frame 태그 사용하기 (0) | 2006.04.24 |
| 테이블 만들기 (0) | 2006.04.24 |