💡 퀵 접속: htm.kr/iframe

} code { background-color: #f8f9fa; padding: 2px 5px; border-radius: 3px; font-family: monospace; }

HTML iframe 태그

1. 정의와 목적

<iframe> 태그는 웹 페이지 내에 다른 웹 페이지를 삽입하는 데 사용되는 HTML 요소입니다. 주로 외부 콘텐츠를 현재 페이지에 통합할 때 사용됩니다.

주의사항:
  • 보안 위험이 있을 수 있으므로 신뢰할 수 있는 소스의 콘텐츠만 삽입해야 합니다.
  • sandbox 속성을 사용하여 보안을 강화하는 것이 좋습니다.
  • 성능에 영향을 줄 수 있으므로 필요한 경우에만 사용해야 합니다.

2. 기본 구조

<iframe 
    src="https://example.com" 
    width="600" 
    height="400" 
    title="예제 페이지"
    sandbox="allow-same-origin allow-scripts"
    loading="lazy">
</iframe>

3. 자주 사용되는 속성

속성 설명 예시
src 삽입할 페이지의 URL src="https://example.com"
width iframe의 너비 width="600"
height iframe의 높이 height="400"
title 접근성을 위한 제목 title="예제 페이지"
sandbox 보안 제한 설정 sandbox="allow-same-origin allow-scripts"
loading 지연 로딩 설정 loading="lazy"

4. 실제 사용 예제

4.1 기본 iframe 삽입

<iframe 
    src="https://example.com" 
    width="100%" 
    height="300" 
    title="기본 예제">
</iframe>

4.2 YouTube 동영상 삽입

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

4.3 Google Maps 삽입

<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.297944506569!2d126.9779693!3d37.566295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDMzJzU4LjYiTiAxMjbCsDU4JzQ2LjciRQ!5e0!3m2!1sko!2skr!4v1234567890" 
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy" 
    title="Google Maps">
</iframe>

5. 스타일링

/* 반응형 iframe */
.responsive-iframe {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
}

.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 테두리 및 여백 설정 */
.custom-iframe {
    border: 2px solid #ddd;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

6. 성능 최적화 팁

  • loading="lazy" 속성을 사용하여 지연 로딩 구현
  • 필요한 경우에만 iframe 사용
  • 적절한 크기 설정으로 레이아웃 시프트 방지
  • sandbox 속성으로 보안 강화
  • src 속성을 동적으로 설정하여 필요할 때만 로드

7. 검증 및 테스트

  • W3C 유효성 검사
  • 보안 설정 확인
  • 반응형 동작 테스트
  • 접근성 검사
  • 크로스 브라우저 테스트
중요:
  • iframe은 보안 위험이 있을 수 있으므로 신중하게 사용해야 합니다.
  • 가능한 경우 sandbox 속성을 사용하여 보안을 강화하세요.
  • 성능에 영향을 줄 수 있으므로 필요한 경우에만 사용하세요.
  • 접근성을 고려하여 title 속성을 반드시 지정하세요.