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

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

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


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


데스크탑 화면



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

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



IE8에서 본 화면


IE8에서 본 화면



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

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


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

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

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


모바일 화면


모바일 화면


모바일 화면



테블릿에서 볼때 입니다.


테블릿 화면



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

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

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


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

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


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

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

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

신고

댓글

  1. 2012.12.13 09:56 신고 BlogIcon 비톤  댓글주소  수정/삭제  댓글쓰기

    티스토리 블로그스킨 기능적,디자인이 심플하니 너무 좋은것 같아요~
    즐거운 하루 보내세요

    • BlogIcon 대문 demun 2012.12.13 11:14 신고  댓글주소  수정/삭제

      반갑습니다. 비톤님
      스킨은 좀더 다듬어야 할 듯 합니다.
      안그래도 지금 작업에 돌입했어요....ㅎㅎㅎㅎ

      비톤님은 사진에 관심이 많으시니 포토블로그하나 만드세요...
      그래서 사진 전문 블로그를 한번 만들어보는것도 좋을것 같은데....

  2. 2012.12.25 10:32  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. 2012.12.26 13:09  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 2012.12.29 16:16 신고 BlogIcon 폴피어스  댓글주소  수정/삭제  댓글쓰기

    와 스킨 너무 이쁘네요..

  5. 2013.01.11 17:21 신고 BlogIcon 벼룩이  댓글주소  수정/삭제  댓글쓰기

    멋진 블로그 스킨 기대하고 있습니다.

    좋은 하루 되십시오...

    • BlogIcon 대문 demun 2013.01.12 18:30 신고  댓글주소  수정/삭제

      부트스트랩은 이제 그만 만들어야 하지 않을까 합니다.
      한계가 있더라구요....

      프레임워크를 사용하면 디자인적으로 많이 못 벗어나고,
      디자인을 벗어나고자 하면 코드를 많이 중복으로 써야하고...

      그런 고민이 좀 있어요