섹션 1: 강의소개
- Html Dom과 Canvas 그리고 SVG
- SVG는 벡터기반, Canvas는 픽셀 기반
- SVG는 일러스트, Canvas는 포토샵 즉, 렌더링 방식이 다름
- SVG는 크기를 키워도 깨지지 않음.
- Canvas의 장점은 성능이 좋음
- 수많은 개체들, 요소들을 렌더링 할 때 성능이 좋음
- SVG가 1000개 10000개가 되면 성능이 떨어지지만, Canvas는 10000개 이상이 되어도 성능이 좋음
- 2D, 3D(WebGL)
- SVG
- 정확한 오브젝트 영역의 이벤트 탐지 가능(별모양일 경우, 별모양을 정확히 클릭해야 이벤트 탐지)
- 일반적인 웹사이트(input, images) → DOM
- 차트, Data visualization → SVG
- 3D, Object가 엄청많은데 한 화면에서 보여줘야 할 때 → Canvas
- 웹 인터렉티브 예제 사이트 소개 첫번째!
- 인터렉티브한 웹사이트는 Canvas를 가장 아래에 깔아주고, DOM을 그 위에 올려서 작업함.
- 애플의 웹사이트는 Canvas를 사용하지 않음 → 비디오를 사용함
- 즉, 사용자와 인터렉티브한 요소는 넣을 수 없음