HTML5 기능 감지 - 수동 보통은 Modernizr를 많이 애용하는데, 외부의 라이브러리 사용이 원활치 않을때는 직접 HTML5 기능의 감지를 구현해야 할 때가 있을 겁니다. 그때를 대비해서 기록으로 남겨둡니다. Element DOM 객체를 사용한 감지 canvas 기능 감지 canvas 엘리먼트의 context를 가져와서 부정 연산자 두번을 이용한 트릭으로 Boolean값으로 변화시켜서 return function supports_canvas() { return !!document.createElement('canvas').getContext; } canvas 텍스트 기능 감지 canvas 엘리먼트의 '2d' context를 가져와서 fillText라는 함수가 있는지여부를 Boolean으로 return function suppo.. 웹개발론/크로스브라우징 2015.04.17 00:50
[HTML5] 9장 추가된 DOM과 자바스크립트 MIME 타입이나 프로토콜에 웹 애플리케이션 연결 HTML5부터 window.navigator 객체에 추가된 registerProtocolHandler() 메서드와 registerContentHandler() 메서드를 사용하면 임의의 프로토콜이나 MIME 타입에 대해 웹 애플리케이션을 연결할 수 있다. 예를 들어 'fax'라는 프로토콜을 팩스 웹 서비스에 연결해두면 이후 사용자가 'fax:'로 시작하는 URL에 접근할 때 팩스 웹 서비스가 처리를 대신하게 된다. //첫 번째 인수에는 웹 애플리케이션에 연결하고 싶은 URL 스키마를 지정 window.navigator.registerProtocolHandler(scheme, url, title) //MIME 타입 지정시에 대,소문자 구별하지 않아도 된다 w.. 웹코딩/HTML 2013.02.12 00:00
[HTML5] 8장 그밖의 추가된 속성 HTML5에서는 기존의 태그들에 유용한 속성들을 추가시키거나 삭제시켰는데 그 중에 몇가지를 살펴봅니다. IFRAME 요소는 콘텐츠 삽입에 많이 이용되는데, 새로운 속성 추가로 인해 보안성을 높였다. sandbox 속성 새로 추가된 sandbox 속성을 iframe에 지정하면 해당 프레임에 삽입되는 페이지에 다음과 같은 제한을 둘 수 있다. 실제 존재하지 않는 도메인(오리진)에 속한 것으로 간주함. 따라서 자신이 소속된 도메인과도(allow-scripts에 의해 실행이 가능해져도) 통신할 수 없음 플러그인 실행금지 자바스크립트 사용금지 폼 요소에 의한 페이지 호출금지 위의 제한이 너무 엄격하여 iframe 안의 페이지가 동작하지 않을때는 sandbox 속성에 다음과 같은 값을 지정하여 샌드박스 제한을 완화.. 웹코딩/HTML 2013.02.11 00:00
[HTML5] 7장 추가된 글로벌 속성 HTML5에서 새로 추가된 속성들 중에 애플리케이션 제작에 편리한 몇가지 기능을 구현해 놓았습니다. CONTENTEDITABLE 이 속성을 가지고 있는 요소들의 콘텐츠를 사용자가 편집할 수 있다. 또 선택하고 편집할 수 있는 콘텐츠 영역에 대해 수정한 내용을 반영할 수 있다. 박스 텍스트 수정 브라우저에서 수정해 보세요 활용 이 속성을 지정하면 하위에 있는 모든 요소들에 영향을 미친다. 브라우저에서 수정해 보세요 DOM속성에서는 contentEditable이라고 표현하며 isContentEditable로 해당요소가 편집 가능한지 확인할 수 있다. 또 자바스크립트 사용해서 document.designMode='on' 이라고 지정을 해서 문서 전체가 편집 가능하게 만들수 있다. 마지막으로 사용자가 선택한(활.. 웹코딩/HTML 2013.02.10 00:00
[HTML5] 6-2장 멀티미디어 태그 HTML5에서 추가된 멀티미디어 요소인 video와 audio, 그리고 대체요소(fallback)로 사용될 embed에 대해서 알아봅니다. 현재에도 웹에서 동영상을 시청하는데 지장이 없다고 생각할 수 있습니다만 그 안을 유심히 들여다보면 각종 플러그인과 ActiveX라는 불편함과 보안위협에 노출되어 있습니다. 그런 이유로 브라우저 자체에서 동영상을 재생하게끔 멀티미디어 태그가 필요하게 된 것이죠. VIDEO 관련 사양을 알아보기에 앞서 그 이해를 높여봅시다. 비디오 파일 포멧 종류와 이해 'AVI 파일'이나 'MP4 파일'이 비디오 파일이라고 생각하겠지만 실제로 'AVI'나 'MP4'는 비디오 컨테이너 포맷이다. ZIP 파일이 종류에 상관없이 파일을 담을 수 있는 것과 마찬가지로 비디오 컨테이너 포맷은 .. 웹코딩/HTML 2013.02.09 23:30
[HTML5] 6-1장 새로운 태그 새로운 태그가 생겼지만 해당 태그들은 구조만 이룰뿐, 기능은 제공되지 않기에 자바스크립트나 스타일시트로 구현은 따로 적용해야 합니다. 간단한 기능들은 브라우저 자체에서 제공했으면 하는 바램이 생기네요. 의미를 부여받은 특별한 텍스트 조금 더 디테일하고 많이 사용될 일종의 템플릿과도 같은 의미있는 요소가 많이 추가되었다. dialog 대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 에 말하는 사람 에 내용을 작성한다. 나 아!, 이런 오늘 작업한 걸 저장하지 않고 종료했네~ 수정 이런, stupid! figure 이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며.. 웹코딩/HTML 2013.02.09 00:00
[HTML5] 5장 문서 구조 HTML5에서는 눈에는 보이지 않지만 문서의 구조를 나누는 요소들이 존재합니다. 이를 활용하여 마치 책의 목차와 같은 순서를 만들 수 있어 한 눈에 구조를 파악할 수 있게 됩니다. 섹션화 콘텐츠(sectioning contents) 해당하는 요소 : , , , 헤더와 푸터 범위내에서 콘텐츠를 그룹화하는 모든 섹션형 태그, 모든 섹션형 콘텐츠는 헤더와 아웃라인을 가지게 된다. 구조를 나누는 의미 요소 섹션 제목 섹션에는 각각 하나의 제목을 지정할 수 있으며 섹션 내부에 제목이 2개 이상이 있을 경우, 암묵적으로 해당 섹션이 나누어 지거나 하위 섹션을 만든다. HTML5에서 크게 바뀐것 중 하나가 섹션이 다르면 같은 수준의 제목을 사용할 수 있다는 것이다. hgroup hgroup 요소는 HTML5 사양에서.. 웹코딩/HTML 2013.02.08 00:00
[HTML5] 4-2장 HTML5 기본 템플릿 HTML5의 템플릿은 이전에 비해 매우 간소화 되었습니다. 기존의 방식이 에 의존하여 콘텐츠를 구조화 시켰다면 HTML5에서는 구조화를 위한 요소들이 등장하여 좀 더 시멘틱한 웹이 가능해졌습니다. WebDir navigation 메뉴1 메뉴2 콘텐츠 제목 콘텐츠 내용 트위터 트위터내용 © unclepapa / unclepapa@mail.com http-equiv="X-UA-Compatible"에 대한 설명은 아래 링크로 대신합니다. [HTML/XHTML] - X-UA-Compatible 위 메타 태그를 간단히 설명하자면 IE에서만 해석되며 IE=edge는 최신 버전으로 렌더링하라는 것입니다. name="viewport"는 스마트폰과 같은 다양한 플랫폼에서 보여지게 될 화면의 크기를 조정하는 태그입.. 웹코딩/HTML 2013.02.07 01:00
[HTML5] 4-1장 구조를 위한 태그 HTML5에서는 구조를 위한 태그가 새로 생겼습니다. 기존에는 를 이용해서 내용적으로 구분하였지만, 사실 이는 기계가 이해할 수 있는 구조가 아니였지요. 아래에서 소개하는 구조 태그들을 사용하는 웹 문서들이 늘어난다면 다양한 애플리케이션이 등장할 수 있을겁니다. SECTION 요소는 테마별로 연관된 콘텐츠를 한데 묶어서 더 큰 논리적인 단위를 형성할 수 있게 도와주며 하나의 페이지 안에서 주제가 다른 영역을 구분짓거나 하나의 글을 부분으로 나누기도 한다. 주로 제목과(h) 함께 사용한다. 스타일링이나 스크립트를 위해서 감싸는 요소가 필요하다면 문서 구조상 특별한 의미가 없는 를 사용해야 한다. 항상 section은 연관된 콘텐츠를 위해 사용하도록 하자. 오늘의 할일 아침에 할일 밥먹고 운동하기 점심에 할.. 웹코딩/HTML 2013.02.07 00:00
[HTML5] 3장 HTML5 소개 및 특징 HTML5는 최신의 마크업 언어이며, 새로운 기능과 기존 기능에 대한 개선사항, 그리고 스크립팅 기반 API를 포함하고 있습니다. HTML5 특징 하위 호환성 : HTML5는 기존의 모든 문서 타입을 래핑한다(HTML4와 XHTML1.0 양쪽의 모든 유효한 요소들을 포함하고 있다). 간단한 문법 : 시멘틱 마크업을 위한 의미적 요소들이 강화되었으며, 생산성이 향상된 코딩을 지원하며, 문서의 크기가 작아졌다. text/html MIME 타입을 사용하면서도 SVG 및 MathML을 인라인으로 활용할 수 있는 기능을 제공한다. 새로운 웹 폼 속성들을 이용하여 폼 검증과 디자인이 간소화 되었다. 오류를 쉽게 처리할 수 있게끔 몇 가지 기본 원칙을 바탕으로 설계돼 있다. 플러그인 없이도 비디오와 오디오를 비롯한 .. 웹코딩/HTML 2013.02.06 00:00
[HTML5] 2장 XHTML과 HTML5의 차이점 1. 웹 브라우저마다 기존의 HTML을 해석하는 방식의 차이에서 오는 오류와 혼란을 피하기 위하여 구현되는 방식을 단순화 하였다. 즉 이라는 DOCTYPE을 가지게 되면 모든 브라우저에서 각 요소와 속성이 정확하게 동작하게끔 처리한다. 2. 새로운 HTML 태그들이 도입되었다. 웹사이트의 레이아웃을 담당하는 , , 같은 태그를 포함해서 기존에 와 같은 방식으로 처리했던 번거로움을 제거 했다. 3. HTML5에서 가장 편리하게 바뀐 것이 웹애플리케이션 개발용 요소들이 추가된 점이다. 특히 web form에 다양한 속성이 추가되었다.(현재 브라우저마다 지원여부가 다릅니다.) 4. XHTML1.0과 HTML5 문서 내부 태그 서술방식에서 아래와 같은 차이점이 있다. 구분 XHTML 1.0 HTML 5 태그 소.. 웹코딩/HTML 2013.02.05 00:00
[HTML5] 1장 HTML5를 시작하기 전에... HTML5에 대한 궁금증 BEST 3 하나, 지금 당장 HTML5를 사용해도 되나요? 결론부터 말하자면, "그렇다" 이다. 하지만 HTML5를 사용할때 몇가지 주의점이 있다. 그것들을 알아보기 위해 이번 장을 준비했다. 둘, 현재 브라우저들은 HTML5를 얼마나 지원하나요? 각각의 브라우저마다 그 지원여부가 다르다. 이를 확인하기 위해서는 http://caniuse.com 을 방문하여 살펴보길 추천한다. 물론 대부분의 디자이너, 개발자들이 관심있어 하는 부분들은 앞다투어 Modern Brower(파이어폭스, 크롬, 오페라, 사파리, IE9이상)에서 지원되고 있으니 미리 경계의 날을 세울 필요는 없다. 셋, HTML5는 사용하기 어렵나요? HTML5는 기존의 HTML과 XHTML의 장점을 흡수하며 일정한 .. 웹코딩/HTML 2013.02.04 00:00
문자셋 UTF-8과 EUC-KR 우리나라의 경우 웹페이지에 사용되는 문자셋은 크게 euc-kr 과 utf-8 정도가 있습니다. EUC-KR은 2350개의 한글문자, 한국에서 통용되는 한자 그리고 영문을 표현할 수 있습니다. 문서를 작성할때 한정된 범위내의 문자만을 사용할 경우 사용합니다. 한글 한 자를 2Byte로 처리합니다. UTF-8은 유니코드입니다. 유니코드는 전세계의 모든 문자를 표현할 수 있는 인코딩입니다. 한글이라고는 구경해 본 적도 없는 세계 방방 곳곳의 어느 컴퓨터에서도 우리가 작성한 한글을 문제 없이 표현할 수 있다는 것입니다. 다만 한글 한 자를 3Byte로 처리하기 때문에 문서가 다소 커질수가 있으나, 공백이나 영문 한 자는 1Byte로 처리하는 유연함을 보여 줍니다. 문자셋을 UTF-8로 작성한다면 HTML 파일을.. 웹코딩/HTML 2012.11.26 03:20
