HTML - 아이프레임(iframe)태그와 그 속성 - 멀티미디어 (3)

HTML - 아이프레임(iframe)태그와 그 속성

멀티미디어 (3)

 오늘은 아이프레임(iframe)태그와 그 속성에 

대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

먼저 HTML에서 아이프레임(iframe)태그란?

아이프레임(iframe)태그는 쉽게 말하면 웹 페이지 안에 다른 웹페이지를

표시하고자 할 떄, 사용이 되는데 흔히 광고 예를들면 쇼핑몰 쪽에서 이 태그를 많이 이용하고

하나의 페이지를 여러 프레임으로 나누어서 각각의 다른 문서를 표시하고자 할때도 사용됩니다. ^^

<아이프레임(iframe)태그 사용법>

위 이미지 아이프레임(iframe) 태그에 속성 400 x 250 크기의 윈도우를 생성하고 

그 윈도우안에 src 경로 지정 속성으로 다른 html 파일을 불러온다는 뜻입니다.

(해당 이미지는 예전에 제가 쓰던 반응형 웹포폴 메인 html 파일을 

상대경로로 지정한 모습입니다. 딱히 상대경로가 아니더라도 절대경로를 써서 지정해도 사이트가 열리겠죠?)

이 다음 아이프레임(iframe)태그의 속성

아이프레임(iframe)태그의 속성에는 

(src, width, height) 가 있으며 이 해당 속성은 이 앞전 포스팅에 여러번 

설명이 되었기 때문에 별도의 설명은 하지않겠습니다.

 그리고 HTML5 에서 새롭게 아이프레임에 추가된 속성 seamless 가 생겼는데 

이 속성은 적용할 시 경계선이 없이 문서의 일부인 것처럼 화면에 그려지게 만들어 준다고 합니다.

해당 사용법은 아래와 같이 제일 뒤 해당 속성을 넣어 주면 끝

<iframe src="./index.html" width="400px" height="250px" seamless></iframe>

본래 아이프레임(iframe)태그의 속성에는

(scrolling, frameborder, marginwidth, marginheight) 등 많은 속성을 지원 하였는데 

현재 HTML5 에서는 이러한 속성을  지원 하지 않게 되었으니 넘어 가도록 하겠습니다.

여기서 부터는 아이프레임을 타켓 프레임으로 사용하는 방법입니다.

무슨 말인가 하면 사용자가 링크 버튼을 누르면 아이프레임 안에 

특정한 웹 페이지를 표시하는 말입니다.

<iframe src="" name="iframe" width="400" height="250"></iframe>

<p><a href="./index.html" target="iframe">포트폴리오</a></p>

<p>위 포트폴리오 링크 클릭시 아이프레임 안에서 포트폴리오 페이지가 열립니다.</p>

위 해당 html을 작성후 실행을 하게 되면 아래와 같은 화면이 실행 됩니다.

<링크 클릭전>

<링크 클릭후>

(다시 한번 말하지만 해당 이미지는 예전에 제가 쓰던 반응형 웹포폴 메인 html 파일을 

상대경로로 지정한 모습입니다. 딱히 상대경로가 아니더라도 절대경로를 써서 지정해도 사이트가 열리겠죠?)

여기까지 HTML - 아이프레임(iframe)태그와 그 속성에 대해서 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보고 실행해 보는것이 이해하기 쉽습니다.

이상 HTML - 아이프레임(iframe)태그와 그 속성 - 멀티미디어 (3)에 

관련된 포스팅을 마치도록 하겠습니다.