태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

<iframe name="iframe1" src="about:blank" width="600" height="0" frameborder="0" onload="this.style.height=this.contentWindow.document.body.scrollHeight;"></iframe>

IE 에서만 테스트

FF 작동 안함


<iframe src="주소" name="이름" width="가로크기" height="세로크기" marginwidth="좌우여백"
marginheight="
상하여백" scrolling="스크롤바여부" frameborder="테두리두께" align="정렬방식"></iframe>





 

iframe 태그 속성

 

1. src

   IFRAME 에 들어갈 파일의 주소(URL)를 입력
   예) src=http://cafe.naver.com/swingme.cafe

 

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 버전 이상부터 지원 )

  
   아이프레임으로 불러올 문서의 배경색을 우선
   bgcolor="transparent" 로 해주세요~
  그리고 아이프레임을 삽입하실때 아래처럼 적어주세요~
  <
iframe src="불러올 문서주소"   allowTransparency="true">

 

 

9. hspace, vspace

   가로,세로 여백을 정함

[출처] 에스티엔 좋은~ - http://stnzone.com/gboard/bbs/board.php?bo_table=gnuboard&wr_id=44



clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWIdth, scrollHeight

1. element.offsetWidth, element.offsetHeight

    1) element.offsetWidth와 element.offsetHeight는 W3C권고안이 아님.

        MSIE's DHTML Object Model

    2) element.offsetWidth : element의 border, 수직/수평 padding, css width를 포함한 폭

        * 즉 화면을 봤을 때 보여지는 엘리먼트의 폭

    3) element.offsetHeight : element의 border, 수직/수평 padding, css height를 포함한 높이

        * 즉 화면을 봤을 때 보여지는 엘리먼트의 높이

[관련URL] offsetWidth : http://developer.mozilla.org/en/docs/DOM:element.offsetWidth

[관련URL] offsetHeight : http://developer.mozilla.org/en/docs/DOM:element.offsetHeight

 

2. element.clientWidth, element.clientHeight

    1) W3C 표준 아님 (MSIE의 DHTML Object Model)

    2) element.clientWidth : element의 border를 뺀 안쪽 폭

        * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 안쪽 폭

    3) element.clientHeight : element의 border를 뺀 안쪽 높이

        * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 안쪽 높이

[관련URL] clientWidth : http://developer.mozilla.org/en/docs/DOM:element.clientWidth

[관련URL] clientHeight : http://developer.mozilla.org/en/docs/DOM:element.clientHeight

 

3. element.scrollWidth, element.scrollHeight

    1) W3C 권고안이 아님

    2) element.scrollWidth : 엘리먼트의 스크롤 폭

    3) element.scrollHeight : 엘리먼트의 스크롤 높이

[관련URL] element.scrollWidth : http://developer.mozilla.org/en/docs/DOM:element.scrollWidth

[관련URL] element.scrollHeight : http://developer.mozilla.org/en/docs/DOM:element.scrollHeight


    * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 안쪽 높이 

 

[관련URL] clientWidth : http://developer.mozilla.org/en/docs/DOM:element.clientWidth

[관련URL] clientHeight : http://developer.mozilla.org/en/docs/DOM:element.clientHeight

신고
Posted by 고시랑

티스토리 툴바