본문 바로가기

인터넷과 유틸/HTML5

HTML5와 관련해서 꼭 알아야하는 특징, 팁, 기술 25가지

산업의 변화가 너무 빨라서, 눈깜짝 할 새 뒤쳐지는 게 현실입니다. 특히 HTM5와 관련해서 그렇게 느끼신다면 우선은 다음 스물다섯가지만 기억하도록 하세요. 


1. 새로운 Doctype

예전에 쓰던  XHTML doctype은 너무나 복잡해서 절대 암기해서 쓸 수 없었죠. 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

이제는 HTML5 doctype을 쓰면됩니다. .아래처럼 "<!DOCTYPE html>"이면 끝납니다. 

사실은 HTML5에서 위의 선언도 필요없습니다. 그냥 옛날 브라우저들이 doctype이란 걸 선언하게 되어 있기때문에 구색을 맞춘겁니다. 


2. Figure 엘리먼트

이미지용 마크업을 보시죠:

  1. <img src="path/to/image" alt="About image" />  
  2. <p>Image of Mars. </p>  

위에 보면 이미지 태그가 있고, p(문단) 태그가 있습니다. 이들이 의미적으로 묶여있다는 것은 그냥 눈으로는 해석되는데, 컴퓨터가 이해하게 할 수는 없습니다. 그런데 HTML5에서는 <figure>와 <figcaption>이라는 엘리먼트가 있어서, 이 둘을 의미적으로 한쌍으로 묶을 수도 있습니다. 아래 보시죠.

  1. <figure>  
  2.     <img src="path/to/image" alt="About image" />  
  3.     <figcaption>  
  4.         <p>This is an image of something interesting. </p>  
  5.     </figcaption>  
  6. </figure>  

3. <small>요소의 재정의

예전에 저는 <small> 요소를 로고밑의 제목(subheadings)으로 사용하곤 했습니다.  프리젠테이션용으로 유용하긴 하나, HTML5에서는 그렇게 쓰면 안됩니다. HTML5에서 small은 진짜로 '작은 출력'(small print)을 의미합니다. 이를테면 사이트 아래(푸터)에 있는 카피라이트 문구가 <small> 로 사용할 대상인겁니다. 

The small element now refers to “small print.”


4. 스크립트나 링크에 대해 더 이상  Type 속성 안붙여도 됩니다. 

아마도 link나 script 태그에 Type 속성을 여전히 추가하고 있을지 모르겠네요. 

  1. <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
  2. <script type="text/javascript" src="path/to/script.js"></script>  

이제 그럴 필요가 없습니다. CSS는 type이 늘 CSS고, HTML에서 스크립트는 늘 Javascript만을 의미하므로, 아래처럼 안써도 된다는 말씀

  1. <link rel="stylesheet" href="path/to/stylesheet.css" />  
  2. <script src="path/to/script.js"></script>  

5. 따옴표로 둘러쌀까 말까?

HTML5는 XHTML이 아닙니다. 따라서, 속성들을 반드시 인용부호로 둘러싸야만 하는 건 아닙니다. 물론 원하면 그래도 되긴 하지만.

  1. <p class=myClass id=someId> Start the reactor.  

위처럼 알아서 하면됩니다. 그런데 좀 더 구조적인 문서로 만들거라면 따옴표 사용하라는데에 한표!


6. 컨텐트 수정가능하게 만들기



contenteditable이라는 참 편한 엘리먼트가 생겼습니다.  요놈을 사용하면 엘리먼트내에 문자열을 편집할 수 있게 됩니다. 요건 잘만 사용하면 활용가치가 매우 큽니다. 이를테면 로컬저장소와 함께 to-do list를 제공하는데 쓸 수도 있지요. 

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>untitled</title>  
  7. </head>  
  8. <body>  
  9.     <h2> To-Do List </h2>  
  10.      <ul contenteditable="true">  
  11.         <li> Break mechanical cab driver. </li>  
  12.         <li> Drive to abandoned factory  
  13.         <li> Watch video of self </li>  
  14.      </ul>  
  15. </body>  
  16. </html>  

아까 위에 말한대로 따옴표 안써도 되는 것도 잊지마시길

  1. <ul contenteditable=true>  

7. Email Inputs

input 태그에  “email” 타입을 쓰면 알아서 이메일만 입력해줍니다. 즉 브라우저가 스스로 유효성검증해준다는 거죠. 괜히 자바스크립트로 이메일 제대로 넣었는지 검사할 필요가 없습니다. 

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>untitled</title>  
  7. </head>  
  8. <body>  
  9.     <form action="" method="get">  
  10.         <label for="email">Email:</label>  
  11.         <input id="email" name="email" type="email" />  
  12.   
  13.         <button type="submit"> Submit Form </button>  
  14.     </form>  
  15. </body>  
  16. </html>  


