![[HTML & CSS] iframe](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdhWoM5%2FbtrLK2lgpBW%2FUWrVT7g34O8XGc2QEVd5PK%2Fimg.png)
728x90
이전글 block & inline의 연장입니다.
1. iframe태그
iframe이란 inline frame의 약자로, 웹 페이지안에 다른 웹 페이지를 생성하는것을 의미합니다.
기본적인 형식은 다음과 같습니다.
<iframe src="삽입하는 웹페이지 URL" title="내용"></iframe>src : source의 약자로 삽입하려는 웹페이지의 주소를 나타냅니다.
title : 웹 페이지의 해당 iframe이 어떤 iframe인지 알려줍니다. 필수속성은 아닙니다.
1-1. width, height 속성 사용
width와 height속성을 사용하면 iframe의 너비와 높이를 조절할 수 있습니다.
기본적인 형식은 다음과 같습니다.
<iframe src="삽입하는 웹페이지 URL" title="내용" width="100%" height="300px"></iframe>
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>iframe Tag</title>
<meta charset="UTF-8">
</head>
<body>
<h1>iframe을 이용하여 웹 페이지에 다른 웹페이지 삽입하기</h1>
<iframe
src="https://terms.naver.com/entry.naver?docId=1168097&cid=40942&categoryId=32838"
title="내용" width="50%" height="300px">
</iframe>
</body>
</html>
결과)
1-2. iframe의 테두리 변경 및 삭제
<iframe>태그의 테두리를 변경하거나 삭제하고 싶을 때는 style속성을 이용합니다.
1-2-1. 테두리 변경
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>iframe Tag</title>
<meta charset="UTF-8">
</head>
<body>
<h1>iframe을 이용하여 웹 페이지에 다른 웹페이지 삽입하기</h1>
<iframe
src="https://terms.naver.com/entry.naver?docId=1168097&cid=40942&categoryId=32838"
title="내용" width="50%" height="300px" style="border:2px dashed red">
</iframe>
</body>
</html>
결과)
1-2-2. 테두리 삭제
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>iframe Tag</title>
<meta charset="UTF-8">
</head>
<body>
<h1>iframe을 이용하여 웹 페이지에 다른 웹페이지 삽입하기</h1>
<iframe
src="https://terms.naver.com/entry.naver?docId=1168097&cid=40942&categoryId=32838"
title="내용" width="50%" height="300px" style="border:none">
</iframe>
</body>
</html>
결과)
2. <a>태그를 이용하여 iframe에 여러개의 웹 페이지 삽입하기
<a>태그의 target속성과 <iframe>태그의 name속성을 이용하면 여러개의 웹 페이지가 삽입됩니다.
기본적인 형식은 다음과 같습니다.
<iframe src="삽입하고자 하는 웹 페이지 URL" title="내용" name="frame"></iframe>
<a href="삽입하고자 하는 웹 페이지 URL" target="frame">웹 페이지</a>
<a href="삽입하고자 하는 웹 페이지 URL" target="frame">웹 페이지</a>
<iframe>태그는 name속성으로 이름을 frame으로 지정해줍니다.
<a>태그는 클릭했을때 해당 웹 페이지를 <iframe>에서 열 수 있도록 target속성을 이용해서 iframe의 이름을 지정해줍니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>iframe Tag</title>
<meta charset="UTF-8">
</head>
<body>
<ol>
<li>
<a href="https://terms.naver.com/entry.naver?docId=1168097&cid=40942&categoryId=32838"
target="frame">HTML설명</a>
</li>
</ol>
<br>
<iframe
src="https://terms.naver.com/entry.naver?docId=1168097&cid=40942&categoryId=32838"
title="내용" target="frame" width="100%" height="300px">
</iframe>
</body>
</html>하이퍼링크를 통해서도 <iframe>태그를 통해서도 같은 웹페이지를 브라우저에 보여줄 수 있습니다.
결과)
728x90
'[WEB]' 카테고리의 다른 글
| [HTML & CSS] HTML 입력 태그 (0) | 2022.09.13 |
|---|---|
| [HTML & CSS] sementic 태그 (0) | 2022.09.13 |
| [HTML & CSS] block & inline (0) | 2022.09.10 |
| [HTML & CSS] HTML 기본태그 4 - <img>, <list>, <table> (0) | 2022.09.09 |
| [HTML & CSS] HTML 기본태그 3 - <q>, <abbr>, <Link> (0) | 2022.09.08 |