[HTML] HTML iframe 요소
- 웹 프로그래밍/HTML
- 2020. 12. 18. 00:00
안녕하세요.
오늘은 HTML에서 iframe 요소에 대해서 알아 보려고 합니다.
iframe이란 inline frame 의 약자인데요.
Iframe 요소를 이용하면 어떠한 제약 없이, 웹페이지 혹인 이미지, 동영상 등을 삽입해서 보여줄 수 있는데요.
예제를 통해서 보여 드리도록 하겠습니다.
예제 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 연습 - 범범조조</title>
</head>
<body>
<h1>Inline Frame 연습</h1>
<iframe src="image.jpg" name="frame_target"
style="width: 100%; height: 300px; border: 3px dashed maroon;">
</iframe>
<p>
<a href="https://www.naver.com/" target="frame_target">
네이버 페이지로 페이지 변경
</a>
</p>
</body>
</html>
|
cs |
실행 결과
위와 같이 iframe 요소를 이용하여 이미지를 삽입해 보았습니다.
또한, "네이버 페이지로 페이지 변경" 을 클릭하면 해당 홈페이지로 iframe 내에서 페이지가 전환되는 것도 확인하실 수 있습니다.
감사합니다.^^
728x90
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] HTML list 태그 CSS 입히기 (0) | 2020.12.17 |
|---|---|
| [HTML] HTML 폼 태그 – Label 태그 사용하기 (0) | 2020.12.16 |
| [HTML] HTML 폼 태그 – 라디오 버튼(Radio Button), CheckBox 만들기 (0) | 2020.12.15 |
| [HTML] HTML 폼 태그 – Select 박스(콤보박스) 만들기 (0) | 2020.12.14 |
| [HTML] HTML 폼 태그 – 텍스트 입력하기 (0) | 2020.12.13 |
