더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 12개의 일치하는 문서를 찾았습니다.
- js
[HTML5] 캔버스 영역을 자바스크립트를 사용하여 base64로 저장하기
HTML5의 캔버스(Canvas) 태그를 이미지로 만들어 저장하는 방법에 대하여 알아봅니다.# HTML5 캔버스(Canvas) 태그 이미지 및 파일로 저장하는 방법캔버스 태그를 사용하면 캔버스에 그려진 내용을 이미지나 파일로 저장할 수 있습니다. 이는 캔버스 API의 가장 강력한 기능 중 하나입니다. 이때 저장 방법은 아래와 이미지 파일과 base64 중 선택할 수 있습니다.1. Base64로 변환하여 사용하기2. 파일로 변환하여 저장하기현재 보여지는 웹페이지 내부에서만 사용하거나 데이터베이스에 저장하는 용도라면 Base64로 변환하여 사용하는 방법이 좋겠죠. 만약...
Last Modified : 2020-04-18 16:05:52
Created : 2020-03-28 17:57:23 - webdevetc
[HTML5] Video 태그 사용 방법 및 예제 정리
아래는 HTML5의 Video 태그의 사용 방법과 예제 등 다양한 내용을 정리하였습니다.# Video 태그는?미디어 파일인 비디오나 오디오 등을 재생하기 위해서 HTML5부터 새롭게 추가된 API가 바로 Video 그리고 Audio입니다. 이 둘은 실제로 거의 비슷한 메소드와, 프로퍼티를 가지고 있습니다. 여기서는 Video 태그에 대하여 알아봅니다.! Video 태그의 특징은?video 태그는 다양한 포맷을 지원하며 비디오 영상을 쉽고 간단하게 재생할 수 있습니다. video 태그를 사용해 다양한 브라우저 및 환경에서 재생 가능합니다. Video 태그를 사...
Last Modified : 2020-11-26 15:09:02
Created : 2020-02-12 23:40:56 
htmlHTML form태그를 사용하여 입력폼 만들기 및 예제
HTML에서 입력폼을 만들때 사용하는 form 태그에 대하여 자세히 알아봅니다. 언제 그리고 어떻게 사용할까요?# form 태그 알아보기form 태그는 매우 자주 사용되는 중요한 태그인 만큼 하나하나 자세히 알아보도록 하겠습니다.! form 태그를 사용하는 경우는?먼저 form 태그의 기능은 웹페이지의 방문자에게 특정한 정보를 얻고 이를 서버에 전송할 수 있는 기능을 가지고 있습니다. 그래서 입력을 얻을 수 있는 input이나 textarea 등의 태그 요소를 내부의 자식요소로 가지게 되죠. 일반적으로 아래와 같은 모습입니다.<form> <...
Last Modified : 2019-08-22 09:32:51
Created : 2019-02-01 12:51:58
js[HTML5] Canvas 태그에 투명도 opacity 적용하기
HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.# Canvas 태그에 투명 효과(opacity) 적용하는 방법이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha...
Last Modified : 2019-08-25 21:02:13
Created : 2019-01-26 06:18:42- vuejs
VueJS 라우팅 설정시 # 기호 제거하기, hashbang
VueJS에서 url 주소 뒤에 붙는 # 기호를 삭제하는 방법입니다.SPA에서 해쉬뱅인 # 기호를 사용한 주소 형태가 사용됩니다. HTML5가 지원되면서 이를 제거하는 방법이 가능한데 VueJS에서는 어떻게 할까요?# VueJS 해쉬뱅 # 기호 url 제거하기아래와 같이 route 모듈이 설정된 곳에 mode값의 코드를 추가합니다.export default new Router({ mode: 'history', routes: [ ... ] ...}); 이제 라우트 값이 바뀔때마다 주소가 기존과 다르가 변경될 것입니다.변경 전 url ...
Last Modified : 2018-08-01 18:37:56
Created : 2018-07-31 16:09:12 - webdevetc
CANVAS 태그에 오브젝트, 도형 이동하는 방법
HTML5의 새로운 API, CANVAS는 웹 어플리케이션에 새로운 가능성을 열어주었습니다. 데스크탑, 모바일 앱에 버금가는 게임 등을 만들 수 있게해주었지요.아래는 이런 기능을 구현하기위해 필요한 canvas에 그려진 shape, 도형을 이동시키는 방법에 대하여 알아보겠습니다.# canvas 태그에 도형 그리고 이동시키기얼마 전 올린 포스팅에서 canvas의 클릭 이벤트를 사용해 도형 등의 오브젝트 이동 방법을 알아보았습니다. 간단한 예제였지만 이때 오브젝트를 이동하기 위해서 캔버스를 지우는 작업이 필요했지요...! 이동시 캔버스를 지우고 다시 그리는 작업이 반드시...
Last Modified : 2018-06-07 10:14:35
Created : 2018-06-06 22:30:46 
webdevetc[HTML5] Canvas 요소의 도형에 클릭 이벤트 사용하는 방법
HTML5의 가장 큰 특징 중 하나인 Canvas(캔버스)! Canvas에 그려진 도형(Shape)에 클릭 이벤트를 추가하려고 합니다. 어떻게하면 가능할까요? 아래에서 알아보세요.! 캔버스 내부 도형에 클릭 이벤트를 추가하는 것은 불가능먼저 캔버스 내부 도형에 직접 이벤트를 추가하는 것은 어렵습니다... 즉 캔버스 내부에 원을 그렸다면 그 원에 이벤트를 직접 걸 수 없습니다. 그 이유는 DOM에 추가된 노드와 다르기 때문에 캔버스 도형은 그려지고 보이는 역말만 수행하기 때문입니다. 물론 방법이 존재합니다. 이는 아래에 자세히 적도록 하겠습니다.# 캔버스 도형...
Last Modified : 2018-06-02 16:58:52
Created : 2018-05-31 20:18:34- webdev
html5에서 avi 포맷 비디오를 재생하는 방법은?
미디어 동영상의 포맷이 avi 파일인 경우 이를 브라우저의 video 태그에서 재생할 수 있을까요?일부 브라우저 또는 예전에는 가능한 경우가 있었는데 현재 대부분의 메이저 브라우저의 경우 avi 타입의 재생을 지원하지 않습니다. 이런 이유로 만약 avi 재생이 필요한 경우 아래의 방법을 고려할 수 있습니다.! 지원되는 포맷으로 인코딩하는 방법! 재생가능한 플레이어를 사용하는 방법브라우저 호환성을 고려했을때 가급적 다른 포맷으로 인코딩하는 것이 가장 좋은 방법이라 생각됩니다....
Last Modified :
Created : 2017-08-02 02:02:03 - etc
HTML5의 Video태그에서 m3u8 포맷이 재생되지 않는 경우
HTML5의 Video태그에서 m3u8 포맷이 재생되지 않는 경우가 크롬에서 발생될 수 있습니다. 이 경우 해결방법은 무엇일까요?원인은 크롬 및 기타 디바이스 환경에서 HLS를 완전히 지원하지 않기 때문에 발생합니다. 이 경우 브라우저를 다른 것으로(Ex. Edge) 바꾸거나 HLS를 지원하는 iOS, Safari 등으로 바꾸면 해결될 수 있습니다. 만약 반드시 해당 환경에서 지원이 필요하다면 Flash를 서포트하는 별도의 어플리케이션을 설치하거나 Javascript를 사용하여 HLS를 지원하게 해주는 서드파티 js를 설치해주는 방법으로도 해결이 가능합니다.hdsJS...
Last Modified : 2017-04-21 14:12:40
Created : 2017-04-21 14:04:16 
htmlmeta charset, 메타태그에서 문자 인코딩 설정하는 방법
HTML을 사용하여 맨 처음 문서를 작성할 때 하는 몇 가지 중 가장 먼저 문자 인코딩(언어셋) 선언이 필요합니다. 아래는 html에서 문자 인코딩(Encoding)은 무엇이고 어떻게 선언하며 사용하는지 정리한 내용입니다.# HTML 웹페이지 문서에 문자 인코딩 설정하기웹페이지를 생성한 소스를 들여보보면 가장 먼저 <head> 그리고 <body> 태그를 볼 수 있습니다. <body>태그 바로 위에 <head> 태그가 위치하는데 문자 인코딩 설정은 바로 <head> 내부의 <meta> ...
Last Modified : 2019-08-06 22:00:05
Created : 2015-12-16 23:18:30