베스트 키워드 더보기
주간 월간 연간 누적
디자인몰 통합검색 전체 검색 정액숍 검색 무한숍 검색
검색 상세검색
이벤트
콘텐츠 개수 오늘어제이번달지난달누적
HTML 소개
텍스트
링크
이미지
테이블
인클루드
프레임
폼(FORM)
이미지 자르기
색상코드표
프레임의 기본구성 프레임 크기 다중 프레임 프레임 테두리 프레임 속성 프레임 타깃 지정
아이프레임(IFRAME)
    
지금까지 만들어 본 프레임과 비슷하면서도 전혀 다른 성격의 프레임이 있습니다. 바로 아이프레임(iframe)입니다. 언뜻 보면 폼 요소의 하나인 텍스트 영역처럼 보이지만, 이와는 달리 이미지 파일이나 색색의 글씨가 삽입되어 있습니다.
그리고 아무리 글씨를 쓰려 해도 쓰이지 않습니다. 웹페이지를 특별하게 만들어주는 아이프레임을 한마디로 표현하자면, 웹페이지 안에 프레임을 삽입한 것입니다.
즉, 일반 프레임의 경우 웹페이지를 통째로 분할한 것에 비하여 아이프레임은 웹페이지 내부에 일정한 영역을 만들고 그 안에 다른 웹페이지를 넣은 것입니다.

iframe의 형식은 아래와 같습니다.

<iframe src="파일의 경로" name="프레임 이름" width="프레임 가로길이" height="프레임 세로길이" frameborder="프레임 테두리 두께" marginheight="수직여백" marginwidth="수평여백"" scrolling="스크롤바 생성여부">

iframe역시 frame의 속성과 동일한 속성을 지닙니다. 프레임의 크기를 조절할 수 있고, 프레임의 테두리 두께를 "0"으로 조절하면 테두리를 감출 수 있습니다.
프레임 안의 수평, 수직의 여백 조절이 가능하고, scrolling 태그를 이용하면 스크롤바의 생성 여부를 조절할 수가 있습니다. "yes"면 무조건적으로 스크롤바가 생성되고, "no"면 스크롤바가 생성되지 않으며, "auto"인 경우에는 문서의 길이에 따라 자동으로 스크롤바가 조절됩니다.
마지막으로, 프레임의 이름을 이용하면 iframe 안으로 직접 링크를 걸 수도 있습니다.



다음의 예제를 실습하기 전에 문서의 배경색이 하얀색, 붉은색, 파란색인 문서 2장을 더 만들어 놓고 연습하세요.
<html> <head> <title>iframe</title> </head> <body bgcolor="19a319"> <font color="ffffff"><a href="red.htm" target="box">1. red문서 링크걸기</a> <a href="blue.htm" target="box">2. blue문서 링크걸기</a> <a href="http://kr.yahoo.com" target="box">3. 야후 링크</a></font><p> <iframe src="white.htm" width="350" height="200" name="box" scrolling="auto" frameborder="1"></iframe> </body> </html>


주문제작 안내 디자인이용요금표 우수회원 틀리기 쉬운 외래어 고객센터   모바일웹
아사달 사업자등록증 기술보증기금 인증 벤처기업 기술혁신쳥 중소기업(INNO-BIZ) 정보보호 안전진단 필증 획득 ISO9001 인증기업 기술신용보증기금 우량기술기업선정 서울지방중소기업청 imagedj
한국정보통신공사협회 한국인터넷진흥원공인 도메인등록대행자 (사)한국인터넷호스팅협회 아사달 특허등록 한국산업기술진흥협회 기업부설연구소 통일부 문화체육관광부 대통령상 수상
페이지 맨 위로 이동하기