[HTML] iframe 태그 - 다른 페이지 일부 보이기

반응형

목 차

• 1. <iframe> 테스트
• 2. <iframe> 태그란?
• 3. 기본 문법
• 4. 속성
  • 4-1. src
  • 4-2. width
  • 4-3. height
  • 4-4. frameborder
  • 4-5. allowfullscreen
  • 4-6. name
  • 4-7. sandbox
  • 4-8. srcdoc
  • 4-9. loading
• 5. 사용시 고려사항
• 6. 마무리

728x90

 

1. <iframe> 테스트

• <iframe> 태그를 활용해 페이지에 다른 페이지를 로드하는 모습을 보여 드리겠습니다.

<iframe 
	src="https://spirit0833.tistory.com/64" 
    loading="lazy" 
    name="testIframe"
    height="300"
    width="100%"
></iframe>

 

2. <iframe> 태그란?

• HTML의 <iframe> 태그는 인라인 프레임(inline frame)을 삽입할 때 사용되며, 한 웹페이지 안에 다른 웹페이지를 임베드(embed) 할 수 있게 해 줍니다.
• <iframe>을 사용하면 외부 콘텐츠(다른 웹사이트나 특정 문서)를 현재 페이지에 포함시킬 수 있으며, 주로 외부 콘텐츠나 서비스를 페이지 내에 표시할 때 많이 활용됩니다.

 

3. 기본 문법

• src: 삽입할 웹페이지의 URL을 지정합니다. 이 속성은 필수이며, 표시할 웹 페이지의 주소입니다.
• width: 프레임의 너비를 지정합니다. 기본 단위는 픽셀(px)이며, 퍼센트(%)도 사용할 수 있습니다.
• height: 프레임의 높이를 지정합니다. 기본 단위는 픽셀이며, 퍼센트도 사용할 수 있습니다.

<iframe src="URL" width="너비" height="높이"></iframe>

 

4. 속성

4-1. src

• 프레임 내에서 로드할 웹페이지의 URL을 지정합니다. 이 속성이 없으면 빈 프레임이 생성됩니다.

<iframe src="https://example.com"></iframe>

 

 

4-2. width

• 프레임의 너비를 지정합니다. 픽셀이나 퍼센트를 사용할 수 있습니다.

<iframe src="https://example.com" width="500"></iframe>

 

4-3. height

• 프레임의 높이를 지정합니다. 픽셀 또는 퍼센트를 사용할 수 있습니다.

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

 

 

4-4. frameborder

• 프레임 주위에 테두리를 표시할지 여부를 지정합니다. 기본값은 1이며, 테두리가 보이지 않게 하려면 0으로 설정합니다.

<iframe src="https://example.com" frameborder="0"></iframe>

 

4-5. allowfullscreen

• 이 속성이 있으면 <iframe> 콘텐츠가 전체 화면으로 전환될 수 있습니다.

<iframe src="https://example.com" allowfullscreen></iframe>

 

 

4-6. name

• 프레임의 이름을 지정합니다. 자바스크립트나 링크에서 프레임을 대상으로 설정할 때 사용할 수 있습니다.

<iframe src="https://example.com" name="myIframe"></iframe>

 

4-7. sandbox

• 보안 제약을 걸어 <iframe> 내에서 실행되는 코드의 권한을 제한할 수 있습니다. 예를 들어, 스크립트 실행, 폼 제출, 팝업 창 열기 등을 제한할 수 있습니다.

<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

 

 

4-8. srcdoc

• <iframe>에 로드할 문서 자체를 지정합니다. 이 속성은 src 대신 HTML 코드 자체를 포함할 수 있습니다.

<iframe srcdoc="<p>Hello, world!</p>"></iframe>

 

4-9. loading

• 프레임 로딩 방식을 지정합니다. lazy를 사용하면 프레임이 페이지에 보일 때 로드됩니다.
• lazy (지연 로딩), eager (즉시 로딩)

<iframe src="https://example.com" loading="lazy"></iframe>

 

5. 사용시 고려사항

• SEO: <iframe> 내의 콘텐츠는 검색 엔진이 쉽게 접근할 수 없기 때문에 SEO 측면에서 불리할 수 있습니다. 중요한 콘텐츠는 직접 HTML로 포함하는 것이 좋습니다.
• 사용성: <iframe>을 사용하면 외부 콘텐츠가 느리게 로드되거나, 페이지의 레이아웃이 깨질 수 있습니다. 특히 모바일 환경에서 주의해야 합니다.
• 브라우저 지원: <iframe> 태그는 대부분의 최신 브라우저에서 지원되지만, 일부 오래된 브라우저에서는 완벽히 지원되지 않을 수 있습니다.

 

6. 마무리

• <iframe> 태그는 웹페이지 내에 외부 콘텐츠를 삽입하는 데 매우 유용한 도구입니다. 특히 외부 서비스(예: 지도, 동영상, 소셜 미디어 피드)를 포함하거나 특정 웹페이지의 일부로 다른 페이지를 보여줄 때 사용됩니다. 하지만 보안이나 성능 문제를 고려해 적절하게 사용해야 합니다.

 

---

 

관련글 목록

[HTML] map 태그 (이미지 특정 영역 클릭하기)

[HTML] img 태그

[HTML] ol 태그