▶ <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: 같은 출처(도메인)의 리소스 사용 가능.
▶ <canvas>
-
Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 렌더링될 범위를 지정하는 용도로 사용.
-
속성
- width: 캔버스의 가로 너비
- height: 캔버스의 세로 너비 -
<canvas> 영역에는 Javascript를 통해 그림을 그림. HTML과 CSS로는 그리지 않음.
'HTML, CSS > HTML' 카테고리의 다른 글
[HTML] <noscript> (0) | 2020.08.26 |
---|---|
[HTML] <script> (0) | 2020.08.26 |
[HTML] 멀티미디어(2) - audio, video, figure, figcaption (0) | 2020.08.25 |
[HTML] 멀티미디어(1) - img (0) | 2020.08.24 |
[HTML] 수정 관련 요소 - del, ins (0) | 2020.08.23 |