본문 바로가기
연구_고민/웹

아이프레임

by DevG 2007. 7. 28.

http://www.oneway.pe.kr/gobyBoard/view.asp?forum_id=tipB&no=9034

 

♬아이프레임
아이프레임은 한 문서 안에 다른 문서를 호출해 삽입하는 역할을 합니다.


① <body>와 </body>사이의 아이프레임을 삽입하고 싶은 위치에 아래 소스를 넣습니다
<iframe src="아이프레임 안에 들어갈 문서의 주소" frameborder="0" width="360" height="250" marginwidth="0" marginheight="0" scrolling="auto" style="border:1 solid navy"></iframe>

frameborder="0" 은 창의 테두리 두께를 0으로,
width="360" height="250" 에서는 iframe 창의 크기를 조절.
marginwidth="0" marginheight="0" 은 창 내부의 여백(여기서는 모두 0으로 했음)
scrolling="auto" 는 스크롤바 자동생성..auto 대신 no로 하면 없음, yes로 하면 항상 있음.
style="border:1 solid navy" 는 아이프레임에 테두리를 넣기 위한 부분입니다.

테두리가 필요없는 분은 빼도 됩니다. (1 solid navy는 각각 테두리의 두께, 속성, 색상)



② 투명한 아이프레임



배경그림이 들어간 문서 안에 아이프레임을 넣는다면, 배경그림이 아이프레임에 의해 가려질 때가 있습니다. 이런 경우, 아이프레임이 들어간 영역을 투명으로 처리하게 되면 가려졌던 배경그림이 나타납니다.
아이프레임을 넣은 본문서 안의 아이프레임 태그에 allowTransparency="true" 를 추가하고, 아이프레임 안에 들어가는 문서를 투명으로 만들어주면 됩니다.
*투명한 아이프레임 (Opacity=35)
아이프레임에 의해 가려져 있던 본문서의 배경그림이 보입니다.
Opacity 값은 0에서 100까지 지정해줄 수 있습니다. 0은 완전투명, 100은 완전불투명

아이프레임으로 들어가는 문서의 <head>와 </head> 사이에 아래 소스를 넣습니다.

<style type="text/css">
<!--
body {background-color:transparent; filter: Alpha(Opacity=35)}
-->
</style>



기본문서의 아이프레임 태그 안에 아래처럼 allowTransparency="true" 를 추가합니다.

<iframe src="기본이 되는 문서의 주소" allowTransparency="true"></iframe>

이 글은 스프링노트에서 작성되었습니다.