201_자바스크립트에서 SVG 요소 애니메이션 효과 주기 [적용] 시간 변화에 따라 SVG 요소에 변화를 주고 싶을 때 [내용] SVG는 DOM의 형식 구조를 따르므로 일정 시간마다 자바스크립트로 DOM을 조작하면 애니메이션 효과를 줄 수 있다. 예를 들어, 원의 색상을 서서히 빨간색으로 변하게 하는 효과는 SVG 요소의 속성값을 가져와 조금씩 변경하면 된다. 이때는 requestAnimationFrame()을 사용한다. HTML index.html JavaScript main.js const myCircle = document.querySelector('#myCircle'); let time = 0; animate(); function animate() { // 시간 변화 time += 0.1; // ..

200_자바스크립트에서 SVG 요소 마우스로 다루기 [적용] SVG 요소의 스타일을 변경하고 싶을 때 [내용] 마우스에 반응하는 SVG 요소의 생성은 DOM에 대한 이벤트 설정을 통해 가능하다. 예를 들어 클릭 이벤트의 확인은 document.querySelector()로 SVG 요소를 참조하고, addEventListener()로 클릭 이벤트를 감시한다. HTML index.html JavaScript main.js const circle = document.querySelector('#myCircle'); circle.addEventListener('click', (event) => { alert('클릭 이벤트가 발행하였습니다.'); }); 실행결과 원을 클릭하면 알림창이 표시된다. 참조 : 실무에 ..

199_자바스크립트에서 SVG 요소 스타일 변경하기 [적용] 유저 조작에 반응하는 그래픽을 넣고 싶을 때 [문법] 메소드 의미 반환 요소.setAttribute(속성, 값) 요소의 속성 설정 없음 [내용] SVG 요소는 document.querySelector() 등을 사용한 참조와 setAttribute()의 속성값 변경을 통해 스타일을 변경할 수 있다. SVG는 HTML의 DOM과 같은 방식으로 사용할 수 있다. HTML index.html JavaScript main.js const circle1 = document.querySelector('#myCircle'); circle1.setAttribute('r', '100'); // 반직름 지정 circle1.setAttribute('fill', '#..

198_자바스크립트에서 SVG 요소를 동적으로 추가하기 [적용] 자바스크립트로 외부의 데이터를 참조하여 그래픽 작업을 하고 싶을 때 [문법] 메소드 의미 반환 document.createElementNS ('http://www.w3.org/2000/svg', SVG요소명) SVG 요소 생성 SVG 요소 [내용] HTML index.html document.createElement() 가 아닌 document.createElementNS()를 사용해 SVG 요소를 자바스크립트로 생성할 수 있다. 비슷한 메소드의 이름이지만, SVG 요소는 끝에 NS(이름공간, Name Space)가 붙어 있다. HTML과 SVG는 엄밀히 이름공간이 다르므로 'http://www.w3.org/200/svg'를 지정하지 않으면..

197_자바스크립트에서 SVG 사용하기 [적용] 확대와 축소 시에도 화질이 유지되는 이미지를 사용하고 싶을 때 다양한 스마트 기기에서 반응형 그래픽을 사용하고 싶을 때 [내용] SVG는 Scalable Vector Graphics의 약자로 벡터 이미지를 표현한다. 이미지 확대와 축소에 강해 반응형 웹 사이트 대응에 유리하다. SVG는 DOM으로 조작이 가능하므로 자바스크립트와 함께 사용하여 인터랙션 디자인(Interaction Design)에도 사용할 수 있다. 웹에서 사용하는 이미지를 크게 나누면 래스터(Raster)와 벡터(Vector)가 있다. 래스터는 점의 집합체로 구성되어 있으며, 대표적인 포맷은 JPEG

196_자바스크립트에서 카메라 기능 사용하기 [적용] 웹 카메라를 사용해 사이트 내 유저의 카메라 화면을 표시하고 싶을 때 [내용] 웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용한다. 웹 카메라는 getUserMdeia()를 사용한다. video 요소 srcObject 속성에 웹 카메라 스트림을 지정하고, vidoe 요소에는 autoplay 속성을 지정한다. autoplay 속성을 지정하지 않으면 브라우저에 따라 화면의 표시가 지연되는 경우가 있다. HTML index.html JavaScript main.js let stream; async function loadAndPlay() { const video = document.getElementById('myV..

195_자바스크립트에서 스크립트로 영상 제어하기 [적용] 영상의 재생을 관리하고 싶을 때 [문법] 메소드 의미 반환 play() 재생 Promise pause() 일시정지 없음 [내용] video 요소의 play()와 pause()로 영상의 재생과 정지가 가능하다. HTML index.html 재생 정지 자바스크립트로 HTML의 video 요소를 참조한다. JavaScript main.js const video = document.querySelector('#myVideo'); play()를 사용해 영상을 재생한다. JavaScript main.js video.play(); 일시정지는 pause()를 사용하며, 영상 재생 바가 해당 위치에 멈춘다. 추후 해당 위치에서 다시 재생이 가능하다. JavaScr..

194_자바스크립트에서 영상 로딩하기 [적용] 웹 사이트에 영상을 넣고 싶을 때 웹 사이트에 영상으로 효과를 넣고 싶을 때 [문법] 속성 의미 타입 src 리소스 지정 문자열 controls 컨트롤 바 표시 없음 autoplay 자동 재생 없음 loop 반복 없음 preload 영상 미리 불러오기 문자열 playsinline 인라인 재생 지정 없음 [내용] video 태그를 사용해 영상을 로딩할 수 있다. HTML에 video 요소를 배치하고, src 속성에 파일의 주소를 지정한다. sidth와 height 속성으로 비디오의 가로, 새로 길이를 지정하며, 길이 지정이 없으면 영상의 사이즈에 맞춰 표시된다. HTML index.html controls 속성을 사용하여 비디오 재생, 정지 버튼을 사용할 수 ..

193_자바스크립트에서 Web Audio API 사용하기 [적용] 모바일 웹 사이트에서 사운드를 동시에 재생하고 싶을 때 오디오 파형으로 사운드 비주얼라이저를 만들고 싶을 때 오디오 데이터를 서버에 전송하고 싶을 때 [내용] Web Audio API는 사운드를 다루는 고급 기능이다. audio 요소에 비해 기능이 많고 제양이 적다. 예를 들면 사운드 파형의 데이터를 가져와 비주얼라이저를 만들거나, 모바일 브라우저에서 여러 BGM과 효과음을 동시에 재생할 수 있다. 다만 고급 기능이므로 난이도가 있고 코드가 길어진다. 사운드 파일을 로딩하여 재생하는 예시를 확인해 보자. loadAndPlay() 함수를 사용해 사운드를 재생한다. HTML index.html 재생 정지 JavaScript main.js lo..

192_자바스크립트에서 사운드 볼륨 조절하기 [적용] 스크립트로 사운드의 볼륨을 조절하고 싶을 때 음소거 기능을 사용하고 싶을 때 [문법] 속성 의미 타입 volume 볼륨 값 숫자 muted 음소거 상태 여부 진리값 [내용] volume 속성을 사용해 사운드의 볼륨을 확인하거나 설정을 조정할 수 있는데, 그 범위는 0.0(음소거) ~ 1.0(최대 볼륨) 내에서 설정이 가능하다. muted 속성은 음소거 상태의 확인과 설정이 가능하다. volume 속성은 볼륨 크기의 세세한 조절이 가능하지만, muted 속성은 음소거 기능만 작동한다. JavaScript main.js const audio = document.querySelector('#myAudio'); audio.volume = 1.0; JavaSc..