2010/08/13 01:50

HTML5 관련 알아둬야 할 25가지 특징

2010/08/13 01:50 in 웹+통신 이야기/웹기반 서비스
집안에 좀 안좋은 일이 있어서, 요새 많은 걸 생각하기 어렵습니다. 어차피 늦게 자는 편이긴 하지만, 그덕에 잠이 안와서 더 늦게 자게 되는군요. 

오늘은 아둔해진 머리로 늦은 시간도 때울겸,  그냥 암생각없이, HTML5 관련 번역을 한페이지 하려고 합니다. 

우선, 제가 HTML5에 관심을 가지게 된 것은 2009년 5월인가 6월쯤 아래 유튜브 동영상을 보고나서부터 였습니다. (HTML5로 만든 화면들이 나오는 앞부분만 보세요)

현재도 나름 매우 관심있게 주목하고 있구요. 그래서, W3C 사이트에 들어가서 HTML5 스펙도 주기적으로 보고 있고, HTML5 관련 사이트들에도 자주 찾아보곤 합니다. 

제가 오늘 번역하려고 하는 HTML5 글은 Jeffrey Way가 올린 블로그 글(원문링크 클릭)입니다. 제 맘대로 번역, 아니 의역해서 공유해 봅니다. (일단 제가 알고 있던 내용들인지라, 아주 맘편히 의역했습니다.)

그럼 의역본 나갑니다. 

 8/13 9:40 업데이트: 번역내용을 아이폰으로 보니, 티스토리 모바일버전에서는 글자가 중간중간 빠지고, 반만 나오고 잘리네요. 아이폰에서 보실경우, 스크롤다운(젤 아래 좌측) "PC화면" 눌러서 보셔야 제대로 나옵니다.


===============================================================

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


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

1. 새로운 Doctype

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

view plaincopy to clipboardprint?
  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>"이면 끝납니다. 

view plaincopy to clipboardprint?
  1. <!DOCTYPE html>  

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

2. Figure 엘리먼트

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

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

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

view plaincopy to clipboardprint?
  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 속성을 여전히 추가하고 있을지 모르겠네요. 

view plaincopy to clipboardprint?
  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만을 의미하므로, 아래처럼 안써도 된다는 말씀

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

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

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

view plaincopy to clipboardprint?
  1. <p class=myClass id=someId> Start the reactor.  

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

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

Content Editable

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

view plaincopy to clipboardprint?
  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>  

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

view plaincopy to clipboardprint?
  1. <ul contenteditable=true>  

7. Email Inputs

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

view plaincopy to clipboardprint?
  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>  
Email Validation

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

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

8. Placeholders

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

view plaincopy to clipboardprint?
  1. <input name="email" type="email" placeholder="doug@givethesepeopleair.com" />  

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

Validation

9. Local Storage

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

ubscribe to our YouTube page to watch all of the video tutorials!
Or, watch this video on Screenr.com.

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

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

Support matrix

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

10. 시맨틱 Header 와 Footer

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

view plaincopy to clipboardprint?
  1. <div id="header">  
  2.     ...  
  3. </div>  
  4.   
  5. <div id="footer">  
  6.     ...  
  7. </div>  

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

view plaincopy to clipboardprint?
  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을 표시합니다. 

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

view plaincopy to clipboardprint?
  1. header, footer, article, section, nav, menu, hgroup {  
  2.    display: block;  
  3. }  

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

view plaincopy to clipboardprint?
  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이 이런 스크립트(클릭)로 이문제를 해결했는데요. 이렇게 하면 출력문제도 해결됩니다. 

view plaincopy to clipboardprint?
  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 엘리먼트란 놈으로 헤더 그룹을 만들어 문서의 아웃라인을 잡아 줍니다. 

view plaincopy to clipboardprint?
  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은 반드시 입력해야 함을 의미합니다. 아래와 같이 하면 되죠.

view plaincopy to clipboardprint?
  1. <input type="text" name="someInput" required>  

또는 이렇게요.

view plaincopy to clipboardprint?
  1. <input type="text" name="someInput" required="required">  

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

view plaincopy to clipboardprint?
  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>  
Required and Placeholder Attributes

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

15. Autofocus 속성

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

view plaincopy to clipboardprint?
  1. <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  

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

16. Audio 지원

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

view plaincopy to clipboardprint?
  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를 지원합니다. 결국 비디오 제공하는 사이트 만들려면 둘다 준비해야겠네요. 

view plaincopy to clipboardprint?
  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 라고 비디오태그 옆에 입력해주면 됩니다. 

view plaincopy to clipboardprint?
  1. <video preload>  

19. Display 컨트롤

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

view plaincopy to clipboardprint?
  1. <video preload controls>  
Options

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

20. 정규표현식(Regular Expressions)

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

view plaincopy to clipboardprint?
  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를 사용하는 겁니다. 

view plaincopy to clipboardprint?
  1. alert( 'pattern' in document.createElement('input') ) // boolean;  

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

view plaincopy to clipboardprint?
  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> 로 둘러싸게 할 수 있는 겁니다. 

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

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

