티스토리 뷰

팁&정보

티스토리 반응형 스킨 추천

.


티스토리 반응형 스킨 추천 + 스킨 수정 팁


블로그를 처음 시작하는 단계에서 블로그는 두 종류로 나뉩니다

네이버 블로그와 네이버가 아닌 블로그;


제 생각에 그 나머지 블로그 중에선 티스토리가 첫 고려대상이 아닐까 싶은데요^^;

아마 제가 티스토리를 쓰니까 더 그렇게 생각할지도 모르겠지만

티스토리 초대장 구하는 분들이 아직 많다는걸 보면 저만의 망상은 아닐지도 모릅니다


티스토리를 시작하는 이유 중에서 제가 가장 많이 본 게

아쉽게도 애드센스를 사용할 수 있다는 것이었네요 ㅠ.ㅠ(결국 돈)


두 번째로 많이 본 건 스킨의 자유도.

자유로운 스킨 설정 덕분에 애드센스도 달 수 있는 것이죠

무료호스팅이나 다름없는+_+


하지만 html과 css를 잘 모르는 분들은 스킨을 내 맘대로 바꾸고 싶어도

어려워서 커스텀하지 못하는 경우가 많지요


그래서 많은 분들이 무료로 스킨을 제작 배포하시고 있고

유료로 판매하는 분들도 많습니다


오늘은 무료로 배포되는 스킨들을 추려서 정리해 보려고합니다






먼저 티스토리 설정에 들어가면 기본 스킨들이 있습니다.

예전엔 공모전도 하고 반응형 스킨을 도입하면서 다양한 스킨이 업데이트 되었는데

그 후로 공식적인 새로운 스킨 업뎃이 없네요 ㅠ.ㅠ


제가 사용하는 스킨은 #1 스킨입니다.


심심하고 밋밋해 보일수도 있지만 1단형 중에서 제일 심플해서 사용하고 있습니다.

심플이즈더베스트니까요 ㅎ


공식스킨에도 맘에 드는게 없다 하시는 분들을 위한 추천










toDIVA 스킨입니다


제가 1단형을 사용하는 고집을 부리지 않는다면 당장에 바꿀 스킨이 toDIVA 스킨입니다

전체적으로 깔끔심플하면서 리스트표시가 썸네일로 되어있고

군더더기 없이 빠른 로딩이 돋보입니다

특징이라면 우측의 카테고리 목록을 좌측, 또는 우측으로 원하는 방향에 설정할 수 있다는 점입니다


toDIVA 스킨 보기









CCZ-CROSS 스킨입니다


역시 기본 2단형입니다 많은 분들이 2단형을 선호하시더라구요

toDIVA 스킨이 감성적이라고 느낀 반면 이 스킨은 보면서 공대 느낌이다 싶었습니다^^;

감성적인 무언가가 빠진것 같지만 깔금하게 정돈된 메뉴들과

한 탭에서 두 가지 메뉴를 같이 본다거나 스크롤시 위로 사라지는 상단바같은

기술적인 구현이 멋진 스킨이라 생각합니다


CCZ-CROSS 스킨 보기





나나스킨 버전5입니다


1단형으로 기본적으로 제가 쓰는 #1스킨과 비슷하지만

상단에 카테고리가 있고 썸네일 리스트 표시방법이 유연하고 멋집니다


나나 스킨 보기







패스트부트 스킨입니다


2단형 스킨으로 CCZ-CROSS 스킨과 많이 비슷하면서도

기술적 구현에 중점을 둔(?) 스킨이라는 느낌입니다

블로그 운영에 도움이 되는 글이 많으니 참고하세요^^


FastBoot 스킨 보기






WNSKIN 스킨 입니다


심플하면서 썸네일이나 메뉴 마우스 오버 효과가 예쁜 2단형 스킨입니다

유료로 판매하는 스킨도 있지만 몇 가지 무료 스킨이 더 있으니 둘러보세요


WNSKIN 스킨 보기







다 알던 것들이라구요?! 무료스킨은 많이 개발되고 있지 않아서 어쩔수 없네요

실력있는 분들은 전부 유료스킨이라서 말이죠

근데 가끔 무료스킨과 비슷한 유료스킨을 구매하는 분들도 보이더라구요

무료 스킨도 커스텀만 잘하면 나만의 개성있는 스킨이 될 수 있습니다.


