티스토리 반응형 스킨 추천 + 스킨 수정 팁
블로그를 처음 시작하는 단계에서 블로그는 두 종류로 나뉩니다
네이버 블로그와 네이버가 아닌 블로그;
제 생각에 그 나머지 블로그 중에선 티스토리가 첫 고려대상이 아닐까 싶은데요^^;
아마 제가 티스토리를 쓰니까 더 그렇게 생각할지도 모르겠지만
티스토리 초대장 구하는 분들이 아직 많다는걸 보면 저만의 망상은 아닐지도 모릅니다
티스토리를 시작하는 이유 중에서 제가 가장 많이 본 게
아쉽게도 애드센스를 사용할 수 있다는 것이었네요 ㅠ.ㅠ(결국 돈)
두 번째로 많이 본 건 스킨의 자유도.
자유로운 스킨 설정 덕분에 애드센스도 달 수 있는 것이죠
무료호스팅이나 다름없는+_+
하지만 html과 css를 잘 모르는 분들은 스킨을 내 맘대로 바꾸고 싶어도
어려워서 커스텀하지 못하는 경우가 많지요
그래서 많은 분들이 무료로 스킨을 제작 배포하시고 있고
유료로 판매하는 분들도 많습니다
오늘은 무료로 배포되는 스킨들을 추려서 정리해 보려고합니다
먼저 티스토리 설정에 들어가면 기본 스킨들이 있습니다.
예전엔 공모전도 하고 반응형 스킨을 도입하면서 다양한 스킨이 업데이트 되었는데
그 후로 공식적인 새로운 스킨 업뎃이 없네요 ㅠ.ㅠ
제가 사용하는 스킨은 #1 스킨입니다.
심심하고 밋밋해 보일수도 있지만 1단형 중에서 제일 심플해서 사용하고 있습니다.
심플이즈더베스트니까요 ㅎ
공식스킨에도 맘에 드는게 없다 하시는 분들을 위한 추천
toDIVA 스킨입니다
제가 1단형을 사용하는 고집을 부리지 않는다면 당장에 바꿀 스킨이 toDIVA 스킨입니다
전체적으로 깔끔심플하면서 리스트표시가 썸네일로 되어있고
군더더기 없이 빠른 로딩이 돋보입니다
특징이라면 우측의 카테고리 목록을 좌측, 또는 우측으로 원하는 방향에 설정할 수 있다는 점입니다
CCZ-CROSS 스킨입니다
역시 기본 2단형입니다 많은 분들이 2단형을 선호하시더라구요
toDIVA 스킨이 감성적이라고 느낀 반면 이 스킨은 보면서 공대 느낌이다 싶었습니다^^;
감성적인 무언가가 빠진것 같지만 깔금하게 정돈된 메뉴들과
한 탭에서 두 가지 메뉴를 같이 본다거나 스크롤시 위로 사라지는 상단바같은
기술적인 구현이 멋진 스킨이라 생각합니다
나나스킨 버전5입니다
1단형으로 기본적으로 제가 쓰는 #1스킨과 비슷하지만
상단에 카테고리가 있고 썸네일 리스트 표시방법이 유연하고 멋집니다
패스트부트 스킨입니다
2단형 스킨으로 CCZ-CROSS 스킨과 많이 비슷하면서도
기술적 구현에 중점을 둔(?) 스킨이라는 느낌입니다
블로그 운영에 도움이 되는 글이 많으니 참고하세요^^
WNSKIN 스킨 입니다
심플하면서 썸네일이나 메뉴 마우스 오버 효과가 예쁜 2단형 스킨입니다
유료로 판매하는 스킨도 있지만 몇 가지 무료 스킨이 더 있으니 둘러보세요
다 알던 것들이라구요?! 무료스킨은 많이 개발되고 있지 않아서 어쩔수 없네요
실력있는 분들은 전부 유료스킨이라서 말이죠
근데 가끔 무료스킨과 비슷한 유료스킨을 구매하는 분들도 보이더라구요
무료 스킨도 커스텀만 잘하면 나만의 개성있는 스킨이 될 수 있습니다.
티스토리 스킨 페이지에도 다양한 스킨이 있으니 한 번 둘러보시기 바랍니다.
단, 유료스킨 판매 페이지처럼 변질되고 있다는 점;
블로그 시작하는 분들에겐 유료스킨은 그닥 추천하고 싶진 않지만^^;
유료스킨 몇 개 소개해 보자면요
● 심플하면서 감각적인 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, 태블릿, 모바일 정도로 간략하게 확인하는게 좋겠죠^^
이 기능은 파이어폭스나 익스플로러에도 비슷하게 있긴한데 제 기준에 제대로 작동이 안되네요
그리고 기기가 지원하는 것보다 큰 해상도는 크롬 브라우저만 되더군요(아니면 알려주세요^^;)
간단한 팁에 유명한 스킨만 모아놓은 포스팅을 너무 길게 썼네요;
티스토리 시작하는 분들에게 도움이 되길 바랍니다^^
'팁&정보' 카테고리의 다른 글
'너의 이름은' 무료 다운로드!! (15) | 2017.12.22 |
---|---|
올레TV (+모바일) 블랙프라이데이 할인 (14) | 2017.11.28 |
티스토리 반응형 스킨 추천 (48) | 2017.11.17 |
환율우대 90% + 은행에서 기다리지 않는 팁! (15) | 2017.10.20 |
유튜브 채널 이름 변경하기 (36) | 2017.02.24 |
굿셔터 캠페인 : 지금 잘 찍고 있나요? (21) | 2017.02.18 |
우와 정말 좋은 팁들 감사해요.
먼지팁이라고 하신게 저에게는 제일 유용한 기능이네요. 완전 신세계!!!!
스킨은... 저도 이런저런 곳을 방황하다 정착한거라 대부분 알던거기는 한데, 유료스킨 중 가작은 몰랐던 건데 깔끔하고 이쁘네요.
무료 스킨들도 저렇게 다양한 줄은 몰랐어요! 미리 알았더라면ㅋㅋㅋ 너무 일찍부터 유료스킨으로 넘어오진 않았을지도 모르는데 말이죠ㅋㅋ
이 글에 댓글다신 세 분이 탕비수다 스킨이라니+_+ 그만큼 잘만든 스킨이라는 거겠죠 ㅎㅎ
저도 탕비수다 무료일때 써봤는데 제작자분이 계속 유지보수(?) 하시는것 같아 좋아보이더라구요. 차마 돈을 낼 용기;가 없었습니다 ㅎㅎ
가끔 1단형을 쓰고 싶다는 생각을 해요. 하지만... 유료 스킨을 쓰고 있으니...ㅋㅋㅋㅋㅋㅋㅋ
바꾸고 싶은 마음을 꾹 참고 있네욬ㅋㅋㅋㅋㅋㅋㅋㅋ
특히 청춘일기님처럼 예쁜 사진 크게 올리는 이웃분들 보면 뽐뿌가 심하게 옵니닼ㅋㅋㅋ
전 사진을 크게 올리겠다는 욕심으로 1단형을 고집하고 있지만 슬_님같은 스킨보면 어떻게든 비슷하게 바꿔보고 싶어집니다ㅠ.ㅠ 하지만 바로 포기 ㅎ
슬_님 스킨 예뻐요 썸네일에 유튜브도 바로바로 나오고 ㅎㅎ
많은 분들이 사용하시는 스킨들이 보이네요~~~
저도 반응형... 고려했었는데 재작년부터.. 그런데 반응형으로 막 바꾸면 블로그유입에 문제가 발생할 수 있다는 글을 보고서 일단 포기하고 지냈었죠.
그래도 지금의 완전 옛날 스킨같은걸 사용한지 꽤 오래되어서 조만간 바꿀까 생각하고 있습니다.
반응형 부럽더라구요 ㅠ.ㅠ
카멜리온님은 방문자수가 엄청나시니까+_+ 유입이 떨어지면 막 바꾸실 수 없겠네요. 이 글도 참고해 보세요
http://blog.naver.com/naver_search/220766056734
저는 어차피 너무 적어서 마구 바꿔보고 있어요 ㅎㅎㅎ
제가 사용하고있는 todiva 스킨도 소개되어있어서 왠지 뿌듯(?)한 느낌이 ㅎㅎ
유료스킨으로 소개해주신 탕비수다 스킨이 딱 제 스타일이긴 한데... 고민이 살짝 되네요 ㅎㅎ
toDIVA가 2단중 제일 깔끔한거 같아요
저 세가지 유료스킨 모두 돈주고 사용해도 아깝지 않게 잘 만들었다고 생각됩니다^^
저도 스킨을 좀 바꿔볼까요 ㅋㅋ 빠르다고 적어주신 todiva 로 도전해 보아야 하겠어요. ㅎ
밥짓는사나이님 블로그처럼 2단에 목록썸네일 표시가 예쁜 스킨입니다^^
아주 좋은 팁이네요. 몰랐던 분들에게는 환영을 받을 팁입니다.
감사합니다 도움되면 좋겠네요^^
우와아 스킨들 꿀팁이네요 ㅎㅎㅎ
저도 청춘일기님 사용하시는 #1스킨 쓰다가 지금은 패스트붓 스킨을 쓰고있땁니다~~
F12 기능은 알고있었는데 HTML/CSS로 활용법은 정말 잘써먹을수 있을것같습니다 ㅋㅋ 감사합니다~~
블로그 디자인이랑 계속 꾸미고 변경해보고 있는데 하나하나 알아가는 재미가있는것 같네요
오늘도 배우고갑니다 ㅎㅎ 좋은하루되십쇼!@~
F12^^ 스킨 바꿀때 유용하게 쓸 수 있죠 ㅎㅎ
#1스킨인거 봤는데 패스트부트로 바꾸셨었군요 멋진 스킨으로 거듭나길 바랍니다^^
저는 프라치노 쓰고 있습니다 *_* 작년 초에 블로그 처음 시작했을 땐 스킨에 욕심내서 이것저것 써보고 그랬는데,
유료로 구입하고선 계속 이 스킨만 쓰고 있어요.ㅋㅋㅋㅋ 블로그 하는 시간이 줄기도 했지만(...)
아무튼, 오랜만에 스킨 글 있으니 옛날 생각도 나고 그러네요 :)
프라치노 깔끔하죠 유료를 쓰시는 분들은 되도록 안바꾸게 되나보네요. 유료스킨이
거의 끝판왕같은 스킨이기도 하니까요^^ㅎㅎ
구글링 하다가 이렇게 찾아오게 되었습니다. 같은 #1 스킨을 쓰는데 이렇게 블로그 분위기가 다를수 있다니 놀랍네요.
혹시 #1 스킨 꾸미는 강좌같은거 쓰실 생각은 없으신가요? ^^;
가장 궁금한게 왼쪽 카테고리 펼치는게 궁금하네요. 혹시 팁좀 주실수 있으신가요?.. 정말 입이 떡벌어지고 갑니다.
#1로 블로그 만들었다가 맘에안들어서 바꿀까말까 고민중이였거든요 ㅎㅎ
우선 좋은 말씀과 방문 감사합니다
근데 제가 강좌를 할 만한 능력이 없는걸요 ^^;
카테고리나 조금씩 커스텀 한거는 다 여기저기 짜집기 한거라 저도 어디에 뭔 코드를
넣었는지 몰라서 바로 알려드리긴 어렵고 나중에 정리해서 한 번 올려볼게요ㅎ
혹시 #1 스킨 홈 부분 쉽게 없앨수 있는 방법 좀 알수 있을까요???
HTML CSS는 모르는데...홈부분이 좀 거추장 스러워서 좀좀더 심플해지고 싶네요...-_-;;;;
홈 부분이라면 어디를 말씀하시는건지? 제일 상단 왼쪽 프로필 보이는 부분말인가요?
아...그니까...글올렸을때 첫페이지요..
그냥 마지막 포스팅이 메인페이지가되게 하고 싶거든요..;;;
아, 그거 설정에서 바꿀수 있는걸로 아는데 #1스킨도 되는지 모르겠네요 잇다 찾아보고 답글 남길게요^^;
#1 스킨은 기본적으로 목록리스트만 출력되게 만들어져 있네요. 직접 HTML 코드를 넣어주고 설정에서 만져주면 될 것 같은데 코드를 넣어보고 완성되면 다시 답변 드릴게요. 이건 시간이 걸릴것 같으니 기다리진 마시구요^^;ㅎ
에고 감사합니다...^^
괜히 저 때문에 고생하시지는 마세요...죄송스럽습니다...ㅠ;;
알겠습니다 ㅎㅎ 근데 링크타고 갔더니 #1스킨이 아니셔서;;
블로그 스킨이 참예뻐서 저도 #1로 설정했지만 안예쁘네요!! 시험도 끝났는데 저에게 스킨설정이나 블로그 운영에 대해 알려주십시요!!
간절히 부탁드립니다!! (duddnd04cd9663@naver.com)
하하하^^; 좋게 봐주셔서 감사합니다.
티스토리 공지를 보니 새로운 스킨을 곧 선보인다고 합니다. https://notice.tistory.com/2451?category=110385
우선 그것을 기다렸다 사용해보세요. 이미지컷만 보면 너무 예뻐서 제 스킨과는 비교도 안될듯 ㅋ
저도 기대중입니다^^
저는 청춘일기님 스킨이 제일 좋은데요, 제 블로그 스킨좀 꾸며주시면 안될까요?
포스팅도 깔끔하고 스킨도 무려 혼자서 설정하셨다는 것에 놀라고 갑니다 ㅇㅁㅇ...
정말 공부하는 것이 힘이네요. html 공부 열심히 해야겠어요.
좋은 글에 감사드리며 글 잘 보고 갑니다 :)
toDIVA 스킨 다운방법 알려주세요...제가 티스토리 왕초보랍니다.
링크가 빈 페이지로 연결되고 있었군요. 스킨 배포페이지로 링크 바꿔놨습니다.
https://todiva.tistory.com/13
모바일반응형 <- https://roachsblog.tistory.com/ 이블로그들어가시면 모바일반응형 예를들리면 이렇게하고싶는데
@media screen and (max-width: 768px)
css로 하시는거맞으신가영?
-
-
-
바퀴의 블로그
Software
Hardware
Game
Technology
질문 & 답변
질문/답변 & 방명록
답변좀해주세용 ㅎ
질문의 요지를 정확히 파악하진 못했지만^^;
반응형을 스킨을 만들려면 css에 위와 같은 미디어쿼리(@media~~)를 사용하는게 맞습니다.
그리고 이 포스팅은 오래되서 새로 나온 티스토리 기본스킨들이 없는데 새로운 스킨들도 반응형으로 작동하니 기본 스킨을 사용하면서 조금씩 커스텀하는건 추천드립니다. https://www.tistory.com/skin
제가 지금컴퓨터학원다니는데요 HTML/CSS 배우고는과정인데요
CSS로 모바일번응형으로 만든거맞죠?
모바일버전 반응형 예를들리면 https://roachsblog.tistory.com/ - 이블로그 들어가시면
@media screen and (max-width: 768px)
-
-
-
바퀴의 블로그
Software
Hardware
Game
Technology
질문 & 답변
질문/답변 & 방명록
예를들리면 이렇게 만들고싶는데 답변부탁드립니다~
안녕하세요 제블로그 꾸미고잇습니다
모바일로 들어갈때 스킨반응형 스킨만들라고하는데
어디서 만들지 잘모르겠습니다 답변좀 부탁드립니다
https://imgur.com/a/RDB7h8U
https://imgur.com/a/D3TvTwm
애드센스 광고 이제달라고하는데요
https://imgur.com/a/mDDriVQ
https://imgur.com/a/YRPcBR1 <- 컴퓨터로 볼때 모바일로 이렇게볼라고하는데 스킨편집할라고하는데 잘모르겠습니다
이렇게 달라고하는데 애드센스광고 달는방법알려주세요
HTML/CSS 과정다니면 강사님이랑 같이 배우는중이라서 스킨직접만드고잇습니다
강사님이 모바일코드가 잘모른다고해서 링크나 알려주시면 감사합니다!