[펌] IFRAME에 대해서...

IT_Programming/HTML&CSS

[펌] IFRAME에 대해서...

JJun ™ 2007. 2. 13. 09:28

LONG

[따라해보는 예제]

① 기본창 ( <iframe src="주소" ></iframe> )

<body bgcolor="cornflowerblue">
<font size="3" face="돋움체">아래는 iframe 예제입니다</font><br>
<iframe src="http://tagmania.net/html/m_iframe2ex.htm" ></iframe>

위에 예제를 태그연습장 에서 실행시켜 보면 귀여운 SES 이미지가 iframe 창으로 뜰겁니다. 이것만 보시면 기본적인 iframe 태그의 기능을 알 수 있을 겁니다. 그런데 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>

위에 예제를 실행시켜 보면 프레임창은 왼쪽으로 정렬되고 그 옆 오른쪽으로 문자열이 정렬되는 것을 볼 수 있습니다. 물론 반대로 align="right"로 하면 정렬이 반대로 되겠죠 ^^; 그러나 top/middle/bottom의 경우는 1행의 문자열만 정렬이 되고 나머지는 프레임창 다음칸으로 넘어가게 되더군요.ㅡ,ㅡ

④ 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>

③번의 예제실행결과와 위의 예제 실행결과를 비교해 보면 금방 알수 있을겁니다. ^^ 위의 예제는 여러분들에게 쉽게 설명하기 위해서 값을 조금 많이 잡은거구요...^^ 실전에서는 약간씩의 값을 잡아서 넣어주면 아주 보기좋은 결과를 얻을 수 있을거에요 ^^

⑤ ifram 응용
이제부턴 약간의 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>

자..위의 예제에서는 스크롤 속성을 auto 로 설정해서 iframe 창 안의 내용이 iframe 창의 범위를 초과했을때 자동적으로 스크롤바가 생기게 했습니다. 그럼 여기서 테이블태그와 링크태그를 이용해서 간단한 메뉴와 내용출력부분을 만들어 보도록 하겠습니다. 테이블태그와 링크태그는 배웠으니간 당근 아시겠죠? ^^

맨처음 스타일시트 부분은 테이블안의 텍스트크기와 글자체를 설정해준겁니다.

그 밑에 body 부분부터 보시면 1열 2행의 테이블을 만들어서 왼쪽에는 iframe 창을 넣었구요...

그리고 왼쪽에는 또 다시 작은 테이블을 넣어서 메뉴를 만들었습니다.

여기서 가장 중요한 것은 iframe 창과 메뉴링크 간의 name 과 target 설정을 제대로 해주어야

메뉴의 링크를 클릭하면 지정된 iframe 창에 내용이 뜬다는 것입니다.

iframe 태그 끝에 보면 name="ses" 라고 넣어주고 각각의 링크태그 부분에 target="ses" 를

넣어주었습니다. 이건 링크태그에서도 배웠듯이 ses 라는 이름(name)이 붙여진 iframe 창에

해당링크의 내용을 표시 해주라는 의미입니다.

ARTICLE

iframe 태그란?

HTML문서의 안에 또 다른 HTML문서를 삽입할 수 있도록 해주는 기능을 하는 태그이며 inline frame의 약자이다. 음...비유하자면 집안의 벽에 창문이 있듯이 홈페이지의 웹문서안에 또 다른 웹문서를 볼 수 있게 창문과 같은 기능을 하는 태그이다.

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만들기

4. 불러올 외부문서없는 IFRAME

5. 페이지 내용에따라 크기 자동늘어나는 IFRAME

============================================================================================

iframe 태그 속성

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

현재글[펌] IFRAME에 대해서...

Today :
Yesterday :

삶의 모든 순간을 즐겨라!