프론트엔드/HTML

iframe

짱뚱짱 2025. 5. 12. 16:03

✅ iframe이란?

  • 또다른 창을 삽입할 때 사용
  • 브라우저 안에 다른 브라우저를 삽입
  • 리소스 사용 증가
  • 유튜브 영상, 지도, 외부 위젯 가져올 때 많이 쓰임

✅ 기본 문법

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

 

  • src: 삽입할 웹페이지의 주소
  • width, height: 프레임 크기 지정
  • frameborder: 테두리 유무 (0이면 없음)

✅ 결과

 

✅ 예제: 유튜브 영상 삽입

<iframe width="560" height="315" src="https://www.youtube.com/embed/pf7QYivvs4c?si=5I9MOF-pOnTH69Ki" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

✅ 결과

 

⚠️ iframe 사용시 주의사항

  • 외부 사이트가 X-Frame-Options 설정으로 막아두면 안 뜰 수도 있음
  • 보안 이슈 때문에 남용 금지
    • 예: 로그인 창, 민감 정보 입력 창에는 사용 금지
  • 너무 많이 쓰면 느려짐 → 필요한 곳에만 최소한으로 사용

 

'프론트엔드 > HTML' 카테고리의 다른 글

시멘틱 태그와 레이아웃 태그  (0) 2025.05.13
table  (0) 2025.03.05
HTML list  (0) 2024.09.03
button 태그  (0) 2024.09.03
img 태그  (0) 2024.09.03