브라우저에 따라 다르니, 아직 이 속성에 전적으로 의지하진 마세요.

브라우저에 따라 아직은 좀 문제가 있습니다. Opera 같은경우 이 기능이 잘 지원되는데, placeholder (다음에 설명) 같은 속성은 먹히지 않습니다. 결국 아직 전체 브라우저가 다 지원하지는 않으니까, 이 속성 쓰는 것은 아직은 조심하라는 말씀


8. Placeholders

이것도 전에는 자바스크립트로 해결하던 것입니다. 텍스트박스에 미리 문자열을 적어두는 거죠. 그리고 사용자가 클릭하면 적어있던 글은 사라지는, 즉 안내용 문자를 넣어두던 기능말입니다. 이게  placeholder 속성으로 한방에 해결됩니다. 

  1. <input name="email" type="email" placeholder="doug@givethesepeopleair.com" />  

이것도 브라우저마다 지원이 좀 다릅니다만 곧 다 지원되긴 할 겁니다. (Firefox이나 Opera에서 이 거 아직 안먹힙니다.)




9. Local Storage

한마디로 우리가 입력한 것을 브라우저가 기억하는 겁니다. 그것도 브라우저가 닫혔다 열린다음에도 말이지요. 

“localStorage는 도메인별로 설정됩니다. 따라서 브라우저 껏다켜도 그 도메인에 가면 해당 정보를 로컬에서 불러올 수 있는 거죠.”
-QuirksBlog

이것도 브라우저를 타긴 하지만, Internet Explorer 8, Safari 4, Firefox 3.5에서 지원된다고 합니다. 브라우저 차이를 해결하는 방법은 일단 자바스크립트로 window.localStorage 가 존재하는지 테스트해보면 되겠죠.



via http://www.findmebyip.com/litmus/

10. 시맨틱 Header 와 Footer

아래처럼 쓰는 건 이제 하실 필요 없는 겁니다. 

  1. <div id="header">  
  2.     ...  
  3. </div>  
  4.   
  5. <div id="footer">  
  6.     ...  
  7. </div>  

위에 id 라는 걸로 적용했어도 Div 태그라는 것 자체가 의미는 담고 있질 않습니다. 그래서 HTML5에서는 제대로 의미를 담을 수 있도록 <header> 와 <footer> 엘리먼트를 제공합니다. 이제 이렇게 쓰면 되는거죠. 

  1. <header>  
  2.     ...  
  3. </header>  
  4.   
  5. <footer>  
  6.     ...  
  7. </footer>  

이제 여러개의 header와 footer를 써도 브라우저가 알아먹습니다.

아참 여기 header와 footer가 웹사이트 헤더, 푸터를 의미하는 게 아닙니다. 여기서 header와 footer는 순전히 컨테이너를 지칭하는 겁니다. 물론 웹사이트 헤더 풋터에 이 놈들이 놓여지게 할 수 있지만, 꼭 그렇게 써야만 하는 게 아니라는 겁니다. 


11.  그외 HTML5 Form 특징

Form태그입니다. 그냥 비디오에서 확인하시죠. 



12. 인터넷 익스플로러와  HTML5

모든  element는 디폴트로 inline을 표시합니다. 

블럭단위로 엘리먼트로 제대로 렌더링하게 하려면 이렇게 스타일을 정의해줘야 합니다. 

  1. header, footer, article, section, nav, menu, hgroup {  
  2.    displayblock;  
  3. }  

아직 IE는 이런 스타일을 이해하지 못하는데요. 하긴 header, footer도 모르겠군요. 하지만 이 문제는 쉽게 고칠수 있습니다. 

  1. document.createElement("article");  
  2. document.createElement("footer");  
  3. document.createElement("header");  
  4. document.createElement("hgroup");  
  5. document.createElement("nav");  
  6. document.createElement("menu");  

신기하게도 요렇게 하면 됩니다. Remy Sharp이 이런 스크립트(클릭)로 이문제를 해결했는데요. 이렇게 하면 출력문제도 해결됩니다. 

  1. <!--[if IE]>  
  2. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
  3. <![endif]-->  

13. hgroup

