📌 HTML iframe 사용하기
웹페이지 안에 또 다른 웹페이지를 삽입하고 싶을 때 사용하는 태그가 바로 <iframe> 입니다.
예를 들어, 메뉴를 클릭하면 같은 페이지 안의 특정 영역에서 다른 페이지가 열리도록 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe 예제</title>
</head>
<body>
<!-- 문단 나누기 <div>, 메뉴 표현 <nav> -->
<header>
<h1>iframe 사용하기</h1>
<nav>
<ul>
<!--
_blank : 새창 연결
mainframe : iframe에 다음창 연결
-->
<li><a href="https://www.naver.com" target="_blank">네이버</a></li>
<li><a href="Ex02.html">Ex02</a></li>
<li><a href="https://www.daum.net" target="mainframe">다음</a></li>
</ul>
</nav>
<section>
<!-- name="mainframe" 으로 지정 → 위에서 target="mainframe"과 연결 -->
<iframe width="80%" height="400" src="Ex01.html" name="mainframe"></iframe>
</section>
</header>
</body>
</html>주요 태그 설명
- <header> : 페이지의 머리글(제목, 메뉴 등)을 담는 영역
- <nav> : 내비게이션 메뉴를 표현할 때 사용
- <ul><li> : 목록 형태로 메뉴 구성
- <a> : 하이퍼링크(링크 연결)
- target="_blank" → 새 창에서 열기
- target="mainframe" → 특정 iframe 영역에서 열기
- <iframe> : 웹페이지 안에 또 다른 웹페이지 삽입
- src : 처음에 보여줄 페이지
- name : a태그에서 target으로 지정할 수 있는 이름
실행 결과
- 네이버 클릭 → 새 창에서 네이버 열림
- Ex02 클릭 → 같은 창에서 Ex02.html 페이지 열림
- 다음 클릭 → 아래 iframe 영역에서 다음 사이트가 열림
'기초 및 언어 > ▶ HTML & CSS' 카테고리의 다른 글
| 6. HTML_form 태그 (0) | 2025.09.05 |
|---|---|
| 5. HTML_table (1) | 2025.09.05 |
| 3. HTML_하이퍼링크 정리 <a>태그 (0) | 2025.09.04 |
| 2. HTML_이미지 동영상 삽입 (0) | 2025.09.04 |
| 1. HTML_태그 (0) | 2025.09.03 |