서버에 파일을 업로드, 올리기 위한 방법을 알아보려합니다. 만약 올릴 파일의 개수가 한개가 아닌 다수의 파일인 경우 어떻게해야 복수 파일 업로드가 가능한지 함께 알아보도록 하겠습니다.이와 함께 복수 파일의 경우 드래그앤드랍 방식의 인터페이스를 구현한다면 사용자가 더욱 편하게 업로드를 수행할 수 있을 것입니다. 만약 드래그를 구현하기 위해서 생각할 부분도 함께 알아보겠습니다. 우선 파일을 서버에 올리기위해서 화면 앞단에서느 무엇을 해야할까요?# 다수의 파일 한번에 업로드하기 위한 방법 아래에서는 파일을 웹페이지에 선택하는 것부터 서버와 통신하는 것까지 자세하게 알아보겠습니다. ! 파일 첨부가 가능한 태그와 업로드에 필요한 속성은?우리는 파일 첨부를 하기 위하여 input 태그를 사용할 것입니다. 일반적인 t
Last Modified : 2020-09-10 17:36:55
HTML을 사용하여 맨 처음 문서를 작성할 때 하는 몇 가지 중 가장 먼저 문자 인코딩(언어셋) 선언이 필요합니다. 아래는 html에서 문자 인코딩(Encoding)은 무엇이고 어떻게 선언하며 사용하는지 정리한 내용입니다.# HTML 웹페이지 문서에 문자 인코딩 설정하기웹페이지를 생성한 소스를 들여보보면 가장 먼저 <head> 그리고 <body> 태그를 볼 수 있습니다. <body>태그 바로 위에 <head> 태그가 위치하는데 문자 인코딩 설정은 바로 <head> 내부의 <meta> 태그 안에 작성하게됩니다. 여기서 <meta>는 여기에는 작성한 또는 작성 할 웹페이지의 여러 메타 정보를 담고 있게됩니다. 이들 정보들은 웹브라우저에 다양한 정보를 전달하는데 현재 웹사이트 방문자(사용자)에게 보여지게 될 내
Last Modified : 2019-08-06 22:00:05HTML5의 Video태그에서 m3u8 포맷이 재생되지 않는 경우가 크롬에서 발생될 수 있습니다. 이 경우 해결방법은 무엇일까요?원인은 크롬 및 기타 디바이스 환경에서 HLS를 완전히 지원하지 않기 때문에 발생합니다. 이 경우 브라우저를 다른 것으로(Ex. Edge) 바꾸거나 HLS를 지원하는 iOS, Safari 등으로 바꾸면 해결될 수 있습니다. 만약 반드시 해당 환경에서 지원이 필요하다면 Flash를 서포트하는 별도의 어플리케이션을 설치하거나 Javascript를 사용하여 HLS를 지원하게 해주는 서드파티 js를 설치해주는 방법으로도 해결이 가능합니다.hdsJSvideoJS...또 다른 원인으로 Video 태그의 Source 타입이 맞지 않을 수도 있으니 아래의 type을 확인하는 것도 필요합니다.ty
Last Modified : 2017-04-21 14:12:40
html5의 가장 큰 특징 중 하나가 바로 Canvas API에 의한 그래픽 구현의 기능 및 성능 향상을 빼놓을 수 없습니다. 게다가 canvas 태그를 사용해 2d 또는 3d 이미지의 구현 역시 가능하죠. canvas 태그는 자바스크립트를 함께 사용해야 하며 다양한 도형을 그릴 수 있다. 아래는 canvas 태그를 사용한 사각형을 그리는 예제를 통해 canvas 태그를 사용하는 방법에 대하여 익혀보겠습니다.# 캔버스 태그를 사용한 사각형 그리기먼저 예제를 사용하여 알아봅니다. 아래는 canvas 예제를 알아보기 위해 사용하는 html 및 css 코드입니다.@ canvas.html<canvas id="cv"> Sorry. Your browser is not support canvas element.</ca
Last Modified : 2018-07-25 13:37:17아래는 HTML5의 Video 태그의 사용 방법과 예제 등 다양한 내용을 정리하였습니다.# Video 태그는?미디어 파일인 비디오나 오디오 등을 재생하기 위해서 HTML5부터 새롭게 추가된 API가 바로 Video 그리고 Audio입니다. 이 둘은 실제로 거의 비슷한 메소드와, 프로퍼티를 가지고 있습니다. 여기서는 Video 태그에 대하여 알아봅니다.! Video 태그의 특징은?video 태그는 다양한 포맷을 지원하며 비디오 영상을 쉽고 간단하게 재생할 수 있습니다. video 태그를 사용해 다양한 브라우저 및 환경에서 재생 가능합니다. Video 태그를 사용하는 방법은 간단합니다. 아래와 같이 적용합니다. 만약 a.mp4라는 파일을 재생한다면 아래와 같이 두 가지 방법을 사용합니다.<video src="a
Last Modified : 2020-11-26 15:09:02
HTML5의 가장 큰 특징 중 하나인 Canvas(캔버스)! Canvas에 그려진 도형(Shape)에 클릭 이벤트를 추가하려고 합니다. 어떻게하면 가능할까요? 아래에서 알아보세요.! 캔버스 내부 도형에 클릭 이벤트를 추가하는 것은 불가능먼저 캔버스 내부 도형에 직접 이벤트를 추가하는 것은 어렵습니다... 즉 캔버스 내부에 원을 그렸다면 그 원에 이벤트를 직접 걸 수 없습니다. 그 이유는 DOM에 추가된 노드와 다르기 때문에 캔버스 도형은 그려지고 보이는 역말만 수행하기 때문입니다. 물론 방법이 존재합니다. 이는 아래에 자세히 적도록 하겠습니다.# 캔버스 도형에 클릭 이벤트 추가하려면?위에 설명한 것처럼 도형에 직접 이벤트를 추가할 수 없지만 캔버스 태그는 이벤트를 발생할 수 있습니다. 이를 사용하는 방법으로
Last Modified : 2018-06-02 16:58:52
HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.# Canvas 태그에 투명 효과(opacity) 적용하는 방법이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha에 숫자값을 적용하면 됩니다.context.globalAlpha = 0.5;매우 간단합니다. 위와 같이 숫자를 적용하며 0.5는 50%의 투명도
Last Modified : 2019-08-25 21:02:13HTML5의 새로운 API, CANVAS는 웹 어플리케이션에 새로운 가능성을 열어주었습니다. 데스크탑, 모바일 앱에 버금가는 게임 등을 만들 수 있게해주었지요.아래는 이런 기능을 구현하기위해 필요한 canvas에 그려진 shape, 도형을 이동시키는 방법에 대하여 알아보겠습니다.# canvas 태그에 도형 그리고 이동시키기얼마 전 올린 포스팅에서 canvas의 클릭 이벤트를 사용해 도형 등의 오브젝트 이동 방법을 알아보았습니다. 간단한 예제였지만 이때 오브젝트를 이동하기 위해서 캔버스를 지우는 작업이 필요했지요...! 이동시 캔버스를 지우고 다시 그리는 작업이 반드시 필요한가특정 오브젝트를 camvas에 그리고 이를 이동시키는 방법으로 전체를 지우거나 해당 영역을 지우고 다시 그리는 방법이 필요했습니다. 그
Last Modified : 2018-06-07 10:14:35VueJS에서 url 주소 뒤에 붙는 # 기호를 삭제하는 방법입니다.SPA에서 해쉬뱅인 # 기호를 사용한 주소 형태가 사용됩니다. HTML5가 지원되면서 이를 제거하는 방법이 가능한데 VueJS에서는 어떻게 할까요?# VueJS 해쉬뱅 # 기호 url 제거하기아래와 같이 route 모듈이 설정된 곳에 mode값의 코드를 추가합니다.export default new Router({ mode: 'history', routes: [ ... ] ...}); 이제 라우트 값이 바뀔때마다 주소가 기존과 다르가 변경될 것입니다.변경 전 url ) https://webisfree.com/#/main변경 후 url ) https://webisfree.com/mainhashbang을 사용한다고 특별한 단점은 없습니다
Last Modified : 2018-08-01 18:37:56
HTML에서 입력폼을 만들때 사용하는 form 태그에 대하여 자세히 알아봅니다. 언제 그리고 어떻게 사용할까요?# form 태그 알아보기form 태그는 매우 자주 사용되는 중요한 태그인 만큼 하나하나 자세히 알아보도록 하겠습니다.! form 태그를 사용하는 경우는?먼저 form 태그의 기능은 웹페이지의 방문자에게 특정한 정보를 얻고 이를 서버에 전송할 수 있는 기능을 가지고 있습니다. 그래서 입력을 얻을 수 있는 input이나 textarea 등의 태그 요소를 내부의 자식요소로 가지게 되죠. 일반적으로 아래와 같은 모습입니다.<form> <input type="text" value="" name="title" /> <textarea name="description"></textarea></form>그렇다
Last Modified : 2019-08-22 09:32:51HTML5의 캔버스(Canvas) 태그를 이미지로 만들어 저장하는 방법에 대하여 알아봅니다.# HTML5 캔버스(Canvas) 태그 이미지 및 파일로 저장하는 방법캔버스 태그를 사용하면 캔버스에 그려진 내용을 이미지나 파일로 저장할 수 있습니다. 이는 캔버스 API의 가장 강력한 기능 중 하나입니다. 이때 저장 방법은 아래와 이미지 파일과 base64 중 선택할 수 있습니다.1. Base64로 변환하여 사용하기2. 파일로 변환하여 저장하기현재 보여지는 웹페이지 내부에서만 사용하거나 데이터베이스에 저장하는 용도라면 Base64로 변환하여 사용하는 방법이 좋겠죠. 만약 파일로 변환이 필요하다면 추가적으로 파일 위치 및 파일명 등을 사용해야 합니다. 그럼 하나씩 알아봅니다. 먼저 base64로 변환하는 방법입니다
Last Modified : 2020-04-18 16:05:52미디어 동영상의 포맷이 avi 파일인 경우 이를 브라우저의 video 태그에서 재생할 수 있을까요?일부 브라우저 또는 예전에는 가능한 경우가 있었는데 현재 대부분의 메이저 브라우저의 경우 avi 타입의 재생을 지원하지 않습니다. 이런 이유로 만약 avi 재생이 필요한 경우 아래의 방법을 고려할 수 있습니다.! 지원되는 포맷으로 인코딩하는 방법! 재생가능한 플레이어를 사용하는 방법브라우저 호환성을 고려했을때 가급적 다른 포맷으로 인코딩하는 것이 가장 좋은 방법이라 생각됩니다.
Last Modified : None