지구정복

[HTML] HTML 기초4 본문

데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js

[HTML] HTML 기초4

eeaarrtthh 2020. 10. 28. 17:33
728x90
반응형

목차

  • 동영상 넣기
  • SVG 도형 만들기

 

ㅁ동영상 넣기

html 문서에 비디오를 넣으려면 <video> 태그를 사용한다.

코드는 아래와 같다.

 

첫 번째 source를 먼저 실행하고 이게 실행이 안되면 두 번째 소스,

두 번째 소스도 실행이 안되면 

Your browser~ 멘트가 띄워진다.

 

 

현재의 결과는 동영상 재생이 되지 않는다.

따라서 video 태그의 속성값 autoplay를 설정한다.

그럼 알아서 재생이 된다. (크롬에서는 autoplay가 되지 않아서 따로 설정을 해야한다.)

 

이제 자동재생말고 사용자가 재생을 컨트롤할 수 있게 만들어본다.

controls 속성을 추가하면된다.

 

 

 

ㅁSVG 도형만들기

svg 태그에 대한 참고자료는 여기를 참고한다.

www.w3schools.com/html/html5_svg.asp

 

HTML SVG

HTML SVG Graphics SVG defines vector-based graphics in XML format. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W3C recommendation The HTML Element The HTML element is a container for SVG graphics

www.w3schools.com

svg 태그는 도형을 만들수 있는 태그이다.

이를 활용해서 그래프도 만들 수 있다.

 

테두리를 그리려면 stroke 와 stroke-width 속성을 추가한다.

 

 

이번에는 사각형을 그려본다.

728x90
반응형

'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글

[CSS] 기초2  (0) 2020.10.29
[CSS] 기초1  (0) 2020.10.29
[HTML] 검색사이트 구현하기(form태그사용)  (0) 2020.10.28
[HTML] HTML기초3  (0) 2020.10.28
[HTML] HTML 기초2  (0) 2020.10.28
Comments