iframe 이 무엇인지 모르는 분을 없을 것이고, 만약 모른다면 이 포스팅을 읽을 필요도 없을 것이다. iframe은 'inline frame'의 약자로서, HTML 문서 안에서 또 다른 HTML 문서를 삽입할 수 있도록 해준다.

※ 형식
<iframe src="주소" frameborder="테두리표시여부" bordercolor="테두리색" marginwidth="가로여백" marginheight="세로여백" width="가로길이" height="세로길이" align="정렬방식"></iframe>

 기본적인 형식은 <iframe src="주소"></iframe> 이다. 그런데 위와 같이 여러가지 속성을 이용하여 구체적인 설정을 할 수 있다.

※속성
속  성 기  능
 src ="주소"  iframe 창에 나타내고자 하는 창의 주소(경로)를 넣는다 
 name  iframe 창도 target 설정을 할 수 있다. name을 지정한다.
 frameborder="yes/no or 1/0"
 bordercolor="테두리색상"
 테두리 존재여부(존재:yes/1 부존재:no/0)와 테두리의 색상을
 정한다. (frameborder 는 테두리 두께 조절이 아님)
 align  말그대로 정렬방식이다. 프레임내의 내용에 대한 정렬방식이 아닌 프레임과 그 다음에 이어져 나오는 텍스트나 이미지등과의 정렬 방식
 height/width  프레임의 가로와 세로 길이를 정해준다.
 hspace/vspace  가로세로 여백을 정한다.
 marginwidht/marginheight  프레임 내의 문서와 프레임 테두리간의 여백을 조절한다.
 scrolling="auto/yes/no"  프레임에 스크롤바가 생기게 할 것인가를 정해준다.

이러한 속성을 이용하여 실제 코딩일 해보면,



① 기본창

앞서 설명한대로 다음이 iframe 의 기본 형식이다.
<iframe src="불러올 주소" ></iframe>
이를 이용해서 기본 상태의 iframe 을 구현해보자.
<body bgcolor="cornflowerblue">
<font size="3" face="돋움체">아래는 iframe 예제입니다</font><br>
<iframe src="불러올 주소" ></iframe>
일간 위와 같이 기본코드를 작성하고 상태를 확인해보자.



② 크기조절과 스크롤바

다음 코드을 이용하여 iframe 창의 크기와 스크롤 바를 제어해보자.

<iframe src="주소" width="가로수치"  height="세로수치" scrolling="no"></iframe>

기본 코드에 width, height, scrolling 가 추가되었음을 볼 수 있다. 이것을 다음과 같이 적용하자.
<body bgcolor="cornflowerblue">
<div align="center">
<font size="3" face="돋움체">아래는 iframe 예제입니다</font><br>
<iframe src="불러올 주소" width="404" height="400" scrolling="no"></iframe>
</div>
그리고 확인해보면 사이즈와 스크롤바가 제어된 것을 볼 수 있다.



③ iframe창의 정렬

이제 정렬방식을 제어해 보자.
<iframe src="주소" align="top/left/right/middle/bottom">
위 코드와 같이 align 에 원하는 값을 넣어주면 된다. 적용하면 다음과 같다.
<body bgcolor="cornflowerblue">
<font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br>
<iframe src="불러올 주소" width="404" height="400" scrolling="no" align="left"></iframe>
<fontsize="3" face="돋움체">동해물과 백두산이<br>마르고 닳도록<br>하느님이 보우하사 <br>우리나라 만세
</font>


④ iframe 창의 간격조정
<iframe src="주소" hspace="가로간격" vspace="세로간격">
위의 태그를 추가하여 간격을 조정해보자.
<body bgcolor="cornflowerblue">
<font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br>
<iframe src="불러올 주소" width="404" height="400" scrolling="no" align="left" hspace="30" vspace="10"></iframe>
<fontsize="3" face="돋움체">동해물과 백두산이<br>마르고 닳도록<br>하느님이 보우하사 <br>우리나라 만세
</font>
결과를 확인하여 차이를 보면 쉽게 이해가 갈 것이다.



⑤ iframe 응용

사이트에서 사용할 수 있는 응용방법에 대해 좀 더 알아보자.
<body bgcolor="cornflowerblue">
 <font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br>
 <iframe src="불러올 주소" width="422" height="400" scrolling="auto" align="left"></iframe>
위의 예제에서는 스크롤 속성을 auto 로 설정했다. 그러면 iframe 창 안의 내용이 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="불러올 주소" width="423" height="400" scrolling="auto" align="left"name="test"></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="../image1.gif" target="test">사진1</a></td></tr>
  <tr><td align="center"><a href="../image2.gif" target="test">사진2</a></td></tr>
  <tr><td align="center"><a href="../image3.gif" target="test">사진3</a></td></tr>
  <tr><td align="center"><a href="../image4.gif" target="test">사진4</a></td></tr>
  <tr><td align="center"><a href="../image5.gif" target="test">사진5</a></td></tr>
  <tr><td align="center"><a href="../image6.gif" target="test">사진6</a></td></tr>
</table>
</td>
</table><br>
</div>
이미지에 target 설정도 적용하였다. iframe 창과 메뉴링크 간의 name 과 target 설정을 제대로 해주어야 메뉴의 링크를 클릭하면 지정된 iframe 창에 내용이 뜬다. iframe 설정에 name 속성을 image 로 해주고, 이미지 링크 코드에는 같은 image 라는 이름으로 target 설정을 해 준 것이다. 이것은 image 라는 이름이 붙여진 iframe 창에 해당 링크의 내용을 표시해주라는 명령이다.

Post A Comment:

0 comments: