[HTML] 내장 콘텐츠 - iframe, canvas

 

▶ <iframe>

• 다른 HTML 페이지를 현재 페이지에 삽입해 중첩된 브라우저 컨텍스트(프레임)를 표시.
  - 하나의 페이지에는 기본적으로 브라우저가 가지는 컨텍스트라는 개념이 있는데, 한 페이지 안에 다른 페이지를 삽입해 페이지가 중첩되기 때문에 브라우저 컨텍스트가 중첩되었다고 표현하는 것.

• 일반적으로 브라우저를 통해 볼 수 있는 사이트의 페이지는 하나지만, <iframe>을 통해 사이트의 페이지 안에 또 다른 사이트 페이지를 넣어 활용할 수 있다는 것.

• Youtube 등의 동영상 콘텐츠를 가져와 삽입 시 활용되는 경우가 많음.

• 속성
  - name
    : 프레임의 이름 명시. 페이지에 여러 <iframe>이 들어가는 경우 name 속성을 고유하게 설정하는 것을 권장.
  - src
    : 포함할 문서의 URL 명시.
  - width
    : 프레임의 가로 너비.
  - height
    : 프레임의 세로 너비.
  - allowfullscreen
    : 전체 화면 모드 사용 여부. Boolean 값.
  - frameborder
    : 프레임 테두리 사용 여부. 0, 1 값을 가짐. 기본값은 1.
  - sandbox
    : 보안을 위한 읽기 전용으로 삽입. 

  - <iframe>은 외부의 페이지에서 가져와 삽입하기 때문에 보안적인 측면에 문제가 생길 수 있음. 보안에 취약하다는 단점이 존재함.

  - sandbox 속성 사용 시 보안에서 자유로워질 수 있음.

  - sandbox 사용 시 보안 측면에서는 강력해지지만 페이지 내에서 사용하는 입력 양식이나 Javascript 기능 등이 작동하지 않을 수도 있으며, 보안상 일부분을 막기 때문에 페이지 일부가 온전하게 표시되지 않는 경우도 있음.

  - sandbox를 통해 일단 다 막아주기는 하되, 허용되는 걸 몇 가지 설정 가능.

  - sandbox 속성 값

    - boolean / allow-form: 양식 제출 가능
    - allow-scripts: 스크립트 실행 가능
    - allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능.

 

<iframe> 사용 예시

 

▶ <canvas>

• Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 렌더링될 범위를 지정하는 용도로 사용.

• 속성
  - width: 캔버스의 가로 너비
  - height: 캔버스의 세로 너비

• <canvas> 영역에는 Javascript를 통해 그림을 그림. HTML과 CSS로는 그리지 않음.

<canvas> 사용 예시