CLOSE SEARCH
POSTS IN CATEGORY: Web

HTML5 video tag

HTML5의 video 태그는 플러그인의 도움없이 비디오 파일을 재생하는 기능을 제공합니다. 이 태그는 audio 태그와 사용방법이 유사합니다.

가장 기본적인 사용법은 src 속성을 통해 재생할 비디오의 URL을 지정해 주는 것입니다.

HTML5 audio tag

HTML5를 지원하는 브라우저는 플러그인의 도움없이 오디오 파일을 재생할 수 있습니다. HTML5 자체적으로 mp3, ogg, wav 등과 같이 다양한 포멧를 지원하지만, 실제로 지원되는 포멧은 브라우저에 따라 달라집니다.

가장 기본적인 사용법은 src 속성을 통해 재생할 파일의 URL을 지정해 주는 것입니다.

웹 디자인에 활용할 수 있는 Placeholder 이미지 서비스

웹 프로젝트를 진행하면서 레이아웃을 구성할 때, 디자인이 완성되지 않았다면 임시 이미지로 그 자리를 채우게 됩니다. 이러한 이미지는 포토샵이나 다른 이미지 편집툴을 이용해서 하나하나 만들어서 사용할 필요가 없습니다. 이번 글에서 소개하는 두개의 사이트는 임시 이미지를 손쉽게 생성해주는 서비스를 제공합니다.

http://placehold.it

http://www.dummyimage.com

Javascript Encoding & Decoding

웹에서는 유니코드 문자를 그대로 사용할 경우 문제가 발생할 수 있으므로 적절히 인코딩해 주어야 합니다. 이러한 인코딩 방식을 퍼센트 인코딩(percent-encoding)이라고 합니다. 자바스크립트에서는 인코딩과 디코딩을 위한 내장함수를 제공합니다.

WebApps 페이지 크기 제어

웹앱에서 페이지의 크기를 명시적으로 바꾸지 않을 경우 980px로 가정한다.
대부분의 경우 페이지 내용에 맞게 크기를 변경해 주는 것이 좋다.
HTML의 head 영역에 아래의 메타태그를 추가하면된다.

이 메타태그는 사파이 외의 다른 브라우저에서는 무시된다.

WebApps 페이지에서의 CSS 분기

IE의 경우 앞의 두 줄을 인식하지 못하기 때문에 3~5행과 같은 코드를 추가해서 IE용 CSS를 추가해야 한다. DAMN IE~!

Canvas on HTML5 – Text

텍스트를 출력하는 예제

 

Canvas 에서는 속이 채워진 텍스트를 출력하거나 외곽선 텍스트를 출력할 수도 있다. 그리고 이전에 설정된 fillStyle이나 strokeStyle의 영향을 받는다.

텍스트 정렬에 사용할 수 있는 값들은 아래와 같다.

  • textAlign : left / start, center, right / end
  • textBaseline : top, middle, bottom, hanging, alphabetic, ideographic

그리고 maxWidth 속성을 지정하면 전체 텍스트가 설정한 너비내에서 축소/확대되어 출력된다.

Canvas on HTML5 – Shadow Effect & Transform

Canvas에서 도형이나 선과 같은 그리기 개체에 그림자 효과를 추가할 수 있다. 그림자의 위치, 색상, 블러효과를 설정할 수 있다.

 

또한, 그래픽 컨텍스트의 변환 기능을 이용해서 그리기 개체들의 좌표변환, 확대/축소, 회전 등의 작업을 수행할 수 있다.