DOM
-
HTML 오디어 / 비디오 DOM 참조 | W3CDOM/HTML5 2021. 2. 24. 11:44
HTML 오디어 / 비디오 메소드 Method Description addTextTrack() 오디오 / 비디오에 새 텍스트 트랙을 추가합니다. canPlayType() 브라우저가 지정된 오디오 / 비디오 유형을 재생할 수 있는지 확인합니다. load() 오디오 / 비디오 요소를 다시 로드합니다. play() 오디오 / 비디오 재생 시작 pause() 현재 재생중인 오디오 / 비디오를 일시 중지합니다. HTML 오디오 / 비디오 속성 Property Description audioTracks 사용 가능한 오디오 트랙을 나타내는 AudioTrackList 객체를 반환합니다. autoplay 오디오 / 비디오가 로드되는 즉시 재생을 시작할지 여부를 설정하거나 반환합니다. buffered 오디오 / 비디오의 ..
-
1-2. 도형 그리기 - Canvas API | MDNDOM/Canvas 2020. 7. 28. 21:59
이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치, 곡선 등 의 기본적인 도형을 그릴수 있는지 익히실 수 있을 것 입니다. 캔버스 위에 물체를 그릴 때에는 path를 사용하는것이 필수적이므로 우리는 이것이 어떻게 사용되는지 볼 것입니다. 그리드 드로잉을 시작 하기에 앞서, 캔버스 그리드 혹은 좌표공간 (coordinate space) 에 대하여 이야기 해보겠습니다. 이전 페이지에서 이야기 했던 HTML 골격(skeleton)는 가로 세로 각각 150 픽셀의 캔버스 요소를 가지고 있습니다. 오른쪽에 보시면, 캔버스와 기본 그리드가 놓인것을 보실 수 있습니다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같습니다. 이 그..
-
1-1. 기본 사용 - Canvas API | MDNDOM/Canvas 2020. 5. 6. 19:12
[출처 : https://developer.mozilla.org] 요소 태그 는 src 및 alt 속성이 없다는 점만 제외하면 요소와 비슷합니다. width와 height 두 속성만 있습니다. 이 속성은 선택사항이며 DOM 프로퍼티를 사용하여 설정 가능합니다. width와 height을 지정하지 않으면 기본 크기는 가로 300px, 세로 150px. CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다. ※ 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 속성에서 width 및 height 속성을 명시적으로 지정 실제 캔버스 위에 그리는 것에는 영향을 끼치..
-
CSS 변환과 애니메이션 - 인터랙티브 웹 개발 | 1분코딩DOM/CSS3 2020. 4. 20. 20:56
1. Transform # CSS Transform은 하드웨어 가속을 이용해서 성능이 좋다 : 어떤 태그를 absolute 후 left로 이동하는 것 보다 translateX()를 이용하는 것이 훨씬 부드럽게 움직인다. * 하드웨어 가속을 이용한다는 것은 GPU를 사용한다. # CSS Transform은 브라우저가 지오메트릭을 다시 편성하는 과정(Reflow)에서 CSS 대상만 크기나 위치를 계산해서 렌더링하기 때문에 연산할 것도 적고 성능도 더 좋다. 2. Transition : 값이 수치로 표현되는 속성이 값의 변화(수치로)가 있을 때 변화과정을 애니메이션으로 만들어준다. # transition-property : 속성 # transition-duration : 재생시간 # transition-del..