[HTML] HTML의 모든 것 - (6) Graphics(Canvas, SVG), MultiMedia(video, audio, YouTube)

STUDY/HTML.CSS.JS 2021. 3. 6. 20:24

HTML Canvas Graphics

HTML의 Canvas 요소는 웹 페이지에 그래픽을 그리는 데 사용된다.

<canvas>에 대해 더 많이, 자세히 배우고 싶다면 HTML Canvas Tutorial을 참고!

HTML Canvas란?

<canvas>는 JavaScript를 사용하여 즉석에서 그래픽을 그리는 데 사용된다.

<canvas>는 오직 그래픽만을 위한 컨테이너이다! 그래픽을 실제로 그리기 위해서는 반드시 JavaScript를 이용해야 한다.

Canvas는 경로 그리기, 박스, 원, 텍스트와 이미지 추가하기 등의 기능을 가지고 있다.

Canvas의 기능을 모두 지원하는 브라우저 버전

출처 : https://www.w3schools.com/html/html5_canvas.asp

Canvas Example

Canvas는 HTML 페이지의 직사각형의 공간이다. 기본적으로 canvas는 테두리와 내용이 없다.

Canvas를 눈에 보이게 정의하면 이렇게 된다.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

#Note : 항상 Canvas의 id(script에서 참조를 위한)와 width,height 속성을 정의하도록 하자!

Add a JavaScript

1. Draw a Line

<canvas id="myCanvas" width="200" height="100"
	style="border: 1px solid #d3d3d3;"></canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>

2. Draw a Circle

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

3. Draw a Text

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

Stroke Text

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

4. Draw Linear Gradient

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

//Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</style>

5. Draw Circular Gradient

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

6. Draw Image

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<canvas id="myCanvas" width="250" height="300"style="border:1px solid #d3d3d3;"></canvas>

<script>
function myCanvas() {
	var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10,10);
 }
 <script>

HTML SVG Graphics

SVG는 벡터 기반의 그래픽을 XML 형식으로 정의한다.

SVG에 대해 더 많이, 자세히 배우고 싶다면 SVG Tutorial을 참고!

SVG란?

SVG는 Scalable Vector Graphics의 약자이다.

SVG는 Web용 그래픽을 정의하는 데 사용된다. (W3C의 권장 사항)

<svg> 태그

<svg> 태그는 SVG 그래픽의 컨테이너이다. 경로 그리기, 박스, 텍스트, 그래픽 이미지 등의 메소드를 가지고 있다.

<svg> 의 기능을 모두 지원하는 브라우저 버전

출처 : https://www.w3schools.com/html/html5_svg.asp

SVG Example

1. Circle

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

이외의 example은 이곳을 참고

SVG와 Canvas의 차이점

SVG는 XML에서 2D 그래픽을 표현(설명)하는 언어이다.

Canvas는 JavaScript를 이용해 2D 그래픽을 즉석에서 그린다.

SVG는 XML 기반의 언어이기 때문에 SVG DOM 내에서 모든 element들을 사용할 수 있고, javascript를 추가해 요소들의 이벤트를 처리할 수도 있다. 그리고 SVG는 그린 모양을 object단위로 기억하기 때문에, 만약 SVG object의 속성이 바뀌면 브라우저는 자동으로 모양을 다시 랜더링한다.

Canvas는 픽셀마다 랜더링을 한다. 그래서 canvas에서 한번 그래픽이 그려지면, 브라우저에서 이를 잊어버린다.(따로 기억하지 않음) 만약 위치가 바뀐다면, 그래픽에 포함되어있는 모든 object들을 포함하여 전체 canvas가 다시 그려져야 한다.

Canvas	SVG
- 해상도에 영향을 받는다. - 이벤트 핸들러가 지원되지 않는다. - 텍스트 랜더링 능력이 떨어진다. - 결과 이미지를 .png , .jpg로 저장할 수 있다. - 그래픽 집약적 게임에 적합하다.	- 해상도에 영향을 받지 않는다. - 이벤트 핸들러가 지원된다. - 구글맵과 같이 넓게 랜더링을 해야하는 애플리케이션에 적합하다. - 복잡하다면 랜더링 속도가 느리다. - 게임에 적합하지 않다.

HTML Multimedia

Multimedia란?

Multimedia는 다양한 포맷이 존재한다. 이미지나 음악, 소리, 비디오, 영화, 애니메이션 등과 같이 우리가 보거나 듣는 것 대부분이 Multimedia라고 할 수 있다. 웹 페이지는 다른 type과 format을 가진 Multimedia 요소들을 포함한다.