사이트 헤더에서  <h1>  <h2> 태그로 헤딩을 정의할 순 있지만, 이게 의미적으로(semantically) 그 둘의 관계를 나타내진 못합니다. 그냥 사람이 보고 또 다른 헤더인갑네 하는거죠. 다른 페이지에 헤더를 또 나타낼 때는 오히려 <h2>가 더 헤깔리는 요소가 될수도 있습니다. 그래서 HTML5에서는 hgroup 엘리먼트란 놈으로 헤더 그룹을 만들어 문서의 아웃라인을 잡아 줍니다. 

  1. <header>  
  2.     <hgroup>  
  3.         <h1> Recall Fan Page </h1>  
  4.         <h2> Only for people who want the memory of a lifetime. </h2>  
  5.     </hgroup>  
  6. </header>  


14. 필수 속성 (Attribute)

폼(Form)에서 required 속성을 쓰면 그 input은 반드시 입력해야 함을 의미합니다. 아래와 같이 하면 되죠.

  1. <input type="text" name="someInput" required>  

또는 이렇게요.

  1. <input type="text" name="someInput" required="required">  

위의 두개 다 잘 작동합니다. 입력하지 않으면 넘어가지 않는거죠. placeholder 속성으로 입력받는 화면 하나더 예시합니다. 

  1. <form method="post" action="">  
  2.     <label for="someInput"> Your Name: </label>  
  3.     <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>  
  4.     <button type="submit">Go</button>  
  5. </form>  



input이 아무것도 넣지 않으면 텍스트박스가 하이라이트됩니다. 


15. Autofocus 속성

HTML5는 예전에 많이 작성해야 했던 자바스크립트 노가다를 줄여줍니다. autofocus 를 쓰면 해당 입력으로 자동으로 가게 해주죠.

  1. <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  

"autofocus=autofocus" 라고 써도 되는데 좀 어색해서 그냥 autofocus 한 단어로 썼습니다. 


16. Audio 지원

음성을 위해 3rd 파티 플러그인에 의존하지 않아도 됩니다. HTML5에 <audio> 엘리먼트가 있으니까요. 

  1. <audio autoplay="autoplay" controls="controls">  
  2.     <source src="file.ogg" />  
  3.     <source src="file.mp3" />  
  4.     <a href="file.mp3">Download this file.</a>  
  5. </audio>  

오디오관련해서는 Mozilla와 Webkit 조합은 아직 제대로 안굴러갑니다. Firefox는 .ogg 파일이고, Webkit 기반 브라우저는 .mp3 를 지원해서입니다. 결국 한동안은 오디오를 두개 준비해야한다는 얘기겠죠. 

사파리는 페이지 로읻할때, ogg 형식은 인식을 못하므로, 바로 mp3쪽으로 넘어갑니다. IE는 아직 오디오 지원안되고요. Opera 10이하 버전은 .wav 만 지원합니다. 


17. Video 지원

 <audio> 처럼, HTML5는 video도 지원합니다. YouTube도 HTML5 video embed를 소개했죠.  하지만 아직 HTML5 스펙이 코덱까지 정의한 건 아니라서, 코덱지원은 브라우저가 알아서 할 몫입니다. Safari나 Internet Explorer 9은 H.264를 지원한다고 했구요. Firefox과 오페라는 오픈진영인 Theora 와 Vorbis를 지원합니다. 결국 비디오 제공하는 사이트 만들려면 둘다 준비해야겠네요. 

  1. <video controls preload>  
  2.     <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />  
  3.     <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />  
  4.     <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>  
  5. </video>  

크롬은 “ogg” 와 “mp4″ 다 지원합니다.

몇가지 주목할 것.

  1. 브라우저를 위해 비디오 type 속성을 꼭 정의해야 하는건니지만, 대역폭 문제를 해결하기 위해서는 정의하는 게 낫겠죠.
  2. HTML5 video는 아직 안되는 브라우저가 많습니다. 여전히 Flash 비디오도 제공하는게... 
  3. controls이랑 preload 속성도 중요한데, 다음 팁에 설명하죠.

18. Preload 비디오

말그대로 preload 하는 겁니다. 웹사이트 방문자를 위해 비디오를 미리 로딩하면 대기시간이 줄겠지요. 하는 방법은 preload="preload"하거나, preload 라고 비디오태그 옆에 입력해주면 됩니다. 


19. Display 컨트롤

디스플레이 컨트롤(재생, 중지 같은 버튼말입니다)이 없으면 아무리 비디오 붙여봤자, 이건 이미지에 불과합니다. 이거 붙일려면 video에 controls라고 적어주면 됩니다.

  1. <video preload controls>  


컨트롤은 어떻게 표시되냐구요. 그건 당연히 브라우저가 제공하는 컨트롤에 따라 달라지겠죠. (JJ 추가: 만약 제가 JJ라는 브라우저 만들고, 비디오 콘트롤은 재생버튼이 화면옆에 붙게 만들었다면, 이 태그를 실행했을때 그렇게 나오게 되겠죠)


