[HTML] 아이프레임 만드는 법 - 웹사이트 내 웹사이트 삽입하기

728x90

SMALL

1. 아이프레임이란❓

inline frame의 약자
웹사이트 안에 또 다른 웹사이트를 삽입

<iframe src='삽입할 페이지의 주소 또는 문서위치' style='크기를 설정할 css코드'></iframe>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아이프레임</title>
</head>
<body>
    <h2>아이프레임</h2>
    <p><iframe src="https://www.daum.net/"
        style="width: 100%; height:800px; border: 3px dashed rgb(43, 209, 195)" ></iframe></p>
</body>
</html>

2. 하이퍼링크 아이프레임으로 열기

target 속성을 아이프레임 name과 똑같이 설정함
하이퍼링크 target 속성 알아보기 ⬇⬇⬇

https://coding-yesung.tistory.com/78

[HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기!

1. 하이퍼링크란 ❓ 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지) 하이퍼링크는 웹을 웹 다워보이도록 만들어줌 링크에 사용할 문자 또는 이미지 ✅ 다음 홈페이지로 연결하는

coding-yesung.tistory.com

✅ 같은 폴더 내 '하이퍼링크.html'을 아이프레임으로 열어보자.

border은 점섬으로 하고 원하는 색상으로 바꿔보았다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아이프레임</title>
</head>
<body>
    <h2>아이프레임</h2>
        <a href="1_하이퍼링크.html" target="if">하이퍼링크 연습 페이지(아이프레임)</a></p>
    <p><iframe src="https://www.daum.net/"
        style="width: 100%; height:800px; border: 3px dashed rgb(43, 209, 195)" name="if"></iframe></p>
</body>
</html>

📄 예제 HTML

5_아이프레임.html

0.00MB

728x90

LIST

'Web > HTML' 카테고리의 다른 글

[HTML] HTML의 디스플레이 - inline, block, inline-block (0)	2023.03.28
[HTML] form 태그와 여러가지 태그 - input, label, textarea, button (0)	2023.03.27
[HTML] 테이블 만드는 법 - 테이블 속성 설정하기 (1)	2023.03.27
[HTML] 책갈피 기능 만드는 법 - 페이지 내 이동하기 (0)	2023.03.27
[HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기! (0)	2023.03.24