204_자바스크립트에서 캔버스 요소 색칠하기/선 그리기 [적용] 캔버스에 도형을 생성하고 싶을 때 [문법1] 메소드 의미 반환 context.fillStyle 색상과 스타일 문자열 [문법2] 메소드 의미 반환 context.strokeRect(x, y, 폭, 높이) 직사각형 영역 경계 그리기 없음 context.fillRect(x, y, 폭, 높이) 직사각형 영역 색칠하기 없음 [내용] 색칠되는 부분은 도형을 둘러싼 영역이다. fillStyle 속성으로 색상을 지정하고 fillRect()로 색이 들어간 직사각형을 생성한다. fillRect()를 실행하기 전 fillStyle 속성의 설정이 먼저 필요하므로 순서에 주의하자. HTML index.html JavaScript main.js // 캔버스 요소 참..

203_자바스크립트에서 캔버스 사용하기 [적용] 비트맵 기반의 도형을 스크립트에서 사용하고 싶을 때 [문법] 메소드 의미 반환 canvas.getContext('2d') 캔버스에서 명령 가져오기 콘텍스트 context.fillRect(x, y, 폭, 높이) 직사각형 영역 칠하기 없음 [내용] 캔버스(Canvas) 요소는 그래픽 관련 기능을 한다. SVG는 벡터 그래픽을 다루지만, 캔버스 요소는 비트맵 그래픽을 다룬다. 비트맵은 SVG와 달리 확대, 축소 시 사이즈를 적절히 조절하지 않으면 화질 저하가 발생한다. SVG는 일러스트 등에 적합하지만, 이미지 가곡 등의 작업은 캔버스 요소가 유용하다. 캔버스 요소 사용을 위해서는 HTML에 캔버스 요소를 배치한 뒤, 자바스크립트로 요소의 id 값을 참조하고 그..

202_자바스크립트에서 SVG 그래픽 다운로드하기 [적용] SVG로 작성한 그래픽을 다운로드하고 싶을 때 [내용] SVG 요소는 자바스크립트를 사용해 파일로 다운받을 수 있으며, 이미지 생성 서비스 등에 활용할 수 있다. document.querySelector()로 SVG 요소를 참조하고 outerHTML 속성으로 문자열을 가져온다. 브라우저에 따라 다운로드 방법이 다르므로 각각 적절한 데이터 형식으로 변환한다. 샘플을 통해 SVG 요소의 다운로드 방법을 확인해 보자. HTML index.html 다운로드 JavaScript main.js // 다운로드 버튼 클릭 시 작업 document.querySelector('#btnSave').addEventListener('click', saveFile); /..

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..