본문 바로가기

html5

[HTML5] 시멘틱(Semantic) 구조의 이해 HTML5에 들어서 몇가지 시멘틱(Semantic) 태그(tag)가 등장했는데 이들 태그는 해당 영역이 웹페이지에서 어떠한 역활을 수행하는지를 알려주는 역활을 합니다. 제목 내용~~~~ 다른 내용~~~ ~~~~~~~ ▶ 몇가지 시멘틱 태그를 사용한 예제 실제 위 내용을 웹브라우저(Web Browser)에서 살펴보면 시멘틱 태그를 사용하든 안하든 보여지는건 같다는것을 알 수 있습니다. 시멘틱 태그는 사용자에게 보여주기 위해서라기 보다는 태그가 사용된 각 영역이 정확히 어떠한 역활을 하고 있는지를 알려주기위한 용도입니다. 이렇게 하면 검색엔진등에서 웹페이지의 데이터를 수집할때 좀도 효휼적으로 동작하는것이 가능해 지겠죠. 뿐만 아니라 문서의 각영역을 구분하기 위한 다른 용도로도 사용될 수 있을 것입니다. 아래.. 더보기
[HTML5] source 1. source 사용 ▶ 오디오나 비디오 파일의 경우 브라우저 마다 재생할 수 있는 파일형식이 다르므로 이에 대응하기 위해 audio태그나 video태그에 source태그를 사용하여 재생할 수 있는 여러 파일 형태를 제공하도록 합니다. 위 예제에서 audio태그는 처음에 mp3 파일을 재생할 수 없는 경우 대신 ogg를 재생할 수 있도록 합니다. 대부분의 경우 mp3와 ogg를 제공하면 거의 모든 브라우저에서 음악을 재생할 수 있습니다. 2. source 속성 (1) type 이 속성이 값으로는 파일타입을 지정합니다. 예를 들어 mp3의 경우 audio/mp3 와 같이 지정하면 됩니다. 이 속성을 지정해 놓으면 브라우저에서는 파일을 실제 로드하지 않고도 지정된 형식을 통해 자신이 재생할 수 있는 파일인.. 더보기
[CSS3] 스프라이트 이미지(sprite image) 활용 스프라이트(sprite) 이미지(image)란 아래의 경우처럼 여러 이미지(image)를 한곳에 모아놓은 형태를 말합니다. ▶ 마리오(mario) 관련 스프라이트(sprite) 웹(web)에서 불러와야 하는 이미지(image)가 여러개인 경우 그 만큼의 요청을 해야 하지만 스프라이트(sprite) 이미지(image)를 사용하면 한번 요청으로 여러 이미지(image)를 한번에 받아오는 이점을 갖게 됩니다. 포토샵(photoshop) 등의 툴(tool)등을 사용하여 직접 스프라이트(sprite)를 만들 수도 있으나 아래와 같은 사이트(site)를 이용하면 간단하게 스프라이트(sprite)를 생성할 수 있습니다. http://csssprites.com/ 예제에서는 세개의 이미지(image)를 사용하여 아래와 .. 더보기
[HTML5] track (video 자막) 1. track 사용 ▶ track tag는 video tag를 통해 영상을 재생할때 자막을 보여줄 수 있도록 하는 tag입니다. track tag를 통해 자막을 보여주려면 아래와 같은 format으로 이루어진 자막 file을 제공해야 합니다. 1 00:00:000,000 --> 00:00:05,000 안녕하세요. 2 00:00:07,000 --> 00:00:10,000 반갑습니다. 첫번째 행의 숫자는 자막번호를 의미하며 두번째 시간은 자막을 표시할 시간입니다. 세번째 행에 실제 보여줄 자막을 넣고 마지막 4번째 행에 빈줄을 하나 추가하는 형식으로 자막을 만들면 됩니다. 여러 언어로된 자막을 제공하는 경우 해당 언어별로 track tag를 다중적으로 사용할 수 있습니다. 자막 file의 확장자는 srt .. 더보기
[HTML / HTML5] label 1. label 사용 이름을 입력하세요. ▶ input 태그로 데이터를 입력받을 때 해당 input 태그에 대한 설명을 label태그를 통해 붙여줍니다. 2. label 속성 (1) for 어떤 input 요소를 대상으로 하는지를 알려주기 위해 해당 input의 id를 지정합니다. 이렇게 하면 사용자가 label을 클릭하는등의 선택동작만으로 해당 input에 포커스를 자동으로 맞춰줄 수 있습니다. 더보기
[HTML5] header, nav, aside, section, article, footer (구조태그) HTML5 에서 헤더구조에 사용되는 태그는 다음과 같습니다. 1. header 헤더의 전체적인 구조를 나타냅니다. 헤더는 header로 시작해 header로 끝납니다. 2. hgroup 헤더에서 사이트의 제목이나 슬로건이 담겨지는 부분입니다. 3. nav 사이트의 메뉴를 이루는 부분입니다. 메뉴는 사이트의 전체메뉴이거나 특정한 상황에서만 보여지는 메뉴일 수 있으며 필요하다면 header안에서 2개 이상의 nav요소가 사용될 수 있습니다. 4. section 이 태그안에는 화면에 보여일 웹페이지의 주요 컨텐츠를 담아둡니다. 일종의 본문에 해당합니다. 5. article section 안에서 주제별로 구분되는 본문을 배치합니다. 6. aside 화면의 좌, 우측에 보여지는 컨텐츠를 포함하는 영역입니다. 7... 더보기
[HTML / HTML5] span 1. span 사용안녕하세요. 우리나라 대한민국 반갑습니다.▶ inline 형태로 위치하도록 합니다. 이는 화면 특정 너비 전체가 아닌 해당 영역만큼의 공간만 차지함을 의미합니다. 더보기
[HTML5] video (비디오) 1. video 사용▶지정된 mp4 file을 재생합니다. 표준 tag만 사용하면 browser마다 player의 모양새가 틀릴 수 있으며 HTML5를 지원하지 않는 browser 에서는 동작하지 않을 수도 있습니다. 대신 video.js plug-in(http://videojs.com)을 사용하면 이 문제를 일부 해결할 수 있습니다. 사용방법은 우선 head사이에 아래 두줄의 tag를 추가하고 video tag에서 다음과 같이 class와 data-setup을 지정해 두기만 하면 됩니다.다만 HTML5를 지원하지 않는 경우에는 flash로 대체됩니다. 따라서 flash를 사용할 수 없는 일부 smart phone이나 tablet 등의 mobile기기에서는 작동되지 않을 수 있습니다.(대신 HTML5가 .. 더보기