20. 정규표현식(Regular Expressions)

텍스트박스입력에서 특정 형식으로 입력받을때 정규표현식이 얼마나 편한가요? (JJ 주해, PHP해보신 분들 아시죠? 이거 없으면 문자 Validation 정말 힘듭니다.) 그런데 이제 HTML에 정규표현식을 바로 넣을 수 있게 된겁니다. 

  1. <form action="" method="post">  
  2.     <label for="username">Create a Username: </label>  
  3.     <input type="text"  
  4.        name="username"  
  5.        id="username"  
  6.        placeholder="4 <> 10"  
  7.        pattern="[A-Za-z]{4,10}"  
  8.        autofocus  
  9.        required>  
  10.     <button type="submit">Go </button>  
  11. </form>  

위에 보면 [A-Za-z]{4,10}라는 정규표현식은 알파벳문자로 4개에서 10개 입력만 받겠다는죠. 참 편한세상이네요. 

정규표현식이 뭔지 모르면요기 클릭하삼.


21. 속성(Attributes) 지원여부 알아보기

속성들이 잔뜩 들어왔어도 브라우저가 지원하지 않으면 땡이지요. 그걸 알아내는 방법을 설명하겠습니다. 두가지 방법이 있는데요. 첫번째는 Modernizr 라는 라이브러리를 쓰는 겁니다. 둘째는 브라우저가 뭘 할 수 있는지 해부해 보는건데요. 이를테면, 브라우저가 pattern 속성을 지원하는지 파악하기 위해 이렇게 JavaScript를 사용하는 겁니다. 

  1. alert( 'pattern' in document.createElement('input') ) // boolean;  

위의 방법은 브라우저 호환성을 알아내는데도 좋은 방법입니다. jQuery 라이브러리도 이런식으로 하지요. 

  1. <script>  
  2. if (!'pattern' in document.createElement('input') ) {  
  3.     // do client/server side validation  
  4. }  
  5. </script>  

역시 자바스크립트로 해결하는군요!


22. Mark 엘리먼트

 <mark>는 하이라이터(highlighter)로써,  <mark>로 둘러싸인 문자는 현재 사용자의 액션에 관련이 되게 됩니다. 예를 들어, 블로그에서 “Open your Mind”라는 문자열을 검색했다면, 자바스크립트로 그 문자가 나타날때마다, <mark> 로 둘러싸게 할 수 있는 겁니다. 

  1. <h3> Search Results </h3>  
  2. <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark></p>  


23. <div>는 언제 쓰나요?

header,articlesectionfooter 이런식으로 의미적으로 다 구분이 된다면 그 옛날 그럼 이젠 div는 언제쓰나요?

Div는 다른 요소로 정의할 수 없을때 쓰면 됩니다. 

예를들어, 그냥 특정부분을 한 블럭으로 잡고싶을때 쓰면 되는 겁니다. 하지만, 관련글 목록을 블럭으로 잡는 거라면 <article> 이나 <nav> 가 더 맞겠지요. 그런 의미가 있는 거 외에는 자유롭게 div를 쓰면 됩니다. 


24. 즉시 사용할 수 있는 것

HTML5가 2022년에나 완성된다고 하는데 이건 잘못된 생각입니다. 사실 지금도 사용할 수 있는 HTML5 특징들이 있고, 그걸 프로젝트에 활용해도 됩니다. 이 비디오를 참고하시죠.


25. HTML5가 아닌 것

자바스크립트를 쓰지 않고도 만들 수 있는 멋진 트랜지션 효과를 내는 게 요새 웹 표준에서 추구하는 방향입니다. HTML5는 아니지만, 그런 역할을 하는 것들에는 다음과 같은 게 있습니다. 

  1. SVG: Scalable Vector Graphics.
  2. CSS3:  말그대로 CSS죠
  3. Client Storage:  HTML5에 포함되었다가, 넘 복잡해질까봐 스펙에서 빠졌습니다.  
  4. Web Sockets: 요것도 빠졌습니다. 별도 스펙으로 작업이 진행되는군요. (JJ주해, 개인적으로 너무나 기대하고 있던 건데... 쩝 아쉽네요. 근데 이거 열면 웹도 해커들에게 판도라의 상자가 될 수도... )

어쨋든 간에 위와 같은 것들도 요새의 web 스택에 올라가게 될 것들 입니다. 왜냐면 HTML5하는 사람들이 위의 스펙잡는 작업도 진행중이니까요.