반응형
아이프레임 <iframe>
inline frame의 약자로, iframe을 이용하면 웹페이지 안에 또 다른 웹페이지를 삽입할 수 있다
<iframe src = "삽입할 페이지의 주소 또는 문서 위치"> iframe요소를 지원하지 않는 브라우저를 위한 텍스트</iframe>
[사용할 수 있는 속성]
| 속성명 | 속성값 | 설명 |
| height | 픽셀 | <iframe> 요소의 높이를 명시함. |
| width | 픽셀 | <iframe> 요소의 너비를 명시함. |
| name | 텍스트 | <iframe> 요소의 이름(name)을 명시함. |
| sandbox |
allow-forms |
<iframe> 요소에 보일 콘텐츠에 대한 추가적인 제한 사항(restrictions)들의 집합을 명시함. |
| src | URL | <iframe> 요소에 보일 문서의 URL를 명시함. |
| srcdoc | HTML 코드 | <iframe> 요소에 보일 웹 페이지의 HTML 코드를 명시함. |
[사용예시]
<html>
<p>
<iframe src="https://yoonhihi.tistory.com/" width="1000px" height="800px"></iframe>
</p>
</html>[결과]
target 속성
아이프레임에 사용할 수 있는 target 속성에 대해 알아보자
<p><a href= "삽입할 페이지의 주소 또는 문서 위치" target= 속성값></a></p>
_blank : 링크로 연결된 문서를 새탭에서 열어줌
프레임명 : 링크된 문서를 명시된 프레임에서 오픈함.
[사용예시]
<!DOCTYPE html>
<html lang="en">
<head>
<title>아이프레임</title>
</head>
<body>
<h2>아이프레임</h2>
<p><a href="https://yoonhihi.tistory.com/">윤지의 티스토리(페이지로 이동)</a></p>
<p><a href="https://yoonhihi.tistory.com/" target="_blank">윤지의 티스토리(새탭에서 열기)</a></p>
<p><a href="https://yoonhihi.tistory.com/46?category=960896" target="if">html 설명(아이프레임)</a></p>
<p><iframe name="if" src="https://yoonhihi.tistory.com/" width="1000px" height="800px">
</iframe></p>
</body>
</html>[결과]
반응형
'프로그래밍 > HTML' 카테고리의 다른 글
| 13 입력상자 <input>의 요소 1 (0) | 2021.04.18 |
|---|---|
| 12 폼 <form>과 method 속성 (0) | 2021.04.18 |
| 10 뉴스 페이지를 만들어보자 (0) | 2021.04.17 |
| 09 <a> 하이퍼링크와 bookmark (0) | 2021.04.17 |
댓글