header,article, section, footer 이런식으로 의미적으로 다 구분이 된다면 그 옛날 그럼 이젠 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하는 사람들이 위의 스펙잡는 작업도 진행중이니까요.

휴우, 드뎌 번역을 끝냈습니다. 금방 될줄 알았는데, 한시간 반은 걸리는 군요. 

수고해준 JJ 에게도 격려의 댓글을 ^^;


저작자 표시 비영리 변경 금지

'웹+통신 이야기 > 웹기반 서비스' 카테고리의 다른 글

프레지 한글 지원을 축하하며 - 프로슈머가 되게 만드는 제품  (6) 2010/10/08
지능은 감성을 따라가지는 못하는구나  (0) 2010/09/30
HTML5 관련 알아둬야 할 25가지 특징  (22) 2010/08/13
구글웨이브의 개발중단 소식을 듣고서  (10) 2010/08/06
REST 알아보기 - 2부, 웹에서 뭐가 그리도 좋을까?  (2) 2010/07/08
REST 알아보기 - 1부, 연동의 역사  (15) 2010/07/07
Tag , , , , , , , , , , , , , , ,
Trackback 2 Comment 22

Trackback : http://dreamgoer.net/trackback/222 관련글 쓰기

  1. Subject HTML5 관련 알아둬야 할 25가지 특징

    Tracked from 푸땡 2010/08/17 19:14 delete

    HTML5 관련 알아둬야 할 25가지 특징 Share on Facebook...

  2. Subject HTML5와 관련해서 꼭 알아야하는 특징, 팁, 기술 25가지(퍼옴)

    Tracked from Shaga No.01 2010/09/13 19:14 delete

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

  1. 피스티스 2010/08/13 15:45 address edit & del reply

    좋은 정보 잘 보고 갑니다^^

  2. 키리스 2010/08/13 18:10 address edit & del reply

    이해하기 쉽게 잘 번역해주셨네요 감사합니다. ^^

  3. Html 2010/08/14 00:01 address edit & del reply

    수고많으셨습니다. 감사합니다.

  4. 딴동네 2010/08/16 03:17 address edit & del reply

    좋은 정보 감사합니다. ^^

  5. JJ의 생에 대한 갈망 lustforlife 2010/08/16 11:30 address edit & del reply

    잘 읽어주셔서 감사합니다.

  6. 임승진 2010/08/18 02:15 address edit & del reply

    좋은 내용이네요 퍼가도 될까요?ㅎㅎ

  7. vf2416 2010/08/24 12:52 address edit & del reply

    http://pann.nate.com/b202475928 HTML5는 먹는거니? 담당 공무원의 대갈통 속엔 ie뿐인데? ㅋㅋ

    • JJ의 생에 대한 갈망 lustforlife 2010/08/24 21:35 address edit & del

      국내 모든 웹사이트가 IE로 도배된 게 슬픈현실이긴 합니다. 그래서 저두 동의하기는 하는데, 그래도 좀 표현이.. 제 블로그에서 본 댓글중에 제일 과격한 스타일로 댓글주셨네요.

  8. 샤가No01 2010/09/13 19:02 address edit & del reply

    잘보고 갑니다 시간날때 퍼갈께요~ 이미트위터에 글은 남기긴 했지만 ㅎㅎ

    • JJ의 생에 대한 갈망 lustforlife 2010/09/13 22:16 address edit & del

      댓글남겨주셔서 감사, 샤가님 블로그가보았더니, 사진이 멋지시군요. (내가 왕년에 되고 싶었던 미소년타입, 부럽습니다)

  9. 사토감자 2010/10/20 15:05 address edit & del reply

    무심코 창을 껐다가 다시 들어왔습니다. 감사의 댓글을 빼먹을 뻔했네요.
    너무 잘 정리되어 있어서 많은 도움이 되었습니다!!!!

  10. vf2416 2010/10/26 14:54 address edit & del reply

    http://todayhumor.co.kr/board/view.php?no=306192&table=humorbest
    웹표준은 2~3년 후에나 도입 된답니다ㅋㅋ

  11. 네모난 세상 2011/03/17 11:12 address edit & del reply

    좋은 내용 감사드립니다. 많은 도움이 되었습니다.

  12. hicari 2011/05/08 14:33 address edit & del reply

    잘 보고 갑니다 ^^ 좋은 하루 되세요

  13. jjung7342 2011/10/03 16:19 address edit & del reply

    HTML5에 대해서 공부중인데, 정리를 너무 잘해놓으셔서 도움이 많이 되었습니다. 감사합니다~

  14. Coach Factory Outlet Online 2012/01/10 18:20 address edit & del reply

    코치 공장 아울렛 매장에서 제품을 구입, 당신은 그들이 당신이 신뢰할 수있는 가격으로 선택할 수있는 옵션을 더 얻을 수 있도록 회사의 모든 제품을 배치하는 데 사용하는 그래서 그들은 회사에서 감독으로 선택할 수있는 옵션을 추가하십시오.

prev Prev 1 ... 87 88 89 90 91 92 93 94 95 ... 226 Next next