여러분들. 우정환님이 올려주신 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>


a0012303_4acc09ff9675e.png


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

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

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


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





profile
20대 언제나 쿨한 개발(犬足)자.