화영의 nQuark 1.0 [다운로드]



tistory000001_rev1.0.zip






이제 반응형 스킨을 배포할 때가 된 것 같습니다.


이번에 공개하는 스킨은 여러분들이 사용하라는 의미에서 배포하는 것이기도 하지만, 또 다른 한편으로는 제가 블로그에서 하는 이야기를 좀 더 잘 이해하라고 배포하는 것이기도 합니다. 앞으로 이 블로그에 이 스킨(의 제작 과정)과 관련된 연재글을 올릴 예정이기 때문입니다.








스킨 미리보기는 제 블로그를 보시면 되겠습니다. http://zoahaza.tistory.com



배경이 브라우저 스크롤에 관계없이 고정되는 형태다보니 캡쳐가 조금 이상하게 되었습니다.(-_-) 양해 바랍니다.






타겟 사용자


속도와 퍼포먼스가 중요하다면 이 스킨을 권장하지 않습니다. 이 스킨은 웹폰트를 3개나 썼으며 방사형 그라디언트가 적용된 용량이 꽤 큰 배경이미지를 사용합니다. 또한 익스플로러 구버전에 대응하기 위해 Top-down 방식의 미디어 쿼리를 사용하면서 퍼포먼스를 좀 버린 측면도 있습니다.


하지만 익스플로러 구버전에서의 호환성이 중요하다면, 이 스킨을 선택해도 좋습니다.


기존 반응형 스킨과는 좀 다른 특이한 디자인을 원한다면, 이 스킨을 선택해도 좋습니다.




특이사항


xhtml + css3 조합입니다. 엄밀하게 따지면 웹표준에 어긋나는 방법이지만, 아직 많은 사람들이 사용하고 있는 익스플로러 구버전에 대응하기 위해 이런 방법을 사용한 것입니다. 따라서 별도의 자바스크립트 없이도 익스플로러 구버전에서 동작할 수 있게끔 만들어졌습니다.


이러한 태생적인 한계 이외에도, 기업용으로 배포하는 스킨이 아니기 때문에 웹표준이나 웹접근성을 지키지 않은 부분이 있을 수 있습니다.


익스플로러 7,8,11, 파이어폭스, 구글 크롬에서 테스트를 마쳤으며 모바일의 경우 Daum Troy(에뮬레이터), 삼성 Galaxy S2에서 테스트를 진행했습니다.




자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.




주의사항


이 스킨은 티에디션과 관련된 주의사항이 있습니다.


현실적으로 티에디션의 모든 기능에 반응형으로 대응하는 것은 불가능합니다. 따라서 이 스킨도 티에디션의 일부만을 반응형으로 만들어주는 기능을 가지고 있습니다.


따라서 이 스킨의 티에디션과 관련된 CSS 부분을 수정하지 않고 그대로 쓰시려면 아래 티에디션 구조를 선택할 것을 권장하는 바입니다.







