소스를 가져가는 것은 자유이고 소스 설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 이라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다.. ^^
아이프래임(IFRAME : Insert Frame) 태그는 <iframe> ~ </iframe> 로 사용을 합니다..
이 태그는 여는 태그가 있고 반드시 닫아주는 태그를 <iframe>태그 바로 뒤에 써줘야 합니다..
IFRAME 태그는 HTML 문서 사이에 프래임(frame:화면)을 Insert(삽입)한다는 태그입니다..
◆ 태그 형식
IFRAME 태그의 기본적인 형식은 다음과 같습니다.. 추가로 필요한 옵션들은 생략하고 기본적인 것만 보여줄께요..
위의 IFRAME 태그는 제가 많이 사용하는 옵션들을 IFRAME 태그에 추가로 쓴 것으로 그냥 간단하게
이 정도만을 사용해도 IFRAME 태그는 지정된 크기에 src=""에서 연결한 주소의 내용을 보여줍니다..
하지만 이 정도만을 사용하게 되면 IFRAME 화면과 IFRAME 태그를 사용한 문서와의 테두리가 구분이 되거나 좌우 정렬 이런 것들이 되질 않습니다..
그러니 저처럼 위에서 지정한 추가 옵션을 써줘야 좀더 보기가 좋습니다..
◆ 태그 설명
src="연결할주소"
: IFRAME으로 불러올 HTML이나 게시판, 메모장 등의 주소를 지정합니다..
width="가로크기" height="세로크기"
: IFRAME으로 보여줄 화면의 크기를 지정하는 것으로 그냥 숫자만을 입력하면 픽셀(px) 단위로 지정이 되는 것이고 100%처럼 숫자와 %를 같이 써주면 현재 IFRAME을 나타낼 수 있는 최대 크기를 100%로 해서 화면의 크기를 조절하여 나타내줍니다.. 화면이 1024x768의 화면이라 하더라도 IFRAME을 width=400 height=300의 테이블 안에서 사용을 했다면 IFRAME의 최대크기(=100%)는 width=400 height=300으로 지정이 되는 것입니다..
IFRAME의 가로/세로 크기는 불러온 주소의 화면이 잘려보이지 않는 크기에서 지정을 해주면 됩니다..
scrolling="auto/yes/no"
: scrolling은 IFRAME 화면의 크기가 안의 내용보다 작을 때 스크롤바가 생기는 것을 어떻게 설정한 것인가 결정하는 것입니다.. auto, yes, no 중의 하나를 입력하는 것으로, auto는 평소에는 스크롤바가 없다가 스크롤바가 생겨야 할 때만 스크롤바가 나타나는 것, yes는 무조건 스크롤바가 나타나 있을 것, no는 스크롤바가 생겨야 할 때에도 스크롤바가 나타나지 않을 것을 의미합니다.. 저는 메모장 같은 경우에 평소에는 안나타나고 내용이 길어져서 메모장의 크기가 iframe의 크기보다 커진 경우에만 나타나도록 scrolling="auto"를 사용하고 있답니다..
frameborder=0
: 프래임(FRAME) 태그를 사용해 본 들은 알겠지만 그냥 프래임만 나누면 프래임 구분선인 테두리가 생깁니다.. IFRAME도 프래임 태그의 한 종류이기 때문에 테두리가 생기는데 테두리는 거의 활용가치가 없습니다.. frameborder=0으로 지정하면 테두리가 안나타나며 숫자가 커지면 프레임이 나타나고 테두리의 두께도 굵어집니다..
align="left/center/right"
: IFRAME 내용이 화면의 중앙에 나타나게 하고 싶다면 ALIGN="" 옵션에서 center를 지정해 줍니다.. align="left"는 왼쪽 정렬, align="right"는 오른쪽 정렬입니다..
iframe 태그는 iframe으로 불러온 화면이 나타나길 원하는 위치에 써 주면 됩니다..
iframe 태그는 주로 공지사항, 게시판, 메모장 등을 화면에 나타내줄 때 사용하지만 꼭 이 경우에만 사용하지 않습니다.. 호빵-스노우 BGM 플레이어처럼 BGM 플레이어를 불러올 때 사용하기도 하고 다른 간단한 문서를 현재 문서 안에서 불러와 보여주고 싶을 때는 언제든 사용할 수 있습니다..
제 홈페이지를 iframe으로 불러오는 iframe 태그를 아래에 예를 들어서 보여줄께여..
(Homepage)님의 글입니다.
