[HTML] 개념 정리 9 :: 내장프레임 <iframe> 페이지 삽입 및 속성

HTML <iframe> 태그: 페이지 삽입 및 속성 사용법

HTML의 <iframe> 태그는 한 웹페이지 안에 다른 웹페이지를 삽입하는 데 사용됨. 내장 프레임(Inline Frame)이라고도 하며, 독립적인 콘텐츠를 표시하거나 외부 페이지를 통합할 때 유용함.

---

1. <iframe> 태그 기본 구조

기본 문법

<iframe src="URL" width="가로크기" height="세로크기"></iframe>

예제

<iframe src="https://example.com" width="800" height="600"></iframe>

• src: 삽입할 웹페이지의 URL.
• width: 프레임의 가로 크기.
• height: 프레임의 세로 크기.

---

2. <iframe> 주요 속성

(1) src: 삽입할 페이지 경로

src 속성에 삽입할 페이지의 URL을 지정.

예제

<iframe src="https://www.wikipedia.org" width="100%" height="500"></iframe>

(2) width와 height: 크기 설정

width와 height 속성으로 <iframe>의 크기를 설정. 단위는 픽셀(px) 또는 퍼센트(%)를 사용.

예제

<iframe src="https://www.example.com" width="600" height="400"></iframe>

(3) frameborder: 테두리 표시 여부

프레임의 테두리를 표시하거나 숨김.

• 0: 테두리를 숨김.
• 1: 기본 테두리 표시.

예제

<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>

(4) scrolling: 스크롤바 표시 여부

스크롤바 표시를 설정.

• yes: 항상 스크롤바 표시.
• no: 스크롤바 숨김.
• auto: 콘텐츠 크기에 따라 자동으로 스크롤바 표시.

예제

<iframe src="https://example.com" width="600" height="400" scrolling="no"></iframe>

(5) allowfullscreen: 전체 화면 허용

프레임에서 전체 화면 기능을 허용.

예제

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" allowfullscreen></iframe>

---

3. CSS를 활용한 스타일링

CSS를 사용해 <iframe>에 추가 스타일을 적용 가능.

(1) 테두리 스타일

<iframe src="https://example.com" style="border:2px solid black; width:600px; height:400px;"></iframe>

(2) 반응형 <iframe>

<style>
  .responsive-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: none;
  }
</style>

<iframe class="responsive-iframe" src="https://www.example.com"></iframe>

---

4. 예제: YouTube 비디오 삽입

기본 예제

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

반응형 예제

<style>
  .youtube-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
</style>

<iframe class="youtube-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

---

5. 주의사항

1. Cross-Origin 정책: 외부 콘텐츠를 삽입할 때, 일부 웹사이트는 보안상의 이유로 <iframe> 삽입을 허용하지 않음.
2. SEO 영향: <iframe> 내부의 콘텐츠는 검색 엔진에 잘 크롤링되지 않으므로, 중요한 콘텐츠는 직접 작성하거나 API로 통합하는 것이 좋음.
3. 대체 콘텐츠 제공: <iframe>이 지원되지 않는 경우를 대비해 대체 콘텐츠를 제공할 수 있음.

   <iframe src="https://example.com">
     브라우저가 `<iframe>`을 지원하지 않습니다.
   </iframe>

---

결론

HTML <iframe> 태그는 외부 웹페이지나 콘텐츠를 삽입할 때 유용한 도구임. src, width, height와 같은 기본 속성을 활용해 원하는 크기와 모양으로 조정 가능하며, CSS를 통해 더욱 유연한 스타일링을 적용할 수 있음.