부트스트랩 프레임워크를 활용해서 버젼3까지 제작하고 이번에는 Responsiv 라는 이름으로 반응형 티스토리 스킨을 제작해보았습니다.

부트스트랩이 그리드 시스템을 지원하니 어지간하면 따로 미디어쿼리를 제작하지 않아도 반응형으로 작동합니다.

허나 티스토리 자체의 요소가 있기에 전혀 손을 안되고는 안되더군요.


현제 제 블로그 스킨은 Responsive 입니다. 2012.12.10 현재.


데스크탑 화면



주요 사항이 배경을 rgba 를 사용해서 보일듯 말듯 스타일을 처리했습니다.

그러다보니 RGBA를 지원하지 않는 IE8 이하에서는 조금 스타일이 다릅니다.



IE8에서 본 화면


IE8에서 본 화면



뭐 굳이 Ie8이 지원하지 않는 RGBA 라던가 border-radius 등은 따로 처리하지 않았습니다. 

ie9이상에서는 무리없이 보여집니다.


중요한것은 반응형 responsive 입니다.

티스토리 블로그 스킨을 반응형으로 제작을 했습니다. 미디어쿼리를 지원하지 않는 ie에서도 어느정도는 잘 보여집니다.

제가 에뮬레이터로 모바일과 테블릿에서는 어떻게 보여지나 스샷을 찍었습니다. 참고하세요.


모바일 화면


모바일 화면


모바일 화면



테블릿에서 볼때 입니다.


테블릿 화면



이번 스킨은 개인적으로 점수를 주자면 70점 정도 주고 싶네요.

부트스트랩을 사용해서 좋은 점도 있지만 단점도 있습니다.

필요없는 코드를 삽입한다거나 손쉽게 제작하려다보니 디자인의 폭이 좁았습니다.


디자인의 폭을 넓힐려면 구지 부트스트랩을 사용할 필요가 없지요. 

이걸 만들자마자 다시 작업에 들어갔습니다.


이번에는 방탄 반응형으로 제작하려 합니다.

부트스트랩 프레임워크를 사용하는것이 아니라 모든 부분에 수정이 가능하고 독자적인 스타일이 가능한 반응형스킨을 만드는 것입니다.

반응형 디자인이 responsive 티스토리 스킨은 반응형으로 만든 스킨을 티스토리에도 사용할 수 있다는 점에만 만족을 해야겠습니다.