"HTML5에서 기대할 수 있는 것은 무엇인가?"와 같은 HTML5에 관한 기사가 많이 있었습니다. ”, “HTML5는 웹을 어떻게 변화시킬 것인가?” 등이 있지만 웹 개발자가 알아야 할 가장 중요한 것은 HTML5로 지금 무엇을 할 수 있으며 어떻게 사용을 시작해야 하는가입니다. 좋은 소식은 HTML5에서 이미 많은 기능을 사용할 수 있다는 것입니다.
하지만 처음에 한 가지를 이해해야 합니다. 청중을 알아야 합니다. 그렇지 않으면 HTML5를 사용해서는 안됩니다. 귀하의 사이트를 방문하는 대부분의 사람들이 IE6을 사용하고 있다면 HTML5를 사용할 이유가 전혀 없습니다. 반면, 사이트 방문자가 모두 iPhone 및 iPad와 같은 모바일 브라우저를 사용하고 있다면 무엇을 기다리고 계십니까? 지금 시작할 수 있습니다! 잠깐만요, 여기에 몇 가지 지침이 있습니다. 읽은 후 시작해도 너무 늦지 않았습니다.
지금 어떤 HTML5 기능을 사용할 수 있나요?
HTML5 표준은 아직 초안이고 표준 조직에서 논의 중이지만 많은 최신 브라우저에서 중요한 부분이 구현되었습니다. Apple Safari, Google Chrome, Mozilla Firefox, Opera 및 Microsoft IE9는 모두 이미 HTML5의 일부 기능을 지원합니다.
먼저 HTML5 TEST 웹사이트에서 각 브라우저의 점수가 어떻게 되는지 살펴보겠습니다.
*애플 사파리 5.0: 208
* 구글 크롬 5.03: 197
*마이크로소프트 IE7: 12
*마이크로소프트 IE8: 27
*모질라 파이어폭스 3.66: 139
* 오페라 10.6: 159
IE 코어가 아닌 대부분의 주류 브라우저는 HTML5를 잘 지원하며 "HTML5 초안을 사용하는 웹사이트"가 매우 잘 작동하도록 할 수 있다는 것은 분명한 것 같습니다.
처음으로 돌아가서 이제 HTML5 doctype을 사용할 수 있습니다. 이를 사용하지 않을 이유가 없으며 웹 사이트 전체에서 쿼리하고 바꿀 수도 있습니다.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> |
다음과 같이 됩니다:
<!DOCTYPE HTML> <html> |
다음 코드는 더 깔끔하고 간단해 보이지 않나요? 브라우저가 표준을 준수하는 방식으로 웹 페이지를 렌더링하더라도 여전히 그렇게 할 것입니다.
영상에 대해 이야기해보겠습니다. HTML5에 관한 많은 출판물에서는 현재 경쟁사인 Flash, H.264, OGG 및 WebM 등 총 4가지를 언급합니다. 이들 모두는 미래에 표준 형식이 될 수 있으며, 그 중 어느 것도 모든 플랫폼의 모든 브라우저에서 올바르게 재생되지 않을 것입니다. 안타깝게도 브라우저 스폰서는 조만간 이 기능을 준비하지 않은 것 같습니다.
따라서 아직 Video 태그를 적용할 수 있는 단계에는 도달하지 않았음을 알 수 있습니다. 하지만 HTML5 비디오 태그는 형식에 독립적일 것으로 예상해야 합니다. 실제로 비디오에는 여러 소스 태그가 포함될 수 있으므로 이러한 방식으로 작동해야 합니다. 브라우저가 첫 번째 옵션을 지원하지 않으면 두 번째 옵션을 시도한 다음 세 번째, 네 번째, 다섯 번째 옵션을 시도합니다.
이와 같은 상황을 처리하기 위한 HTML은 스크립트와 브라우저 스니핑을 사용하지 않고 웹 기반 비디오를 지원하는 오픈 소스 프로젝트이며 여기에서 찾을 수 있습니다 .
의미론적으로 말하면 HTML5의 큰 변화는 의미가 명확한 태그입니다. 볼 수 있는 변경 사항은 이제 사이트가 다음과 유사한 코드로 채워져 있다는 것입니다.
<div id=”header”> <span class=”nav”> |
HTML5에서는 다음과 같이 표현할 수 있습니다.
<헤더> <탐색> |
의미가 더 명확해졌나요? 물론 이러한 요소의 형식을 지정하려면 CSS [Cascading Style Sheets]를 사용해야 합니다. 하지만 잠깐만요, 어떤 IE 버전도 이러한 태그를 지원하지 않습니다! 이것은 사람들에게 큰 문제입니다! 우리 정말 운이 없는 걸까요? 다행히도 해결책이 있습니다. 다음 코드를 페이지의 HEAD 태그에 붙여넣기만 하면 됩니다.
<!–[IE 9인 경우]> |
HTML5 Shiv는 간단한 발견을 기반으로 한 오픈 소스 프로젝트입니다. 즉, IE에서 DOM 요소를 생성하면 해당 이름을 스타일에 사용할 수 있습니다. 예를 들어, 다음을 사용하는 경우
document.createElement(“foo”) |
DOM 요소를 생성한 다음 현재 페이지에 원하는 수의 foo 태그를 추가할 수 있으며 IE는 해당 태그의 형식을 지정합니다. HTML5 Shiv에는 IE가 인식할 수 없는 일부 HTML5 요소가 포함되어 있으며 하나씩 생성됩니다. 이 방법으로 다음과 같은 HTML5 태그를 사용할 수 있습니다.
| 기사, 섹션, 머리글, 바닥글, 탐색 |
스마트 양식은 HTML5를 더욱 스마트하게 만드는 또 다른 기능입니다. 이메일 주소나 전화번호, 인터넷 주소 등의 유효성을 확인하기 위해 매번 동일한 스크립트를 작성하는 데 지쳤다면 혼자가 아닙니다! 이 모든 귀찮은 작업을 브라우저에 맡기는 데는 이유가 있습니다. 그렇지 않습니까? 정말 그렇습니다.
구문은 다음과 같습니다.
| <입력 유형="이메일"> <입력 유형="url"> <입력 유형="숫자"> <입력 유형="전화"> |
이전 브라우저는 어떻게 되나요? 더 똑똑한 부분: 인식할 수 없는 값이 있는 TYPE 속성을 보면 기본 값인 Text로 요소를 렌더링합니다. 이는 정확히 우리가 기대하는 이전 버전과의 호환성 결과입니다. HTML5를 지원하는 브라우저는 자동으로 이 필드 유형을 확인하지만 적어도 IE9가 대중화될 때까지는 이전 스크립트를 버리지 않는 것이 좋습니다.
이러한 유형의 작업을 지원하는 브라우저가 유효성 검사 이상의 기능을 수행하는지 궁금하다면 iPhone에서 이러한 양식을 사용해 볼 수 있습니다. 양식 변경과 관련된 키보드 유형이 변경되는 것을 볼 수 있습니다. 때로는 숫자, 때로는 영숫자이지만 @ 기호가 추가되고 일부는 key.com을 직접 포함하기도 하며 이것이 바로 이러한 요소가 마술적인 것입니다. 당신이 해야 할 일은 type 속성의 값을 변경하는 것 뿐입니다.
조금 더 똑똑해질 수도 있습니다. 여기에 새로운 속성이 있습니다.
자리 표시자 |
이 값은 단순히 텍스트의 일부를 지정할 수 있는데, 이는 인터넷에서 흔히 볼 수 있는 효과입니다. 이 텍스트는 값이 없을 때 표시되며, 클릭하면 값이 비어 있고, 떠나면 텍스트로 돌아갑니다. 과거에는 Javascript를 사용하여 처리했지만 이제는 브라우저가 이를 처리합니다.
<input type="email" placeholder="귀하의 이메일 주소"> |
지금 바로 사용할 수 있는 HTML5 기능은 무엇인가요?
아직 모든 HTML5 요소를 사용할 준비가 되어 있지는 않습니다. 여러 가지 이유로(IE로 축약되지는 않음) 브라우저 지원이 곧 제공될 예정이며 머지않아 두 가지 요소를 즉시 사용할 수 있게 될 것입니다.
마법의 글꼴, 디자이너라면 누구나 꿈을 갖고 있습니다. 사이트를 방문하는 모든 사람이 디자인에 필요한 글꼴을 설치하기를 바라기 때문입니다. 이를 위해 예전에는 사진, 플래시 등을 활용하는 등 다양한 방법이 있었지만 지금은 그렇습니다. , 그들은 이 권리를 가지고 있으며 방문자가 귀하가 지정한 글꼴을 설치하도록 강제할 수 있습니다. 이것이 CSS3가 지원하는 것입니다: @font-face 속성. Firefox 3.5 이전 버전과 Safari 모바일 버전(iOS 4 이전)은 이 속성을 지원하지 않습니다. 귀하의 사이트에 유사한 방문이 많으면 기다려야 할 수도 있습니다.
그럼에도 불구하고 모든 브라우저가 동일한 글꼴을 사용할 실제 이유는 없습니다. 이 속성을 지원하는 브라우저에 사용자 정의 글꼴을 제공하고 이 속성을 지원하지 않는 브라우저에 대체 글꼴을 제공하려는 경우 현재로서는 http://www.fontsquirrel com/을 사용하는 것도 좋은 방법입니다. 글꼴/생성기는 좋은 곳입니다.
그림자와 둥근 모서리는 많은 디자이너를 행복하게 만드는 요소입니다. 텍스트 그림자, 블록 그림자, 둥근 모서리 등은 이제 CSS3에서 지원하는 표준입니다. 다시 말하지만, 픽셀 완벽성을 기반으로 다양한 브라우저에서 렌더링을 측정하고 싶지 않다면 지금 이러한 기능을 사용할 수 있습니다. CSS3 생성기가 이를 수행하는 데 도움이 될 것입니다.
둥근 모서리(Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+) |
-webkit-border-radius: 10px; |
텍스트 그림자(Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+) |
텍스트 그림자: 5px 5px 3px #CCC; |
블록 섀도우(Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+): |
-webkit-box-shadow: 10px 10px 5px #666; |
언젠가는 어떤 기능을 사용할 수 있을까요?
이 카탈로그에는 개발자와 디자이너가 수년 동안 생각해 왔던 기능이 포함되어 있습니다. 불행히도 현실 세계에서 사용되기까지는 몇 년이 더 걸릴 수 있습니다.
스마트 양식은 이전에 언급되었지만 실제로는 언급되지 않은 유용한 요소가 더 많이 있지만, 더 폭넓은 지원을 받기 전에는 이를 사용할 방법이 없습니다.
슬라이딩 선택기:
<input type="range" min="0" max="100" step="2" value="50"> |
색상 선택기:
| <입력 유형="색상"> |
날짜 선택기:
| <입력 유형="날짜"> |
정기적인 유효성 검사가 포함된 입력 상자:
| <input type="text" 패턴="[0-9]{13,16}"> |
필수 입력 상자:
<입력 유형="텍스트" 필수> |
이러한 태그 중 어느 것도 브라우저 간 또는 플랫폼 간 지원을 제공하지 않지만 그날이 오면 분명히 이러한 태그를 사용하고 싶어할 것입니다.
또 다른 CSS3 기능인 인쇄 레이아웃은 완전히 구현되려면 아직 수년이 걸릴 것입니다. 디자이너에게 다중 열 레이아웃 기능을 제공합니다. 현재는 Firefox 및 Safari의 테스트 케이스에서만 구현할 수 있습니다.
| -moz-열-개수: 3; -moz-column-gap: 20px; -웹킷-열-개수: 3; -웹킷-열-간격: 20px; |
Gowalla 및 Foursquare와 같은 위치 기반 서비스가 성장함에 따라 지리적 위치 감지는 브라우저가 사용자의 위치를 아는 데 유용합니다. 따라서 휴대폰 기반의 모바일 브라우저가 처음으로 Firefxo 3.5와 Safari 5에서 위치정보를 지원하기 시작한 것은 놀라운 일이 아닙니다. (Chrome의 유사한 서비스는 Gears를 통해 구현되지만 점차 HTML5로 옮겨가고 있습니다.)
오프라인으로 작업하고 로컬로 저장하는 것은 인터넷에 연결되어 있지 않거나 대용량 데이터를 처리해야 하고 클라우드에서 자주 실행해야 하는 경우에 좋은 아이디어입니다. 서버와의 커뮤니케이션은 생각보다 쉽습니다. 더 많은 데이터를 얻거나 모바일 데이터가 제한되어 너무 많은 데이터 손실을 방지하기 위해 휴대폰에 더 많은 데이터를 저장하고 싶을 수도 있습니다. 이때 대답은 로컬 저장소를 사용하여 애플리케이션을 오프라인으로 작동시키는 것입니다. 연결되면 클라우드로 이동합니다.
이 기능을 지원하는 브라우저는 Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+입니다.
HTML5의 약속 중 하나인 대지, 애니메이션 및 변형 효과는 Canvas 요소와 일부 CSS3 속성을 사용하여 완벽하게 설명되고 애니메이션이 적용된 웹 사이트를 구현할 수 있습니다. 2010년 7월 12일 기준입니다.
녹색 = 달성됨, 빨간색 = 계획되지 않음
최첨단 HTML5 바로가기
IE8이 죽을 때까지 기다릴 수 없다면 건너뛰고 계속 진행할 수 있는 방법이 많이 있습니다. 다시 말하지만 모든 것은 방문자에 달려 있습니다. 사이트의 액세스 로그를 살펴보고 가장 많이 방문한 브라우저 헤더를 확인하세요. 이를 수행하는 한 가지 방법은 예를 들어 Google의 Chrome 프레임을 사용하여 Chrome 인스턴스를 IE에 삽입하는 것입니다. 사이트 방문자가 GCF [Google Chrome 프레임]을 설치했을 수 있다는 점을 이해하면 이를 HEAD에 추가할 수 있습니다. 이전 줄의 META 태그는 IE가 GCF를 사용하여 웹 사이트를 표시하도록 합니다.
| <meta http-equiv="X-UA-Compatible" content="chrome=1"> |
[편집자: 하지만 이렇게 하면 IE=7의 원래 IE7 호환 모드가 무효화된다는 점을 상기시켜 드리고 싶습니다. 선택하시면 직접 판단해 보시기 바랍니다. ]
GCF를 설치하지 않은 사용자가 GCF 설치 페이지로 이동할 수 있도록 하는 Google에서 제공하는 짧은 스크립트와 결합하면 IE의 제한 사항을 건너뛸 수 있습니다. [편집자: 미쳤어요. GCF가 무료 트래픽을 유도하기 위해 무료 광고를 하는 것 같군요...]
이 문서에 나열된 요소는 현재 HTML5 및 CSS3 초안의 일부일 뿐이며 다른 새로운 기능을 사용해야 하는 경우 서버 호환성 문제를 최소화할 수 있도록 기존 오픈 소스 프로젝트를 확인해야 합니다.
HTML에 대해 보도할 때 많은 언론에서는 "2022년까지는 아니다", "플래시 킬러" 등의 입장을 집중적으로 다루고 있습니다. 현실은 HTML5가 오랫동안 기다려온 HTML4에 대한 완전히 새로운 업그레이드이기 때문에 오늘부터 사용할 수 있다는 것입니다.