[HTML] HTML iframe 요소

안녕하세요.

 

오늘은 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

이 글을 공유하기

댓글(0)

Designed by JB FACTORY