본문 바로가기
HTML/HTML 기본문법

HTML Iframe

by flycoding 2023. 5. 20.
반응형

HTML iframe은 웹 페이지 내의 웹 페이지를 표시하는 데 사용된다.

 

HTML Ifame 구문

HTML <iframe> 태그는 인라인 프레임을 지정한다.
인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함하는 데 사용된다.

<iframe src="url" title="description"></iframe>

팁: 항상 <iframe>의 제목 속성을 포함하는 것이 좋습니다. 이것은 iframe의 내용을 읽기 위해 화면 판독기에 사용된다.

 

Iframe 너비와 높이 설정

height 및 width 속성을 사용하여 iframe의 크기를 지정한다.
높이와 너비는 기본적으로 픽셀 단위로 지정된다:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>높이 및 너비 속성을 사용하여 iframe의 크기를 지정할 수 있습니다:</p>

<iframe src="https://www.hani.co.kr/arti/politics/defense/1089612.html" height="200" width="300" title="Iframe Example"></iframe>

</body>
</html>

HTML lframe 속성 예제

 

또는 스타일 특성을 추가하고 CSS 높이 및 너비 속성을 사용할 수 있다:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>CSS 높이 및 너비 속성을 사용하여 iframe의 크기를 지정할 수도 있습니다:</p>

<iframe src="https://www.hani.co.kr/arti/politics/defense/1089612.html" style="height:200px;width:300px" title="Iframe Example"></iframe>

</body>
</html>

HTML lframe 속성  CSS 높이 너비 예제

 

Iframe 테두리 제거

기본적으로 iframe에는 테두리가 있다.
테두리를 제거하려면 스타일 특성을 추가하고 CSS 테두리 속성을 사용한다:

<!DOCTYPE html>
<html>
<body>

<h2>Iframe 테두리 제거</h2>
<p>iframe의 기본 테두리를 제거하려면 CSS를 사용합니다:</p>

<iframe src="https://www.hani.co.kr/arti/politics/defense/1089612.html" style="border:none;" title="Iframe Example"></iframe>

</body>
</html>

HTML lframe 테두리 제거 border none 예제

 

CSS를 사용하여 iframe 테두리의 크기, 스타일 및 색상을 변경할 수도 있다:

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

 

Iframe 링크 대상

iframe을 링크의 대상 프레임으로 사용할 수 있다.
링크의 target 속성은 iframe의 name 속성을 참조해야 한다:

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

 

마무리

  • HTML <iframe> 태그가 인라인 프레임을 지정한다
  • src 속성은 포함할 페이지의 URL을 정의한다
  • 항상 title 속성 포함(화면 판독기용)
  • height 및 width 속성은 iframe의 크기를 지정한다
  • border:none; iframe 주위의 테두리 제거

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML 자바스크립트(Javascript)  (0) 2023.05.22
HTML 파일 경로(File Path)  (0) 2023.05.21
HTML id 속성  (0) 2023.05.19
HTML 클래스 속성(Class Attributes)  (0) 2023.05.18
HTML 블록 및 인라인 요소  (0) 2023.05.17

관련글

댓글

티스토리툴바