아이프레임이란 :
내부 프레임(inline frame)이라는 의미로 HTML문서내에서 다른 HTML문서를 보여주고자 할때 사용합니다.
<img> 태그를 사용하듯 문서내의 원하는 위치에 삽입할 수 있습니다.
src 속성:
src 속성값에는 포함할 HTML 문서의 URL을 넣습니다.
<iframe src=”http://www.naver.com”>
width와 height 속성 예:
<iframe src=”http://www.naver.com” width=”600″ height=”300″>
<iframe src=”http://www.naver.com” width=”60%” height=”300″>
frameborder 속성
inline frame의 경계선의 두께를 지정할 수 있습니다.
<iframe src=”http://www.homejjang.com” frameborder=”0″ width=”600″ height=”300″>
marginwidth와 marginheight
inline frame의 여백을 지정할 수 있습니다.
<iframe src=”http://www.homejjang.com” frameborder=”0″ width=”600″ height=”300″ marginwidth=”0″marginheight=”0″>
scrolling
inline frame내에서 스크롤바 사용여부를 지정할 수 있습니다.
<iframe src=”http://www.homejjang.com” frameborder=”0″ width=”600″ height=”300″ marginwidth=”0″ marginheight=”0″ scrolling=”yes”>
scrolling 값을 no로 지정하면 스크롤바가 생기지 않습니다.
예제)
iframe에 사용하는 속성(attribute)은 여러 가지가 있는데, 그 중 자주 쓰이는 것은 width, height입니다. 테두리 등 모양은 CSS로 꾸밉니다.
다음은 width와 height로 크기를 정하고, CSS로 테두리를 꾸미는 간단한 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML Tag | iframe</title>
<style>
.if1 {
width: 500px;
height: auto;
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<h1>iframe - basic</h1>
<iframe src="iframe-02.html"></iframe>
<h1>iframe - fixed width, height</h1>
<iframe src="iframe-02.html" width="500" height="100"></iframe>
<h1>iframe - auto height</h1>
<iframe src="iframe-02.html" width="500" height="auto"></iframe>
<h1>iframe - styling</h1>
<iframe src="iframe-02.html" class="if1"></iframe>
</body>
</html>
워드프레스에서 Iframe Tag:
워드프레스 에서 IFrame이 적용되지 않을 때 플러그인 중 iframe 이란 플러그인을 설치 하면 정상 동작한다.
이것은 웹페이지를 통째로 프레임에 붙이는 역할을 한다.
https://wordpress.org/plugins/iframe/ 에서 다운로드 받을 수 있다.
첨부파일
iframe.4.3.zip'IT & 과학 > 인터넷' 카테고리의 다른 글
| 워드프레스 플러그인 추천 (0) | 2016.10.14 |
|---|---|
| Windows Live Writer 에서 첨부파일을 추가하는 플러그인 (0) | 2016.10.07 |
| 블로그 노출/ZUM 검색등록 (0) | 2016.09.19 |
| 블로그 노출/ 구글검색 반영 (0) | 2016.09.19 |
| 워드프레스 화면스크롤 플러그인 Brozzme Scroll Top (0) | 2016.09.19 |