Multimedia 요소들은 미디어 파일들을 저장하는데, 이러한 파일들이 어떤 타입인지 확인하는 가장 쉬운 방법은 파일의 확장자를 확인하는 것이다. Multimedia 파일들은 .wav, .mp3, .mp4, .avi 등의 확장자를 갖는다.

비디오 포맷은 mpg, avi, wmv, mov 등 수많은 종류의 확장자가 존재한다. 하지만 HTML 표준에서 지원하는 비디오 포맷은 MP4, WebM, and Ogg 뿐이다.

오디오 포맷도 다양한 포맷이 존재하지만, HTML 표준에서 지원하는 포맷은 MP3,WAV,Ogg 뿐이다.

Video

<video>태그는 웹 페이지에서 비디오를 보여줄때 사용된다.

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<video>의 control 속성은 재생, 일시정지, 볼륨 조절과 같이 비디오를 컨트롤을 위한 기능들을 추가하는 속성이다.

이미지를 웹 페이지에 추가할 때와 마찬가지로, 영상의 height와 width를 지정해주는 것이 바람직하다.

source 속성을 통해 브라우저가 선택할 수 있는 대체 비디오 파일을 지정할 수 있다. 브라우저는 먼저 인식된 포맷을 사용하게 된다. (위의 예시에서 브라우저는 mp4 포맷을 사용한다.)

<video> 태그 사이의 'Your browser...' 이라고 적혀있는 말들은 사용자의 브라우저가 비디오를 지원하지 않는 경우에만 보여진다.

autoplay 속성을 통해, 비디오가 자동으로 재생되게 선택할 수 있다.

<video width="320" height="240" autoplay>

autoplay 속성 뒤에 muted 속성을 추가하면, 음소거 된 채로 자동으로 영상이 재생된다.

(크롬 브라우저는 대부분의 경우, 자동재생을 허용하지 않지만, muted autoplay는 항상 허용한다.)

<video width="320" height="240" autoplay muted>

Audio

<audio>태그는 웹페이지에서 오디오 파일을 재생할 때 사용된다.

<audio controls>
	<source src="horse.ogg" type="audio/ogg">
  	<source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<audio>의 control 속성은 재생, 일시정지, 볼륨 조절과 같이 오디오를컨트롤을 위한 기능들을 추가하는 속성이다.

source 속성을 통해 브라우저가 선택할 수 있는 대체 오디오파일을 지정할 수 있다. 브라우저는 먼저 인식된 포맷을 사용하게 된다.

<audio> 태그 사이의 'Your browser...' 이라고 적혀있는 말들은 사용자의 브라우저가 오디오를 지원하지 않는 경우에만 보여진다.

video 태그와 동일하게 audio 태그도 autoplay와 autoplay muted 속성을 사용할 수 있다. 역시 크롬에서는 대부분의 경우 autoplay는 허용하지 않고, muted autoplay는 항상 허용한다.

YouTube Videos

HTML 내에 비디오를 넣는 가장 쉬운 방법은 유튜브를 사용하는 것이다.

다양한 형식의 포맷에 맞게 비디오를 전환하는 것은 어렵고, 오래걸리는 일이다. 비디오 포맷에 구애받지 않고 비디오를 웹페이지에 올리는 가장 쉬운 방식은, 웹 페이지 내에서 유튜브가 동영상을 재생하도록 하는 것이다!

유튜브는 비디오가 재생되거나 저장되는 ID를 보여준다. 우리는 이 아이디를 HTML 코드에 사용할 수 있다.

HTML에서 유튜브 비디오를 재생하는 방법은 아래와 같다.

1. 유튜브에 비디오를 업로드하고, 비디오의 id를 기억해둔다.

2. 웹 페이지에서 <iframe>을 정의하고 너비와 높이를 지정한 후, src속성에 비디오 URL을 지정한다.

3. URL에 필요한 파라미터들을 추가한다.

비디오와 오디오를 웹 페이지에 추가할 때처럼, 유튜브 영상 또한 자동재생 & 음소거한 후 자동재생을 지정할 수 있다.

조금 다른 점은, 이러한 설정을 속성이 아닌 파라미터를 통해 지정해야한다는 점이다.

아래와 같이 'mute=1' , 'autoplay=1'을 파라미터에 추가해주면 된다.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

유튜브 영상을 반복 재생하는 것도 간단하게 파라미터 추가를 통해 지정할 수 있다.

아래와 같이 'loop=1'로 설정하면 영상이 무한 반복 재생되고, 따로 설정하지 않으면 한번만 재생된다. (default)

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