티스토리 스킨 페이지에도 다양한 스킨이 있으니 한 번 둘러보시기 바랍니다.

단, 유료스킨 판매 페이지처럼 변질되고 있다는 점;


티스토리 스킨 페이지 보기


블로그 시작하는 분들에겐 유료스킨은 그닥 추천하고 싶진 않지만^^;

유료스킨 몇 개 소개해 보자면요



심플하면서 감각적인 4가지 종류별 가작 스킨

카테고리 마우스 오버에 보이는 썸네일이 독특한 탕비수다 스킨

2단형 스킨으로 자잘한 디테일이 돋보이는 프라치노 공간 스킨



아마 티스토리 하시는 분들이라면 이 스킨들도 많이 보셨을 겁니다.

더 많은 유료스킨이 있지만 제 눈에 제일 잘 만든 유료스킨이 아닌가 싶네요







그리고 초보자분들을 위한 스킨커스텀 깨알보다 작은 먼지팁을 드리자면^^;

PC브라우저에서 F12를 누르면 보고 있던 사이트의 HTML구조를 볼 수 있습니다.





크롬브라우저 기준입니다.

익스플로러나 파이어폭스도 비슷합니다. 사파리는 모르겠네요;






이렇게 본인 블로그의 구조를 볼 수 있는데요

좌측에 '일상'이라는 글자의 색을 바꾸고 싶다면 제일 위에 선택 버튼을 누르고 '일상'을 클릭합니다






일상 글자가 선택됐습니다.

상단에 글자의 HTML구조와 아래 CSS이 보입니다.

CSS에 폰트 사이즈와 색깔이 표시되어 있네요

여기서 수정을 원하는 부분을 변경해봅니다.

어차피 테스트삼아 변경하는거니 마구 바꿔도 상관없습니다.

코드표를 알고 있으면 직접 입력하거나 하늘색 파란 네모를 클릭하시면 색상 팔레트가 나타납니다






빨간색으로 변경하고 폰트 크기를 17로 바꿔보았습니다.

이제 이 설정이 마음에 든다면 화살표시된 부분을 기억합니다.

티스토리 스킨 설정에 있는 CSS부분은 위에 표시된 style.css 에 기록됩니다

화살표는 css에 299번째 줄에 기록되었다는 뜻입니다.

이제 스킨설정에 들어가서 변경해주면 됩니다.








css탭 299번째 줄을 찾으면 방금 전 수정해 봤던 css 값이 있습니다.

원하는 값으로 수정하고 저장하면 끝


글씨크기나 색깔 외에 바탕색이나 본문 넓이 같은 간단한 것들은 이렇게 찾아서 수정할 수 있습니다.

코드가 어디 있는지 어디를 변경해야 하는지 모르는 css 초보자분들을 위한 팁이었습니다







처음 반응형이라는 말을 듣고 전지전능한 스킨이라며 엄청 충격을 받았더랬죠 ㅎㅎ

사실 반응형 웹이라는건 해상도에 따라 조건 설정을 해준 것 뿐입니다.


"가로 해상도가 500px이하면 이렇게 보여라,

가로 해상도가 501px이상~1200px 이하면 이렇게 보여라"

라는 조건을 달아 놓는거죠


그래서 대부분의 반응형 스킨은 3종류 정도의 설정을 해줍니다

PC웹화면 사이즈, 태블릿 정도의 화면 사이즈, 모바일 사이즈

정도로 설정해주고 3가지 화면을 만들어 놓는겁니다


스킨을 변경했다면 확인하는게 기본이겠죠

하지만 모든 브라우저, 모든 해상도의 디바이스를 가지고 있지 않기때문에

제가 가끔 사용하던 해상도 따라 화면보기 사이트가 있었는데요


트로이 사이트 보기


다음에서 제공하는 이 사이트는 예쁜 UI로 다양한 모바일 해상도를 볼 수 있어서 좋습니다

하지만 본인의 디바이스 해상도 이상의 모습을 볼 수 없는게 아쉬웠습니다.


만일 내 노트북이 1366 x 768 이라면

데스크탑에서 제일 많이 사용하는 1920 x 1080 해상도를 볼 수 없다는 겁니다.


이런 사이트가 없나 찾다가 알게 된 팁!




F12키를 누르면 나오는 html코드 창에서 선택기 옆에 붙은 버튼입니다.

이걸 누르면 현재 보는 화면을 원하는 해상도로 볼 수 있게 해줍니다.






