HTML - iframes(문서안의 문서)
컴퓨터/HTML&CSS
728x90
반응형
문서 안의 문서
HTML에서의 문법 중 iframe이라는 태그를 제공합니다. 이 태그를 이용하면 문서 안에 스페셜 한 공간을 만들어서 다른 문서와 함께 보는 듯한 효과를 사용할 수 있습니다.
기본 예제
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
<h1>기본 영역</h1>
<iframe src="html1.html">
</iframe>
<iframe src="html2.html">
</iframe>
</body>
</html>
예제처럼 외부의 html문서를 가져올수 있습니다. 기본적으로 iframe태그는 다른 문서를 문서 안으로 불러오는 역할을 합니다.
사이즈 조절 width / height
당연히 iframe의 크기또한 CSS 속성을 통해 수정 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
<h1>기본 영역</h1>
<iframe src="html1.html" width="500" height="200">
</iframe>
<iframe src="html2.html" width="250" height="400">
</iframe>
</body>
</html>
테두리 설정
테두리 또한 변경 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
<h1>기본 영역</h1>
<iframe src="html1.html" width="500" height="200" style="border: none;">
</iframe>
<iframe src="html2.html" width="250" height="400" style="border: 1px solid black;>
</iframe>
</body>
</html>
728x90
반응형
'컴퓨터 > HTML&CSS' 카테고리의 다른 글
| HTML & CSS - [CSS] CSS의 다양한 단위 (0) | 2022.05.23 |
|---|---|
| HTML & CSS - [CSS] 선택자(Selectors), 원하는 요소를 선택하자 (0) | 2022.05.18 |
| HTML - Class 와 Id(태그의 정체성을 부여해 주다) (0) | 2022.01.09 |
| HTML - div 와 span (0) | 2021.10.05 |
| HTML-Block and Inline 1 (0) | 2021.02.17 |
Commnet