여러분들. 우정환님이 올려주신 HTML5 기초 강좌를 보고 어떤 생각이 드셨나요?

어렵나요? 뭐.. 아직은 어렵겠죠. HTML 기초까지 다지신 분들도 있고 하니까..


그래서 오늘 정말 간단한 강좌를 준비해 봤습니다.

바로 블로그 마크업을 짜는 겁니다.


이미 외국에서 블로그 마크업을 짜는 방법이 구글 검색을 통해 나와 있지만,

오늘 특별히 SQLER를 다니시는 (비)회원분들께 이 짤막하고 간단한 강좌를 올려볼까 합니다.


먼저 HTML4/XHTML1.0 스타일로 블로그 마크업을 짰을 때는 이렇게들 하셨을 겁니다.

div밖에 안보이고 아이디와 스타일 클래스로 짜서 마크업을 다시보기엔 참 불편도 했죠.


structure chart before redesign


division 태그. 단 태그. 단단단단단단단단단단단단단단단단...........................

오우. 제가 봐도 어지럽습니다. 어쨌든 이런 기초로 이렇게 블로그를 짰죠.

하지만 HTML5 태그와 함께라면 이제 마크업 걱정은 마시길.


structure chart after redesign

어때요. 이제 구조를 알아보기 쉬워졌죠?

이걸 이렇게 마크업 하는겁니다.

<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='utf-8'/>
<meta http-equiv='content-type' content='text/html;charset=utf-8'/>
<title>나님의 블로그</title>
</head>
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
</html>



뭐 사실 여기에 있는 시맨틱 요소에 대한 강좌에 나와 있긴 하지만,

하나 요목조목 따져보기엔 시간도 없고, HTML5 방식으로 짜자니 어쩌라는건지 모르겠고.

이런 분들을 위하여 이렇게 강좌를 짜봤습니다.


하지만. 긴글보다 그림을 통한 짧은 글을 보면서 되새기는 시간도 가져보는 것도 좋겠죠?

No. Subject Author Date Views
47 HTML5 와 보안. [2] 컴포지트 2012.04.18 34747
46 [HTML5사례] Cut the Rope / 컷 더 로프 게임이 HTML5로 발표 되었네요. 흥미로워요. [2] 코난(김대우) 2012.01.10 29982
» HTML5로 블로그 마크업을 짜보자! [1] 컴포지트 2011.07.26 21347
44 [HTML5 동영상 강좌] 16. Web Worker [2] 우정환 2011.07.14 35057
43 [HTML5 동영상 강좌] 20. File API 우정환 2011.07.14 39172
42 [HTML5 동영상 강좌] 19. SVG 우정환 2011.07.14 33948
41 [HTML5 동영상 강좌] 18. Geolocation API 우정환 2011.07.14 31593
40 [HTML5 동영상 강좌] 17. Web Socket 우정환 2011.07.14 33385
39 [HTML5 동영상 강좌] 15. Web SQL Database 우정환 2011.07.14 33184
38 [HTML5 동영상 강좌] 14. Web Storage 우정환 2011.07.14 32413
37 [HTML5 동영상 강좌] 13. Communication API 우정환 2011.07.14 30284
36 [HTML5 동영상 강좌] 12. Offline Web Application 우정환 2011.07.14 30206
35 [HTML5 동영상 강좌] 11. Drag & Drop API 우정환 2011.07.14 32118
34 [HTML5 동영상 강좌] 10. Canvas Element 우정환 2011.07.14 32792
33 [HTML5 동영상 강좌] 9. Audio Element 우정환 2011.07.14 29626
32 [HTML5 동영상 강좌] 8. Video Element 우정환 2011.07.14 31085
31 [HTML5 동영상 강좌] 7. Rich Text Edit API 우정환 2011.07.14 31176
30 [HTML5 동영상 강좌] 6. Strong Web Form 우정환 2011.07.14 32063
29 [HTML5 동영상 강좌] 5. Sementic Element (2) 우정환 2011.07.14 32391
28 [HTML5 동영상 강좌] 4. Sementic Element (1) [5] 우정환 2011.07.14 42554





XE Login