임베디드 콘텐츠

7.1 <iframe> 요소

HTML의 <iframe> 요소는 다른 HTML 문서를 현재 문서에 임베드하는 데 사용돼. 이걸로 다른 웹 페이지의 콘텐츠를 주 문서 내에서 보여줄 수 있어, 비디오, 지도, 문서 같은 다양한 리소스들을 통합할 수 있는 거지.

<iframe> 요소는 다른 HTML 문서를 표시할 수 있는 내장 프레임을 만들어. 이 문서는 어느 URL에서나 로드될 수 있고 주 문서와 독립적으로 작동해.

문법:

    
      <iframe src="URL"></iframe>
    
  

사용 예시:

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

속성들

• src: <iframe>에 로드될 문서의 URL 주소
• width: 프레임의 너비 (픽셀 또는 비율로 지정 가능)
• height: 프레임의 높이 (픽셀 또는 비율로 지정 가능)
• title: 프레임 콘텐츠의 간단한 설명 (접근성을 위해 중요해)
• name: 프레임의 이름, 링크와 폼 타겟팅에 사용될 수 있어
• sandbox: 프레임의 콘텐츠에 대한 제한을 설정해, 보안을 높여줘
• allow: <iframe>에서 사용할 수 있는 기능을 정의해 (예: 전체 화면 모드를 위한 allowfullscreen)

7.2 allowfullscreen 속성

allowfullscreen 속성은 <iframe>에 로드된 콘텐츠의 전체 화면 모드를 활성화할 수 있게 해줘. 이 속성이 없으면 콘텐츠는 전체 화면 모드로 전환할 수 없어.

문법:

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

사용 예시:

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

전체 화면 모드는 사용자가 비디오나 다른 리소스를 전체 화면 모드로 볼 수 있게 해줘, 사용자 경험을 향상시키지.

7.3 allow 속성

allow 속성은 <iframe>에서 사용할 수 있는 기능들을 정의해, 예를 들면 위치 정보 접근, 카메라, 마이크 및 전체 화면 모드 같은 것들이야.

문법:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

사용 예시:

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

장점:

• 기능 제어: 임베디드 콘텐츠에 사용할 기능과 API를 지정할 수 있어
• 권한 관리: 위치 정보와 카메라 같은 다양한 기능에 대한 접근 관리를 유연하게 제공해

7.4 sandbox 속성

sandbox 속성은 <iframe>에 로드된 콘텐츠에 제한을 적용하는데 사용돼. 스크립트 실행이나 팝업 열기를 방지하여 보안을 강화하지.

문법:

    
      sandbox="allow-scripts allow-same-origin"
    
  

sandbox 속성 값:

• allow-forms: 폼 제출 허용
• allow-modals: 모달 윈도우 사용 허용
• allow-orientation-lock: 화면 방향 잠금 허용
• allow-pointer-lock: 포인터 잠금 허용
• allow-popups: 팝업 창 열기 허용
• allow-popups-to-escape-sandbox: 팝업이 sandbox를 벗어날 수 있도록 허용
• allow-presentation: 프레젠테이션 API 접근 허용
• allow-same-origin: 같은 출처의 스크립트 실행 허용
• allow-scripts: 스크립트 실행 허용
• allow-storage-access-by-user-activation: 사용자 활성화에 따른 저장소 접근 허용
• allow-top-navigation: 최상위 탐색 허용
• allow-top-navigation-by-user-activation: 사용자 활성화에 따른 최상위 탐색 허용

사용 예시:

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

장점:

• 보안: 잠재적으로 위험할 수 있는 스크립트 실행을 막고, 임베디드 콘텐츠의 기능을 제한해줘
• 접근 제어: 개발자가 임베디드 콘텐츠에 대해 허용할 기능을 정확하게 지정할 수 있어

7.5 loading 속성

loading 속성은 <iframe>이 로드되는 방식을 제어해, 요소가 화면에 보일 때까지 로드를 지연시킬 수 있어 (지연 로딩).

loading 속성 값:

• lazy: <iframe>이 요소가 보일 때까지 로드를 지연시켜
• eager: <iframe>은 보이는지 여부에 상관없이 즉시 로드돼

문법:

    
      loading="상태"
    
  

사용 예시:

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

장점:

• 성능 최적화: 지연 로딩은 로드되는 데이터 양을 줄이고 페이지 로드 시간을 단축시켜
• 리소스 사용 감소: 사용자가 실제로 보고 사용하는 요소만 로드할 수 있도록 해줘