html5 로 티스토리 스킨을 적용해 봅니다.

html5 로 티스토리 스킨이 적용이 되나 안되나 궁금했었습니다. 얼마전에 대충 만들어보고 적용해보니 잘 되더군요....
그래서 제 블로그에도 한번 적용해 봤습니다.

의미에 맞는 마크업은 아직 완벽하지 숙지하지 못해 미숙한 점이 있습니다.
그래도 먼저 적용을 해봤습니다. 스킨의 제목도 html 5 Try 로 해서 일단한번 시도해보자라는 뜻입니다.

몇가지 염두할점과 변경된점을 알려드립니다.
익스플로러에서도 보이게끔 했습니다. 완전이 제대로 보이지는 않지만 그럭저럭 보입니다.
그리고 IE8 이하버젼에서는 주석을 사용해서 http://resistan.com/savethedeveloper/ 로 돌아가는 이미지가 나오게끔 했습니다.

기본 베이스 정도만 적용했고... 슬슬 html5 와 css 3 의 멋진 기능은 하나씩 추가할 생각입니다.
두가지 정도는 이미 적용을 했습니다.
하나는 버튼의 스타일이고, 또하나는 네비게이션입니다.

IE 6

크롬

네비게이션의 모습

크롬

IE 6

현재 크로스 브라우징 환경에 접해있지는 않지만 과감하게 시도해봅니다.

이번에 또 다른 시도는 해상도에 따른 스타일 설정입니다.
768px 이상의 해상도에서 보여지는 크롬의 화면입니다. 이걸 중심으로 코딩이 돼었습니다.
컴퓨터 화면에서는 거의 768해상도 이상이지요.
이미지를 클릭하면 원본의 크기로 볼수 있니다.

그다음 768px 보다 작은 해상로 보여질 경우 입니다. 즉 테블릿 pc 의 해상도라고 하면 이해하시겠지요.
몇가지 변경된 점을 노란색으로 표시를 해놨습니다. 비교해보세요.

또하나는 그보다 작은 즉 320px 보다 작은 해상도로 볼 경우입니다.
사실 이정도면 스마트폰으로 접속한 경우라고 할 수 있는데요. 원래 티스토리에서는 모바일 웹스킨이 따로 있어서 적용할 필요는 없습니다.
그래도 일단 적용해봤습니다.
크롬에서 사이즈를 한번 줄여봤습니다.
어떻게 변하나 보시죠.

 
물론 완벽하지는 않습니다. 뭐니뭐니해도 테스트 성격이 있으니까요... 점점 다듬으면 더 좋겠죠...
사실은 jquery mobile 로 적용을 하려 했는데...마크업이 전부 바껴야 해서 적용을 못했습니다.
나중에 실력이 쌓이면 모바일 웹 스킨도 한번 적용해보려 합니다.

이상한 점이 있으면 알려주세요.