HTML 아이프레임(IFRAME , Inline frames )을 활용하기
페이지 정보
본문
아이프레임(IFRAME , Inline frames)을 이용하면 한 웹페이지 내에서 CGI, HTML등 다른문서를 불러와 삽입하는 것이 가능해진다. 단 주의할점은 익스 플로러 전용으로 넷츠케이프는 지원을 하지 않는다.
아이프레임(IFRAME)은 아래와 같은 형식으로 삽입할 곳에 넣어주면 된다.
<iframe src="외부문서주소" frameborder="0" width="300" height="150" marginwidth="0" marginheight="0" topmargin="0" scrolling="auto" ></iframe>
⇒ frameborder="0" : iframe 창의 두께를 설정
⇒ width="300" height="150" : iframe의 크기를 설정
⇒ marginwidth="0" marginheight="0" topmargin="0" : 여백을 설정
⇒ scrolling="auto" :
문서내용이 iframe크기보다 길면 스크롤바가 자동으로 생기고 옵션에 auto 대신에 yes를 사용하면
스크롤바가 항상 생기며, no를 사용하면 문서내용이 길어도 스크롤바가 생기지 않는다.
⇒ name="아이프레임이름"
링크시킬때 이름을 지정하면 아이프레임에서 문서가 열림 ex) target="아이프레임이름"
⇒ 투명한 IFRAME 이용하기
인터넷 익스플로러 5.5 이상이거나 넷스케이프 6 이상에서는 ALLOWTRANSPARENCY="true"을
이용하여 바탕색이 보이는 아이프레임을 만들수 있다.
단, 아이프레임에 삽입할 문서 안에 <BODY STYLE="background-color:transparent">를 적어준다.
<html>
<head>
<title>아이프레임 이용하기</title>
</head>
<body bgcolor="yellow">
다른 문서에 있는 원하는 내용을 삽입할 수 있다.<br>
<iframe src="https://www.happyjung.com" name="contents" frameborder="0" width="400" height="300" marginwidth="0" marginheight="0" topmargin="0" scrolling="auto"></iframe>
</body>
</html>
아이프레임(IFRAME)은 아래와 같은 형식으로 삽입할 곳에 넣어주면 된다.
<iframe src="외부문서주소" frameborder="0" width="300" height="150" marginwidth="0" marginheight="0" topmargin="0" scrolling="auto" ></iframe>
⇒ frameborder="0" : iframe 창의 두께를 설정
⇒ width="300" height="150" : iframe의 크기를 설정
⇒ marginwidth="0" marginheight="0" topmargin="0" : 여백을 설정
⇒ scrolling="auto" :
문서내용이 iframe크기보다 길면 스크롤바가 자동으로 생기고 옵션에 auto 대신에 yes를 사용하면
스크롤바가 항상 생기며, no를 사용하면 문서내용이 길어도 스크롤바가 생기지 않는다.
⇒ name="아이프레임이름"
링크시킬때 이름을 지정하면 아이프레임에서 문서가 열림 ex) target="아이프레임이름"
⇒ 투명한 IFRAME 이용하기
인터넷 익스플로러 5.5 이상이거나 넷스케이프 6 이상에서는 ALLOWTRANSPARENCY="true"을
이용하여 바탕색이 보이는 아이프레임을 만들수 있다.
단, 아이프레임에 삽입할 문서 안에 <BODY STYLE="background-color:transparent">를 적어준다.
<html>
<head>
<title>아이프레임 이용하기</title>
</head>
<body bgcolor="yellow">
다른 문서에 있는 원하는 내용을 삽입할 수 있다.<br>
<iframe src="https://www.happyjung.com" name="contents" frameborder="0" width="400" height="300" marginwidth="0" marginheight="0" topmargin="0" scrolling="auto"></iframe>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.