[HTML5] 8. 인라인 프레임 <iframe> + 브라우저 윈도우와 인라인 프레임의 계층 관계

8. 인라인 프레임 <iframe> + 브라우저 윈도우와 인라인 프레임의 계층 관계

 

 

 

# <iframe> 태그와 인라인 프레임

- HTML 페이지 안에 또 다른 HTML 페이지를 삽입

 

ex) 200x150 크기의 인라인 프레임에 iframe.html 출력

<iframe src="iframe1.html" width="200" height="150">

                 브라우저는 iframe 태그를 지원하지 않습니다.

</iframe>

 

 

- src : 출력할 웹 페이지의 URL  주소

- srcdoc : 직접 HTML 태그로 작성된 텍스트로서 출력될 내용. srcdoc 속성이 있다면, src 속성은 무시된다.

- name : 프레임 윈도우의 이름. 다른 웹 페이지에서 target 속성 값으로 사용됨

- width : 프레임의 폭, 픽셀 값으로 디폴트 값은 300이다.

- height : 프레임의 높이이자 픽셀 값으로, 디폴트 값은 150이다.

 

 

 

 

# 2개의 인라인 프레임을 가진 웹 페이지

1st frame

 

2nd frame

 

final frame = 1st + 2nd frame

 

 

 

 

 

 

# <iframe> 태그를 사용하여 2개의 신문 사이트 내장하기

 

 

 

 

# 브라우저 윈도우와 인라인 프레임의 계층 관계

- 인라인 프레임 윈도우의 이름

<iframe src="iframe1.html" name="left"></iframe>

 

+ 프레임 윈도우명은 아무 값이나 쓰지 말고 의미 있는 값이나 타인도 알아볼 수 있는 값으로 쓰도록 한다.

 

 

- 브라우저 윈도우와 인라인 프레임의 계층 관계

: 브라우저 윈도우와 프레임 윈도우는 부모 자식 관계

 

- 윈도우 사이의 계층 관계 (상대적인 관계임에 유의)

a. parent 윈도우 = 부모 윈도우

b. child 윈도우 = 자식 윈도우

c. top 윈도우 = 최상위 브라우저 윈도우

 

right frame

left frame

 

final frame code

 

final frame

 

 

 

 

  -> 위 예시에서의 계층 관계

 

 

 

 

 

 

 

 

 

 

 

# target 속성으로 출력할 윈도우 지정

- target 속성

: <base>, <a>, <area>, <form> 태그에서 HTML 페이지를 출력할 윈도우 지정

 

- target 속성에 사용 가능한 값

a. _blank : 새로운 브라우저 윈도우(탭) 생성

b. _self : 현재 윈도우

c. _parent : 부모 윈도우

d. _top : 최상위 브라우저 윈도우

e. 윈도우 이름: 대상 윈도우 이름