저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 러브가젯 2014.12.21 09:38 신고  댓글주소  수정/삭제  댓글쓰기

    오~좋습니다.
    꼭 적용해보겠습니다. ^^

    • 책덕후 화영 2014.12.21 17:10 신고  댓글주소  수정/삭제

      이미 다른 반응형 스킨을 사용하고 계시네요. 성능 면에서는 기존 스킨이 나을 겁니다. 제 스킨은 성능 면에서는 기존 스킨보다 조금 떨어지지만 익스플로러 구버전에 대응하는 스킨이라는 데에 의의가 있습니다. :)

  2. 달빛천사7 2014.12.21 10:44 신고  댓글주소  수정/삭제  댓글쓰기

    잘 사용하겠습니다 지금 블로그 말고 다시 블로그 한개 더 개설하죠

  3. 달빛천사7 2014.12.21 11:03 신고  댓글주소  수정/삭제  댓글쓰기

    http://newrontage2014.tistory.com/ 적용블로고 잘 사용하죵

    • 책덕후 화영 2014.12.21 17:12 신고  댓글주소  수정/삭제

      앗! 다른 블로그도 있었군요. ^^; 반갑습니다. 저도 티스토리 블로그 스킨제작 제대로 하려면 다른 티스토리 블로그 계정을 마련해야 하겠다는 생각이 들더군요. 이 블로그만으로 스킨제작 작업을 하려니 스킨제작 잘못해서 블로그가 뻑나는 경우가 가끔씩 있는데 그 시간에 방문자가 제 블로그 들어와서 아무것도 못보고 그냥 나가버리면 고객을 잃는거나 마찬가지잖아요 ㅠㅠ

  4. 쭈니러스 2014.12.21 21:55 신고  댓글주소  수정/삭제  댓글쓰기

    이런 능력도 가지고 계셨군요^^ 요즘 반응형 스킨 여러개 중에 검토 중인데 이것도 후보군에 넣어봐야겠습니다ㅎㅎ

  5. 악랄가츠 2014.12.22 08:09 신고  댓글주소  수정/삭제  댓글쓰기

    깔끔하면서도 색이 참 곱네요! 으응? ㅋㅋㅋ

  6. GeniusJW 2014.12.22 20:30 신고  댓글주소  수정/삭제  댓글쓰기

    이야,, 진짜 저도 이렇게 잘 만드는 퍼블리셔가 정말 부럽네요..ㅠ
    저는 손을 댈 줄 모르니,, 정말 엉망이죠..ㅠ

  7. 이바구™ 2014.12.22 21:23 신고  댓글주소  수정/삭제  댓글쓰기

    또 하나의 반응형스킨 등장이군요.
    많이 봤으면 좋겠네요.
    (실력 대단하십니다)

  8. 지후대디 2014.12.23 07:28 신고  댓글주소  수정/삭제  댓글쓰기

    스킨제작도 하시는군요 역시 스킨은 디자인적인 감각이 좀 있어야 하나봅니다 가끔 개발자가 일부 ui 디자인도 해야할때가 있는데 결과물이 신통치 않습니다

    • 책덕후 화영 2014.12.23 15:32 신고  댓글주소  수정/삭제

      오호라... 디자이너가 아니라 개발자가 UI디자인을 할 상황이라면 일반적인 상황은 아닐거 같은데... 혹시 반응형 홈페이지를 만들때의 상황인가요? 코딩에 대한 이해 없이 반응형 홈페이지를 디자인하는 것은 쉽지 않은 일인지라... ^^;

  9. 진실된 2014.12.24 10:50 신고  댓글주소  수정/삭제  댓글쓰기

    히야~드디어 반응형 스킨을 완성하시고 배포까지 하시는군요.
    아, 캡쳐는 픽픽이라는 무료 프로그램을 사용하면 세로로 긴 화면도 "스크롤캡쳐"라는 것으로 깔끔하게 할 수 있습니다.

    그런데 현재 보이는 포스팅 상단에 큰~이미지는 뭘까요? 버그인가요?

    • 책덕후 화영 2014.12.24 10:57 신고  댓글주소  수정/삭제

      상단의 큰 이미지는... 반응형에 맞춰서 이미지를 리사이즈 하는 과정에 저 이미지도 같이 반응해서 생기는 일종의 버그입니다. 더 정확히 말씀드리면 티스토리에서 자바스크립트의 naturalwidth속성을 제대로 안먹어서 생기는 버그라 할 수 있습니다. 고칠 수 있는 방법이 있을 것 같긴 한데 아직까지는... 하루빨리 수정해서 올려드리겠습니다.

  10. 진실된 2014.12.24 11:15 신고  댓글주소  수정/삭제  댓글쓰기

    빨리 하지 않으셔도 되요. :-)
    다른 블로그에 적용해봤어요. 깔끔하네요!! 모바일에서도 잘 보이고.
    http://appshopper.co.kr 여기 적용했는데 배경바꿨어요.

    body {
    background-image:url(images/mbackground.png);
    background-repeat:yes-repeat;
    }

    좀더 용량이 작은 이미지 패턴으로 넣었지만 큰 차이는 없겠죠 뭐~^^

    • 책덕후 화영 2014.12.24 11:18 신고  댓글주소  수정/삭제

      적용된 페이지 주소 알려주셔서 감사합니다. 저도 제가 만든 스킨 다른분들이 적용시킨걸 모니터링할 필요가 있어서요. 아무래도 저 혼자 모든 것을 테스트할수가 없다보니...^^;

  11. 진실된 2014.12.24 11:19 신고  댓글주소  수정/삭제  댓글쓰기

    버그나 기타 건의사항이 있으면 댓글로 의견 남겨볼께요~^^

  12. 빌노트 2014.12.24 13:38 신고  댓글주소  수정/삭제  댓글쓰기

    우아 멋져요!
    저는 언제 이렇게 배포를 해볼지...
    다시 한번 대단하십니다^^

  13. 개인이 2014.12.24 20:52 신고  댓글주소  수정/삭제  댓글쓰기

    반응형 스킨을 여러번 적용했다가 기존 스킨으로 돌아갔는데, 깔끔하네요. 댓글평도 좋고 나중에 반응형으로 다시 가고 싶어지면 적용해봐야겠네요 ^^

    • 책덕후 화영 2014.12.24 21:23 신고  댓글주소  수정/삭제

      티스토리 블로거들 얘기 좀 들어보면 반응형 스킨을 안쓰는 이유중에 하나가 구버전 익스플로러에서 깨져보이는 문제 때문이라고 하더군요. 이 스킨은 그 부분을 보완해서 만든 스킨입니다. 디자인이 좀 특이하긴 하지만, 그외 다른 건 특별한게 없어요 ^^;

  14. 백전백승 2014.12.26 12:49 신고  댓글주소  수정/삭제  댓글쓰기

    저는 멋만 따지는데 제대로 반응형 스킨을 만드셨네요. 그리고 한 가지만 물어보겠습니다. 왜 익스플로러 9와 10에서는 테스트하지 않으셨는지 알 수 있나요?

  15. G.J. 제이 2014.12.26 19:40 신고  댓글주소  수정/삭제  댓글쓰기

    배경화면때문에 로딩이 꽤나 걸릴거 같다는 생각이 드네요 ㄷㄷ

  16. Camomile Forever 2015.01.21 19:51 신고  댓글주소  수정/삭제  댓글쓰기

    처음 들어오고 블로그 디자인이 이렇게 예쁠수가 했는데 스킨 배포까지 해주시니 정말 감사합니다. 다른 글도 잼 있게 읽고 갑니다~

  17. 청춘일기 2016.07.14 17:45 신고  댓글주소  수정/삭제  댓글쓰기

    스킨도 만들어 배포하시는 분이셨군요^^
    능력자시네요.
    둘러보고 좋은 정보 많이 얻어가겠습니다~*

    • 책덕후 화영 2016.07.14 19:33 신고  댓글주소  수정/삭제

      아... 이건 좀 오래된 버전입니다... 최신버전은 따로 있어요. 사실 티스토리가 티에디션 등 업데이트가 생각보다 꽤 자주 있었기 때문에 이 버전 다운로드 받으시면 안되는게 많을겁니다. 웬만하면 최신버전 다운로드 해서 쓰는 것을 권장드립니다.

티스토리 툴바