미리 설정된 몇 가지 해상도가 있구요

가로화면도 볼 수 있고 원하는 해상도를 직접 입력해서 저장해 놓을 수도 있습니다.

저는 제 폰인 갤럭시 S8+와 가끔 확인해보는 고해상도 정도를 추가했습니다.

보통 제 폰하고 아이패드 2개만 확인해요 ㅎㅎ


데스크탑 PC는 보통 1920 x 1080 이라고 보면 되는데

이것보다 작은 해상도를 사용하는 분들은 체크해보시는게 좋지 않을까 싶습니다

어떤 블로그에 들어가보면 레이아웃이 일그러진 분들이 꽤 있더라구요


모든 해상도를 맞출수는 없지만 대표적인 3단계 PC, 태블릿, 모바일 정도로 간략하게 확인하는게 좋겠죠^^


이 기능은 파이어폭스나 익스플로러에도 비슷하게 있긴한데 제 기준에 제대로 작동이 안되네요

그리고 기기가 지원하는 것보다 큰 해상도는 크롬 브라우저만 되더군요(아니면 알려주세요^^;)




간단한 팁에 유명한 스킨만 모아놓은 포스팅을 너무 길게 썼네요;

티스토리 시작하는 분들에게 도움이 되길 바랍니다^^

저작자 표시 비영리 변경 금지
신고
  • 프로필사진 에카앨 저도 알려주신 스킨들을 주로 사용했던 기억이 나네요~ 티스토리에서 반응형 스킨이 더 많이 나왔으면 좋겠어요~ 2017.11.17 09:27 신고
  • 프로필사진 청춘일기 그러게요 티스토리에서 스킨 공모전을 한 번 더 했으면 좋겠네요 ㅎㅎ
    2017.11.18 10:30 신고
  • 프로필사진 친절한민수씨 저도 유료로 스킨 쓰는데... 가작스킨...
    네이버처럼 많은 스킨이 있었으면 좋겠어요.

    전 좀 아기자기한게 좋은데...없네요 ㅠㅠ
    2017.11.17 12:08 신고
  • 프로필사진 청춘일기 민수님 스킨은 지금도 아기자기한거 같은데 시현이 때문인가요? ㅎㅎ
    가작스킨도 다 예쁘던걸요
    2017.11.18 10:32 신고
  • 프로필사진 garam_林 전 그냥 깔끔한 스킨이 좋아요. 반응형이니, 뭐니... 잘 모르겠구요.ㅋㅋ
    컴알못이라 걍 제가 찍은 사진이나 그린 그림으로 꾸미는 게 좋더라구요.^^;
    2017.11.17 16:36 신고
  • 프로필사진 청춘일기 맞습니다 스킨보다 내용에 더 신경써야하는데 말이죠 자꾸 스킨을 만지작ㅠ.ㅠㅎㅎ
    그래도 가끔은 형식이 내용을 뒷받침해줄때도 있잖아요^^
    2017.11.18 10:34 신고
  • 프로필사진 이은수 저도 네이버와 티스토리를 함께 쓰다가 동일한 내용을 네이버와 함께 올리면 저품질 블로그가 된다고 해서 지금은 네이버는 거의 방치 수준 입니다.ㅋㅋㅋ
    제가 티스토리를 쓰는 이유는 물론 스킨도 있겠지만 (사실 스킨을 수정할수 있을 정도의 능력은 안돼서 맘에 드는 유료를 사용하고 있지요..ㅋㅋ) 사진을 크게 올릴수 있다는 장점 때문에 티스토리를 사용하고 있습니다.
    근데 저의 사진 이웃들이 거의 네이버를 블로그를 하기 때문에 왕래가 안돼서 조금 아쉬운 점은 있지만... 그래도 계속 티스토리를 쓸것 같네요...
    방치된 네이버 블로그가 좀 아쉽긴 합니다...ㅋㅋ
    아, 근데 티스토리가 아직은 좀 아쉬운점이 있긴 해요... 특히 이웃 관리 같은 거는 좀 많이 아쉬운것 같아요.. 네이버에 비해서....ㅋ
    2017.11.17 19:54 신고
  • 프로필사진 에카앨 그 부분은 늘 안타까운 부분이죠~ 티스토리가 이웃왕래가 좀 편하게 바뀌었음 좋겠어요 2017.11.18 10:32 신고
  • 프로필사진 청춘일기 아, 저 티스토리 처음 이사하고 그런줄 모르고 네이버 포스팅했던걸 하나씩 가져왔던 기억이 나네요 ㅎㅎ 나중에 보니 티스토리는 검색이 안되더라구요+_+ 그래서 네이버 쪽은 다 비공개로 돌리고 닫아버렸어요
    이은수님 스킨도 탕비수다 스킨이셨던걸로 기억하는데^^ 저 그거 무료일때 쓰다가 이걸로 갈아탔어요 ㅎㅎ
    사진이웃이 대부분 네이버시군요 티스토리 이웃관리가 아쉽긴 하지만 무엇보다도 네이버는 사진이 클릭하기 전에는 압축한 저화질로 보여준다는것도 제가 네이버를 버린 이유였어요^^
    2017.11.18 10:38 신고
  • 프로필사진 묘한오빠 트로이하고 F12에서 나에게 맞는 해상도보기,
    요건 정말 알짜 팁~입니다. 덕분에 하나 알고 갑니다
    2017.11.17 21:10 신고
  • 프로필사진 청춘일기 F12 ㅎㅎ 전 심심하면 다른 블로그도 눌러서
    바꿔본답니다 ㅋㅋ
    2017.11.18 10:39 신고
  • 프로필사진 _Chemie_ 우와 정말 좋은 팁들 감사해요.
    먼지팁이라고 하신게 저에게는 제일 유용한 기능이네요. 완전 신세계!!!!

    스킨은... 저도 이런저런 곳을 방황하다 정착한거라 대부분 알던거기는 한데, 유료스킨 중 가작은 몰랐던 건데 깔끔하고 이쁘네요.
    무료 스킨들도 저렇게 다양한 줄은 몰랐어요! 미리 알았더라면ㅋㅋㅋ 너무 일찍부터 유료스킨으로 넘어오진 않았을지도 모르는데 말이죠ㅋㅋ
    2017.11.17 23:56 신고
  • 프로필사진 청춘일기 이 글에 댓글다신 세 분이 탕비수다 스킨이라니+_+ 그만큼 잘만든 스킨이라는 거겠죠 ㅎㅎ
    저도 탕비수다 무료일때 써봤는데 제작자분이 계속 유지보수(?) 하시는것 같아 좋아보이더라구요. 차마 돈을 낼 용기;가 없었습니다 ㅎㅎ
    2017.11.18 10:43 신고
  • 프로필사진 슬_ 가끔 1단형을 쓰고 싶다는 생각을 해요. 하지만... 유료 스킨을 쓰고 있으니...ㅋㅋㅋㅋㅋㅋㅋ
    바꾸고 싶은 마음을 꾹 참고 있네욬ㅋㅋㅋㅋㅋㅋㅋㅋ
    특히 청춘일기님처럼 예쁜 사진 크게 올리는 이웃분들 보면 뽐뿌가 심하게 옵니닼ㅋㅋㅋ
    2017.11.18 02:57 신고
  • 프로필사진 청춘일기 전 사진을 크게 올리겠다는 욕심으로 1단형을 고집하고 있지만 슬_님같은 스킨보면 어떻게든 비슷하게 바꿔보고 싶어집니다ㅠ.ㅠ 하지만 바로 포기 ㅎ
    슬_님 스킨 예뻐요 썸네일에 유튜브도 바로바로 나오고 ㅎㅎ
    2017.11.18 10:45 신고
  • 프로필사진 카멜리온 많은 분들이 사용하시는 스킨들이 보이네요~~~
    저도 반응형... 고려했었는데 재작년부터.. 그런데 반응형으로 막 바꾸면 블로그유입에 문제가 발생할 수 있다는 글을 보고서 일단 포기하고 지냈었죠.
    그래도 지금의 완전 옛날 스킨같은걸 사용한지 꽤 오래되어서 조만간 바꿀까 생각하고 있습니다.
    반응형 부럽더라구요 ㅠ.ㅠ
    2017.11.18 19:05 신고
  • 프로필사진 청춘일기 카멜리온님은 방문자수가 엄청나시니까+_+ 유입이 떨어지면 막 바꾸실 수 없겠네요. 이 글도 참고해 보세요
    http://blog.naver.com/naver_search/220766056734
    저는 어차피 너무 적어서 마구 바꿔보고 있어요 ㅎㅎㅎ

    2017.11.20 22:34 신고
  • 프로필사진 블라 블라 제가 사용하고있는 todiva 스킨도 소개되어있어서 왠지 뿌듯(?)한 느낌이 ㅎㅎ
    유료스킨으로 소개해주신 탕비수다 스킨이 딱 제 스타일이긴 한데... 고민이 살짝 되네요 ㅎㅎ
    2017.11.19 13:10 신고
  • 프로필사진 청춘일기 toDIVA가 2단중 제일 깔끔한거 같아요
    저 세가지 유료스킨 모두 돈주고 사용해도 아깝지 않게 잘 만들었다고 생각됩니다^^

    2017.11.21 16:47 신고
  • 프로필사진 밥짓는사나이 저도 스킨을 좀 바꿔볼까요 ㅋㅋ 빠르다고 적어주신 todiva 로 도전해 보아야 하겠어요. ㅎ 2017.11.20 23:40 신고
  • 프로필사진 청춘일기 밥짓는사나이님 블로그처럼 2단에 목록썸네일 표시가 예쁜 스킨입니다^^ 2017.11.21 16:54 신고
  • 프로필사진 Deborah 아주 좋은 팁이네요. 몰랐던 분들에게는 환영을 받을 팁입니다. 2017.11.21 03:22 신고
  • 프로필사진 청춘일기 감사합니다 도움되면 좋겠네요^^ 2017.11.24 22:45 신고
  • 프로필사진 디네로 우와아 스킨들 꿀팁이네요 ㅎㅎㅎ
    저도 청춘일기님 사용하시는 #1스킨 쓰다가 지금은 패스트붓 스킨을 쓰고있땁니다~~
    F12 기능은 알고있었는데 HTML/CSS로 활용법은 정말 잘써먹을수 있을것같습니다 ㅋㅋ 감사합니다~~
    블로그 디자인이랑 계속 꾸미고 변경해보고 있는데 하나하나 알아가는 재미가있는것 같네요
    오늘도 배우고갑니다 ㅎㅎ 좋은하루되십쇼!@~
    2017.11.22 00:04 신고
  • 프로필사진 청춘일기 F12^^ 스킨 바꿀때 유용하게 쓸 수 있죠 ㅎㅎ
    #1스킨인거 봤는데 패스트부트로 바꾸셨었군요 멋진 스킨으로 거듭나길 바랍니다^^
    2017.11.24 22:46 신고
  • 프로필사진 Normal One 저는 프라치노 쓰고 있습니다 *_* 작년 초에 블로그 처음 시작했을 땐 스킨에 욕심내서 이것저것 써보고 그랬는데,
    유료로 구입하고선 계속 이 스킨만 쓰고 있어요.ㅋㅋㅋㅋ 블로그 하는 시간이 줄기도 했지만(...)

    아무튼, 오랜만에 스킨 글 있으니 옛날 생각도 나고 그러네요 :)
    2017.11.24 00:31 신고
  • 프로필사진 청춘일기 프라치노 깔끔하죠 유료를 쓰시는 분들은 되도록 안바꾸게 되나보네요. 유료스킨이
    거의 끝판왕같은 스킨이기도 하니까요^^ㅎㅎ
    2017.11.24 22:47 신고
  • 프로필사진 kamadmin 구글링 하다가 이렇게 찾아오게 되었습니다. 같은 #1 스킨을 쓰는데 이렇게 블로그 분위기가 다를수 있다니 놀랍네요.

    혹시 #1 스킨 꾸미는 강좌같은거 쓰실 생각은 없으신가요? ^^;

    가장 궁금한게 왼쪽 카테고리 펼치는게 궁금하네요. 혹시 팁좀 주실수 있으신가요?.. 정말 입이 떡벌어지고 갑니다.

    #1로 블로그 만들었다가 맘에안들어서 바꿀까말까 고민중이였거든요 ㅎㅎ
    2017.11.30 16:39 신고
  • 프로필사진 청춘일기 우선 좋은 말씀과 방문 감사합니다
    근데 제가 강좌를 할 만한 능력이 없는걸요 ^^;
    카테고리나 조금씩 커스텀 한거는 다 여기저기 짜집기 한거라 저도 어디에 뭔 코드를
    넣었는지 몰라서 바로 알려드리긴 어렵고 나중에 정리해서 한 번 올려볼게요ㅎ
    2017.11.30 22:39 신고
댓글쓰기 폼

 팁&정보 카테고리 더보기


공지사항