영상의 재생, 일시정지, 볼륨 등을 조절하는 컨트롤러를 보이지 않게 할 수도 있다.

'controls=0'으로 설정할 수 있고, 컨트롤러가 보여지는것이 default 값이다.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

HTML API

1.HTML Geolocation API

HTML Geolocation API는 사용자의 위치를 찾는데 사용되는 API이다. (API가 궁금하다면 이곳 참고)

사용자의 위치는 프라이버시를 침해할 수 있기에, 사용자가 승인하지 않는다면 사용할 수 없다.

자세한 사용법은 이곳을 참고하자.

2. Drag & Drop API

HTML 에서는 요소들은 드래그앤 드랍할 수 있다.

자세한 사용법은 이곳을 참고하자.

3. Web Storage API

Web Storage을 이용해 웹 애플리케이션은 사용자의 브라우저 내에 데이터를 local로 저장할 수 있다.

HTML5 이전에 애플리케이션은 데이터를 저장하려면 COOKIE를 사용해야 했다. (모든 서버에 대한 요청들도 ..)

Web Storage는 쿠키에 비해 더 안전하고, 더 많은 양의 데이터(최소 5MB)를 local에 저장할 수 있다.

그리고 정보가 서버로 전달되지 않기 때문에 웹사이트의 성능에 영향을 주지 않는다.

Web Storage는 도메인이나 프로토콜에 따라 다르다. 하나의 origin의 여러 페이지는 동일한 데이터를 저장하고 접속할 수 있다.

자세한 사용법은 이곳을 참고하자.

4. Web Workers API

일반적인 HTML 페이지에서는 스크립트를 실행하면 스크립트가 완료될때까지 페이지가 응답하지 않는다.

Web Worker는 페이지 성능에 영향을 주지 않고, 백그라운드에서 실행되는 javaScript이다. Web Worker가 백그라운드에서 실행되는 동안 클릭, 항목 선택 등 원하는 작업을 계속할 수 있다.

자세한 사용법은 이곳을 참고하자.

5. SSE API

SSE(Server-Sent Event)를 사용하면 웹 페이지가 서버에서 업데이트를 가져올 수 있다.

SSE는 서버에서 업데이트가 발생할 경우 자동으로 웹 페이지에 업데이트를 가져온다. 이전에도 가능한 일이었지만, 과거에는 웹 페이지가 업데이트가 있는지 물어봐야했다. 반면 SSE를 이용하면 자동으로 업데이트를 가져온다!

예) 페이스북이나 트위터의 업데이트 등

자세한 사용법은 이곳을 참고하자.

이 글은 w3shcool을 참고하여 작성하였습니다.

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

[CSS] CSS의 모든 것 - (1) CSS, Selector,Background, Border, Margin (0)	2021.03.08
[HTML] HTML의 모든 것 - (마지막) HTML 스타일와 코딩 가이드 (0)	2021.03.06
[HTML] HTML의 모든 것 - (5) Form (0)	2021.03.05
[HTML] HTML의 모든 것 - (4)Semantic element, Encoding, URL, HTML vs XHTML (0)	2021.03.05
[HTML] HTML의 모든 것 - (3) class, id, iframes, javascript, file path, layout (0)	2021.03.04

ABOUT ME

크크의 개발 블로그 크크의 개발 블로그

HTML Canvas Graphics

HTML Canvas란?

Canvas의 기능을 모두 지원하는 브라우저 버전

Canvas Example

Add a JavaScript

HTML SVG Graphics

SVG란?

<svg> 태그

<svg> 의 기능을 모두 지원하는 브라우저 버전

SVG Example

SVG와 Canvas의 차이점

HTML Multimedia

Multimedia란?

Video

Audio

YouTube Videos

HTML API

1.HTML Geolocation API

2. Drag & Drop API

3. Web Storage API

4. Web Workers API

5. SSE API

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

HTML Canvas Graphics

HTML Canvas란?

Canvas의 기능을 모두 지원하는 브라우저 버전

Canvas Example

Add a JavaScript

HTML SVG Graphics

SVG란?

<svg> 태그

<svg> 의 기능을 모두 지원하는 브라우저 버전

SVG Example

SVG와 Canvas의 차이점

HTML Multimedia

Multimedia란?

Video

Audio

YouTube Videos

HTML API

1.HTML Geolocation API

2. Drag & Drop API

3. Web Storage API

4. Web Workers API

5. SSE API

'STUDY > HTML.CSS.JS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바