아이프레임이란 :
내부 프레임(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>'개발언어 > HTML' 카테고리의 다른 글
| HTML button Tag (0) | 2016.10.21 |
|---|---|
| HTML Tag <details> (0) | 2016.10.17 |
| HTML5 Audio Tag (0) | 2016.09.09 |
| HTML video 태그(HTML5) (0) | 2016.09.09 |
| HTML style Tag 사용법 (0) | 2016.07.05 |
