티스토리 반응형 스킨 추천

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

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

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

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

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

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

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

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

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

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

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

하지만 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단형 스킨으로 자잘한 디테일이 돋보이는 ○○스킨

(해당스킨은 2단 스킨에서 1단으로 변경하면서

아무리 봐도 제 스킨을 보고나서 모티브를 얻은게 아닌가 의심;이 될 정도로

제가 사용하는 커스텀#1스킨의 변형이므로 소개에서 제외하기로 합니다.)

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

더 많은 유료스킨이 있긴하지만 돈을 지불할 정도의 스킨은 저 두 가지 정도라고 생각되네요.

(물론 제가 모든 스킨을 다 본건아닙니다^^;)

나머지 유료스킨들은 대부분 기본스킨을 조금 정리했을뿐이라...;

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

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, 태블릿, 모바일 정도로 간략하게 확인하는게 좋겠죠^^

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

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

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

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