HTML5 기능 감지 - 수동 보통은 Modernizr를 많이 애용하는데, 외부의 라이브러리 사용이 원활치 않을때는 직접 HTML5 기능의 감지를 구현해야 할 때가 있을 겁니다. 그때를 대비해서 기록으로 남겨둡니다. Element DOM 객체를 사용한 감지 canvas 기능 감지 canvas 엘리먼트의 context를 가져와서 부정 연산자 두번을 이용한 트릭으로 Boolean값으로 변화시켜서 return function supports_canvas() { return.. 웹개발론/크로스브라우징 2015.04.17 00:50
[HTML5] 9장 추가된 DOM과 자바스크립트 MIME 타입이나 프로토콜에 웹 애플리케이션 연결 HTML5부터 window.navigator 객체에 추가된 registerProtocolHandler() 메서드와 registerContentHandler() 메서드를 사용하면 임의의 프로토콜이나 MIME 타입에 대해 웹 애플리케이션을 연결할 수 있다. 예를 들어 'fax'라는 프로토콜을 팩스 웹 서비스에 연결해두면 이후 사용자가 'fax:'로 시작하는 URL에 접근할 때 팩스 웹 서비스가 처리를.. 웹코딩/HTML 2013.02.12 00:00
[HTML5] 8장 그밖의 추가된 속성 HTML5에서는 기존의 태그들에 유용한 속성들을 추가시키거나 삭제시켰는데 그 중에 몇가지를 살펴봅니다. IFRAME <iframe> 요소는 콘텐츠 삽입에 많이 이용되는데, 새로운 속성 추가로 인해 보안성을 높였다. sandbox 속성 새로 추가된 sandbox 속성을 iframe에 지정하면 해당 프레임에 삽입되는 페이지에 다음과 같은 제한을 둘 수 있다. 실제 존재하지 않는 도메인(오리진)에 속한 것으로 간주함. 따라서 자신이 소속.. 웹코딩/HTML 2013.02.11 00:00
[HTML5] 7장 추가된 글로벌 속성 HTML5에서 새로 추가된 속성들 중에 애플리케이션 제작에 편리한 몇가지 기능을 구현해 놓았습니다. CONTENTEDITABLE 이 속성을 가지고 있는 요소들의 콘텐츠를 사용자가 편집할 수 있다. 또 선택하고 편집할 수 있는 콘텐츠 영역에 대해 수정한 내용을 반영할 수 있다. <section contenteditable="true"> <h1>박스 텍스트 수정</h1> &.. 웹코딩/HTML 2013.02.10 00:00
[HTML5] 6-2장 멀티미디어 태그 HTML5에서 추가된 멀티미디어 요소인 video와 audio, 그리고 대체요소(fallback)로 사용될 embed에 대해서 알아봅니다. 현재에도 웹에서 동영상을 시청하는데 지장이 없다고 생각할 수 있습니다만 그 안을 유심히 들여다보면 각종 플러그인과 ActiveX라는 불편함과 보안위협에 노출되어 있습니다. 그런 이유로 브라우저 자체에서 동영상을 재생하게끔 멀티미디어 태그가 필요하게 된 것이죠. VIDEO <video> 관련 사.. 웹코딩/HTML 2013.02.09 23:30
[HTML5] 6-1장 새로운 태그 새로운 태그가 생겼지만 해당 태그들은 구조만 이룰뿐, 기능은 제공되지 않기에 자바스크립트나 스타일시트로 구현은 따로 적용해야 합니다. 간단한 기능들은 브라우저 자체에서 제공했으면 하는 바램이 생기네요. 의미를 부여받은 특별한 텍스트 조금 더 디테일하고 많이 사용될 일종의 템플릿과도 같은 의미있는 요소가 많이 추가되었다. dialog 대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 <dt>에 말하는 사람 <dd>에 내용을 작.. 웹코딩/HTML 2013.02.09 00:00
[HTML5] 5장 문서 구조 HTML5에서는 눈에는 보이지 않지만 문서의 구조를 나누는 요소들이 존재합니다. 이를 활용하여 마치 책의 목차와 같은 순서를 만들 수 있어 한 눈에 구조를 파악할 수 있게 됩니다. 섹션화 콘텐츠(sectioning contents) 해당하는 요소 : <article>, <aside>, <section>, <nav> 헤더와 푸터 범위내에서 콘텐츠를 그룹화하는 모든 섹션형 태그, 모든 섹션형 콘텐츠는 헤더.. 웹코딩/HTML 2013.02.08 00:00
[HTML5] 4-2장 HTML5 기본 템플릿 HTML5의 템플릿은 이전에 비해 매우 간소화 되었습니다. 기존의 방식이 <div>에 의존하여 콘텐츠를 구조화 시켰다면 HTML5에서는 구조화를 위한 요소들이 등장하여 좀 더 시멘틱한 웹이 가능해졌습니다. <!DOCTYPE html> <!-- 문서타입 --> <html lang="ko"> <!-- 휴먼랭귀지 --> <head> <meta charset="utf-8"> <.. 웹코딩/HTML 2013.02.07 01:00
[HTML5] 4-1장 구조를 위한 태그 HTML5에서는 구조를 위한 태그가 새로 생겼습니다. 기존에는 <div>를 이용해서 내용적으로 구분하였지만, 사실 이는 기계가 이해할 수 있는 구조가 아니였지요. 아래에서 소개하는 구조 태그들을 사용하는 웹 문서들이 늘어난다면 다양한 애플리케이션이 등장할 수 있을겁니다. SECTION <section> 요소는 테마별로 연관된 콘텐츠를 한데 묶어서 더 큰 논리적인 단위를 형성할 수 있게 도와주며 하나의 페이지 안에서 주제가 .. 웹코딩/HTML 2013.02.07 00:00
[HTML5] 3장 HTML5 소개 및 특징 HTML5는 최신의 마크업 언어이며, 새로운 기능과 기존 기능에 대한 개선사항, 그리고 스크립팅 기반 API를 포함하고 있습니다. HTML5 특징 하위 호환성 : HTML5는 기존의 모든 문서 타입을 래핑한다(HTML4와 XHTML1.0 양쪽의 모든 유효한 요소들을 포함하고 있다). 간단한 문법 : 시멘틱 마크업을 위한 의미적 요소들이 강화되었으며, 생산성이 향상된 코딩을 지원하며, 문서의 크기가 작아졌다. text/html MIME 타입을 사.. 웹코딩/HTML 2013.02.06 00:00
[HTML5] 2장 XHTML과 HTML5의 차이점 1. 웹 브라우저마다 기존의 HTML을 해석하는 방식의 차이에서 오는 오류와 혼란을 피하기 위하여 구현되는 방식을 단순화 하였다. 즉 <!DOCTYPE html> 이라는 DOCTYPE을 가지게 되면 모든 브라우저에서 각 요소와 속성이 정확하게 동작하게끔 처리한다. 2. 새로운 HTML 태그들이 도입되었다. 웹사이트의 레이아웃을 담당하는 <header>, <nav>, <footer> 같은 태그를 포함해서.. 웹코딩/HTML 2013.02.05 00:00
[HTML5] 1장 HTML5를 시작하기 전에... HTML5에 대한 궁금증 BEST 3 하나, 지금 당장 HTML5를 사용해도 되나요? 결론부터 말하자면, "그렇다" 이다. 하지만 HTML5를 사용할때 몇가지 주의점이 있다. 그것들을 알아보기 위해 이번 장을 준비했다. 둘, 현재 브라우저들은 HTML5를 얼마나 지원하나요? 각각의 브라우저마다 그 지원여부가 다르다. 이를 확인하기 위해서는 http://caniuse.com 을 방문하여 살펴보길 추천한다. 물론 대부분의 디자이너, 개발자들이 관심.. 웹코딩/HTML 2013.02.04 00:00
문자셋 UTF-8과 EUC-KR 우리나라의 경우 웹페이지에 사용되는 문자셋은 크게 euc-kr 과 utf-8 정도가 있습니다. EUC-KR은 2350개의 한글문자, 한국에서 통용되는 한자 그리고 영문을 표현할 수 있습니다. 문서를 작성할때 한정된 범위내의 문자만을 사용할 경우 사용합니다. 한글 한 자를 2Byte로 처리합니다. UTF-8은 유니코드입니다. 유니코드는 전세계의 모든 문자를 표현할 수 있는 인코딩입니다. 한글이라고는 구경해 본 적도 없는 세계 방방 곳곳의 어느 컴퓨터에.. 웹코딩/HTML 2012.11.26 03:20
