※ 형식
| <iframe src="주소" frameborder="테두리표시여부" bordercolor="테두리색" marginwidth="가로여백" marginheight="세로여백" width="가로길이" height="세로길이" align="정렬방식"></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">위의 예제에서는 스크롤 속성을 auto 로 설정했다. 그러면 iframe 창 안의 내용이 iframe 창의 범위를 초과했을때자동적으로 스크롤바가 생기게 된다. 여기서 테이블태그와 링크태그를 이용해서 간단한 메뉴와 내용출력부분을 만들어 보자.
<font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br>
<iframe src="불러올 주소" width="422" height="400" scrolling="auto" align="left"></iframe>
<style>이미지에 target 설정도 적용하였다. iframe 창과 메뉴링크 간의 name 과 target 설정을 제대로 해주어야 메뉴의 링크를 클릭하면 지정된 iframe 창에 내용이 뜬다. iframe 설정에 name 속성을 image 로 해주고, 이미지 링크 코드에는 같은 image 라는 이름으로 target 설정을 해 준 것이다. 이것은 image 라는 이름이 붙여진 iframe 창에 해당 링크의 내용을 표시해주라는 명령이다.
<!--
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>
Nice bllog post
ReplyDelete