[html/css] iframe 태그 사용법

 

 

[html/css] iframe 태그(웹 페이지에 다른 웹 사이트 넣기)

 

 

iframe 요소는 html 웹 문서 안에 또 다른 웹 문서를 넣을 수도 있고, 뮤비 등 동영상도 넣을 수 있습니다.

 

iframe 은 inline frame이라고도 부르는데요, 원래는 ie에서만 작동했지만,

 

html 4.01부터 iframe을 포함하여, 현재 모든 브라우저에서 <iframe> 태그를 지원합니다.

 

<iframe>태그는 인라인 요소이고요.

 

주의할 점은 DOCTYPE 에서   Transitional, Frameset 선언에서는 iframe이 정상 적동하지만

Strict 문서에서는 작동하지 않습니다.(doctype에 관해서는 아래 링크 참조)

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

 

 

 

▶ 사용 예:

 

<iframe src="URL">대체 내용</iframe>  

 

iframe 태그를 지원하지 않은 브라우저를 위해 '대체 내용'을 넣어주는 것이 좋습니다.

 

 

▶함께 사용할 수 있는 속성

 

src    iframe에 삽입될 문서의 주소

 

width   iframe의 너비 지정 (px, % 가능)

 

height   높이 지정(px, % 가능)

 

frameborder   테두리를 표시할지 말지를 지정

                  1(테두리가 있음) 0(테두리 지우기)

 

scrolling  스크롤바 유무를 선택

yes(스크롤바 표시), no(스크롤바 없앰), auto (자동)

longdesc  iframe에 담길 내용을 설명하는  페이지.

marginheight  내용의 top(위) bottom(아래) margin.

marginwidth   내용의 left(좌) right(우) margin.
 
align    iframe을  정렬 

 

 top( 맨 위에 정렬) middle(중앙 정렬) bottom(아래에 정렬) left(왼쪽 정렬) right(오른쪽 정렬)

  

name  taget이 필요한 프레임의 이름 (id와 같음)

 

*iframe은 링크(a)의 target frame으로 사용될 수 있는데

링크의 target 속성은 iframe의 name 속성을 언급해야 합니다.

xhtml에서는 name은 퇴화 태그이므로  id 속성을 사용.

( 브라우저 호환성을 위해 name 과 id 속성을 같이 쓰기도 함)

 

 

▶ 사용 예(iframe으로 티스토리에 다른 웹 사이트 넣기)

 

<iframe width="600" height="300" src="http://www.daum.net" name="test" id="test" frameborder="1" scrolling="yes" align="left">이 브라우저는 iframe을 지원하지 않습니다</iframe>
<p><a href="http://www.tistory.com" target="test">티스토리 바로가기</a></p>

 

 

 

▶ 실행화면

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

티스토리 바로가기

 

 

위에서 '티스토리 바로가기'를 클릭화면 프레임 안에서 화면이 바뀝니다.

 

 

▶ 사용 예 2(iframe으로 유트브 삽입 예)

 

<p align="middle">

<iframe width="560" height="315" src="http://www.youtube.com/embed/jNAK7QL5JjI"  frameborder="0">이 브라우저는 iframe을 지원하지 않습니다</iframe></p>
  

 

 

▶ 실행 화면

 

*중앙 정렬할 때는 상위 요소에 블록 요소를 만들어 지정해야 정렬 되네요.

예: <p align="middle"><iframe...> </iframe></p> 

 

 

▶ html5에서 지원하지 않는 속성

align, frameborder, scrolling, longdesc, marginheight, marginwidth,

 

 

위의 속성들을 css로 지정하려면 다음 처럼 해야 합니다.

 

align 대신 text-align 속성이나 float 속성

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

[css 기초] float 속성에 대하여

 

 

frameborder 대신 border 속성

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

scrolling 대신 overflow 또는 overflow-y 속성

 

oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)

 

*overflow-y 속성에 관한 글은 나중에 자세히 다루어 볼게요.

 

marginheight, marginwidth 대신 margin 속성

 

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

 

 

 

iframe에서 스크롤을 만들려면 overflow: scroll 이라 하고

 

iframe 스크롤바 없애기는 , overflow-y: hidden (ie8 이전 버전에서 작동하지 않음.)

 

 

iframe  선 없애기는 frameborder="0"을 썼는데

 

css에서는 border:0px 혹은 border:none을 씁니다. (단, ie. opera에서 작동하지 않음)

 

 

그래서 현재는 일부 브라우저에서 지원되지 않는 속성들은 html 속성과 섞어 쓰는 게 좋을 듯 합니다.

 

다음 시간엔 오픈캐스트를 티스토리에 넣는 방법도 알아볼게요