아이프레임iframe 사용법

아이프레임iframe 사용법 (속성)

<iframe src="http://주소" frameborder="0" width="500" height="200" marginwidth="0" marginheight="0" scrolling="auto" style="border:1 solid navy"></iframe>

http://주소는 아이프레임 안에 들어갈 문서의 주소.

: frameborder=0 : 프레임 테두리 두께를 0으로,

  width="500" height="200" 에서는 iframe 창의 가로 x 세로 크기 를 조절.

 

: marginwidth="0" marginheight="0" 은 창 내부의 여백(여기서는 모두 0으로 했음)

 

: scrolling="auto" 는 스크롤바 자동생성..auto 대신 no로 하면 없음, yes로 하면 항상 있음.

 

: style="border:1 solid navy" 는 아이프레임에 테두리를 넣기 위한 부분입니다. 테두리가 필요없는

                      부분은 빼도됩니다. ("border:1 solid navy는 각각 테두리의 두께, 속성, 색상)

[속성]

align : 프레임 창의 정렬 방법을 지정합니다. (top, middle, bottom, left, right)

class : CSS의 class 선택자를 지정합니다.

dir : 글자 방향을 지정합니다. (rtl, ltr)

frameborder : 프레임 테두리를 표시할지 여부를 지정합니다.
1 또는 yes로 지정하면 프레임 테두리가 표시되고,/0 또는 no로 지정하면 프레임 테두리가 표시되지 않습니다.
기본값은 : 1 입니다.

height : 프레임의 높이를 지정합니다.

id : CSS의 ID 선택자를 지정합니다.

logndesc : 프레임으로 표시할 문서에 대해 자세한 설명을 담은 문서의 URI를 지정합니다.

marginheight : 프레임 안쪽의 세로 여백을 지정합니다.(pixels)

marginwidth : 프레임 안쪽의 가로 여백을 지정합니다.(pixels)

name : 인라인 프레임의 이름을 지정합니다.

scrolling : 스크롤이 가능하게 할지 여부를 지정합니다.
기본값인 auto는 필요한 경우에만 스크롤 막대를 표시합니다.
yes는 항상 스크롤 막대를 표시하고, no는 스크롤 막대를 표시하지 않습니다.

src : 프레임으로 표시할 문서의 URI를 지정합니다.

style : CSS 스타일을 지정합니다.

title : 웹 브라우저에서 툴팁으로 표시할 추가 설명을 지정합니다.

width : 프레임의 너비를 지정합니다.

 

--------

 

[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 속성과 섞어 쓰는 게 좋을 듯 합니다.

 

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

 

출처:http://aboooks.tistory.com/205