[HTML#7] 아이프레임 <iframe> 태그 !

 안녕하세요, 민둥산의 민둥이입니다. 이번에 알려드릴 태그는 iframe이라는 태그인데 좀 신기한 태그입니다. 개인적으로 실전에서 자주 사용하지는 않지만 재미있는 태그라고 생각하는데요, 그럼 시작하겠습니다!

 

iframe 이란?

 iframe이란 inline frame의 약자로 현재 브라우저 내에서 다른 프레임을 (즉, 다른 HTML문서를) 가져올 수 있게 해주는 기능입니다. 예를 들자면 제 블로그 글 내에서 Naver의 메인 페이지를 중간에 삽입할 수 있는 것인데요, 흥미로운 점은 iframe을 통해서 다른 웹브라우저에서 사용되는 개인정보를 가져올 수 있는 위험이 있기에 현재 대형 사이트(google, naver, 카카오 등)에서는 iframe 태그로 가져올 수 없게 해 놓았다고 하네요(조금 아쉽..).

 

 하지만, iframe에서는 html 웹 브라우저뿐만이 아니라 이미지, 동영상 도 넣을 수 있기에 사용도가 아예 없다고 할 수는 없습니다.

 iframe 태그 기본 문법

<iframe src="**" width="n" height="n"> </iframe>

<iframe> 태그도 일단 기본적으로 <img> 태그와 같이 경로를 정해주는데요, 기본적으로 iframe 생성 시 네모 칸의 박스가 생깁니다. 단순히 모양만 보면 <img> 태그 또는 <video> 태그와 비슷하게 생겼는데요, 여기서 몇 가지 다른 점이 있습니다.

iframe과 img 태그의 차이점

1. <img> 태그와 다르게 <iframe></iframe> 태그 사이에는 텍스트나 경로 등을 넣지 않습니다. 태그를 열고 아무것도 내용을 넣지 않고 닫아야 합니다.
2. width와 height 속성이 기본적으로 <img> 태그에서는 사진의 크기에 따라 하나만 설정하면 다른 것도 자동으로 따라서 설정되지만, <iframe> 태그에서는 하나만 설정하면 가로길이 혹은 세로 길이만 달라지기에 둘 다 설정해주어야 합니다. ※참고로 가로 세로 길이를 조정한다고 iframe 안에 들어가는 html이나 이미지의 크기가 달라지는 것이 아니라 iframe의 박스 크기만 달라집니다.

팁(TIP)

iframe에서의 흥미로운 점은 <a> 태그의 target으로 <iframe> 태그를 설정할 수 있는다는 점입니다. <a> 태그의 target 속성은 기본적으로 target="_self"와 target="_blank"가 있었는데요, target의 사용용도는 "어느 위치에서 링크를 열 것인가?"였습니다. 이 링크를 iframe으로 만든 박스 내에서도 열 수가 있습니다. 

<iframe name = "open"></iframe>
<a href="열고 싶은 링크" target="open"> iframe 내에서 열립니다</a>

 여기서 중요한 점은 iframe의 name 속성과 target의 경로를 똑같이 써주는 것입니다. 

 

HTML과 설명의 경계!

============================================================================

---

iframe으로 페이지 내에 다른 내용 넣기

<iframe src="**" width="n" height="n"> </iframe>
src속성으로 안에 보여질 내용의 경로를 지정하고
width/height속성으로 iframe의 가로/세로 크기를 지정.

---

- iframe안에 보여줄 수 있는 종류(링크와 일치) -

1. 절대 경로(URL)로 iframe안에 보여주기

2. 상대 경로로 *.html/*.htm (웹페이지) iframe안에 보여주기

3. 상대 경로로 *.jpg/*.gif/*.png/...(이미지 파일) iframe안에 보여주기

4. 상대 경로로 *.mp4/*.webm/*.ogg/...(동영상 파일) iframe안에 보여주기

5. 상대 경로로 *.txt (텍스트 파일) iframe안에 보여주기

---

- iframe안에 링크 열어 주기 -

<iframe name="abc"> ---- 서로 일치
<a href="*" target="abc"> --- 시킴

test01.html test02.html test03.html test04.html test05.html test06.html test07.html