호빵홈 소스자료실
현재위치 : hobbang.co.kr > 소스자료실
소스자료실은 홈페이지를 만들거나 꾸밀 수 있는 자바스크립트와 HTML 소스를 제공합니다.
또한 컴퓨터와 인터넷을 사용하면서 유용한 Tip도 제공하니 각 Category를 선택하세요.

Category

  (Homepage)님의 글입니다.
문서 안에서 다른 문서를 불러오는 IFRAME 태그 2003-05-24 16:44:42, 조회 : 2,732, 추천 : 9

소스를 가져가는 것은 자유이고 소스 설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 이라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다.. ^^


아이프래임(IFRAME : Insert Frame) 태그는 <iframe> ~ </iframe> 로 사용을 합니다..
이 태그는 여는 태그가 있고 반드시 닫아주는 태그를 <iframe>태그 바로 뒤에 써줘야 합니다..
IFRAME 태그는 HTML 문서 사이에 프래임(frame:화면)을 Insert(삽입)한다는 태그입니다..


◆ 태그 형식

IFRAME 태그의 기본적인 형식은 다음과 같습니다.. 추가로 필요한 옵션들은 생략하고 기본적인 것만 보여줄께요..
<iframe src="연결할주소" width="가로크기" height="세로크기" scrolling="auto/yes/no" frameborder=0 align="left/center/right"></iframe>


위의 IFRAME 태그는 제가 많이 사용하는 옵션들을 IFRAME 태그에 추가로 쓴 것으로 그냥 간단하게
<iframe src="연결할주소" width="가로크기" height="세로크기"></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 태그를 아래에 예를 들어서 보여줄께여..

아래 예제는 IFRAME 태그로 호빵홈의 메모장을 불러오는 화면 예입니다..




2022-06-27
18:02:39


  추천하기   목록보기

현재글을 이메일로 보내기

No 제 목 글쓴이 작성일 조회
628   핸폰 문자메시지 붙여쓰면 통화요금 줄어     12-11 18:01 2757
627   [플래시 동영상] 포토샵 기본 기능 설명     10-29 12:51 2747
626   리얼플레이어 파일(ra, rm)을 배경음악으로 듣기     05-24 18:42 2741
625   [펌] META(메타) 태그     05-15 00:41 2738
624   왕초보들의 보안 10계명 - 퍼옴     05-25 23:30 2736
623   파일 확장자 설명     09-14 10:03 2733
  문서 안에서 다른 문서를 불러오는 IFRAME 태그     05-24 16:44 2732
621   IE의 [파일] - [다른 이름으로 저장] 버튼 만들기     11-21 06:46 2717
620   글씨에 마우스를 가져가면 글씨의 배경색이 바뀌는 소스     05-31 21:36 2716
619   비가 내려오는 소스 - 17     09-08 04:56 2696
618   마우스 가져가면 흐려지고 마우스 밖으로 가면 밝아지는 그림     05-28 23:30 2693
617   마우스를 올리면 버튼의 배경색이 바뀌는 소스     05-31 21:19 2689
616   [포토샵] 액션의 spatter 효과로 테두리 만들기     09-26 02:13 2665
615   기념일 계산 자바스크립트(지난날 남은날 모두 계산 가능)     05-28 21:41 2645
614   3종류의 호빵이 내려오는 소스     05-24 13:56 2626
   [1][2][3][4][5][6][7][8][9] 10 ..[51] [다음 10개]
 
Copyright 1999-2022 Zeroboard / skin by Praise Jesus
Copyright ⓒ 1998~ . Hobbang.co.kr. All rights reserved.