[티스토리 반응형스킨#2 - 시리즈1] 반응형스킨#2로 스킨 바꾸기

티스토리에서 기본으로 제공하고 있는 반응형 스킨은 #1과 #2가 있어요. 저희 블로그엔 현재(2016년 7월 21일 현재) 반응형 스킨 #1이 적용되어있어요. 물론 그간 많은 부분을 수정해서 사용하고 있죠.

티스토리 꾸미기 관련 이전 글 보기

[작은설탕 IT/Blog Tips] - 티스토리 블로그 이웃추가버튼 (링크버튼) 만들기

[작은설탕 IT/Blog Tips] - 티스토리 블로그에 카카오 스토리채널 연동하기

[작은설탕 IT/Blog Tips] - 티스토리 반응형스킨에 구글 애드센스 광고 삽입하기

위에 포스팅한 내용 외에도, 아직 포스팅은 하지않은 채 수정해놓은 기능들도 꽤 있어요. 이렇게 기능 수정을 하기까지는 여러 블로거님의 글을 참고하였는데요, 반응형 스킨 #2에 비해 반응형 스킨 #1의 사용자가 적어서 그런지 스킨 수정과 관련한 글들이 적더라구요. 그래서 과감히 스킨을 바꿔보려고 준비중입니다.

오늘은 이러한 준비의 일환으로 작은설탕의 또다른 블로그에 반응형 스킨 #2를 적용하고 추가 설정들을 셋팅하는 과정부터 시작해 볼게요. 일단 테스트 블로그에 적용 및 수정을 해나갈 꺼구요. 모든 스킨 수정이 어느정도 완성이 되면, 지금의 메인 블로그에도 적용하고 "#2 수정본 스킨"도 공유를 할 예정이예요. 많은 응원 부탁드려요. ^^

자~ 그럼 본격적으로 시작해 볼까요?

반응형 스킨 #2 적용하기

스킨을 바꾸기 위해서 우선 블로그의 관리페이지로 가서, 왼쪽에 "꾸미기 > 스킨" 메뉴로 이동해 주세요.

※ 스크롤이 길어지겠지만, 웹브라우저에서 작업하는 것들은 가급적 Full page를 캡쳐하여 사용하겠습니다.

스킨 적용은 생각보다 너무 간단하죠? ^^ 그럼 블로그 화면으로 넘어가서 바뀐 스킨을 확인해 볼까요?

짜잔~ 깔끔하죠? ㅎㅎ 일단 블로그 스킨 테스트를 위해서 글을 하나 작성해 놨어요. 대부분의 웹디자인 개발자들이 테스트 페이지를 만들때 "Lorem Ipsum"이라는 임시 콘텐츠를 만들어서 웹디자인을 테스트하곤 합니다. 그래서 저도 스킨 디자인 수정을 위해서 테스트 블로그엔 Lorem ipsum 컨텐츠를 하나 작성해 놨어요.

이렇게 글 하나가 들어가있으니까 스킨이 어떻게 보이는지 확인하기 좋죠? 그런데 반응형 스킨을 적용할 땐, 부수적으로 티스토리의 설정을 변경해주어야만 하는 것이 있습니다. 바로 모바일웹 스킨을 꺼주는 것 !!

반응형웹에 대해 이해하고 계신 분들은 알고계시듯이 반응형 웹에서는 화면의 사이즈 변화에 대응해서 웹의 디자인이 자동으로 바뀝니다. 즉, 모바일웹스킨을 별도로 사용하지 않아도, 하나의 웹페이지가 PC환경과 모바일환경에 모두 대응할 수 있다는 말이죠.

모바일웹 스킨 끄기

모바일웹 스킨 설정을 변경하기 위해서, 다시 블로그 관리페이지로 이동해주세요.

위 그림에서 표시했듯이, 관리페이지에서 "모바일웹 스킨" 메뉴로 들어가서 우측 상단의 "모바일웹 스킨 ON / OFF" 설정을 OFF로 지정해주신 후, 하단에 "저장" 버튼을 눌러서 변경된 설정을 저장해줍니다.

그럼 모바일 화면에서 어떻게 바뀌었는지 확인해볼까요?

왼쪽이 모바일웹 스킨 설정이 ON 일때이고, 오른쪽이 OFF 상태입니다. 보시는 것처럼, 모바일웹 스킨을 별도로 사용하지 않아도 모바일웹이 구현됩니다.

마치며...

이번 시간엔 제일 기초적인 "반응형 스킨 #2로 변경"하는 방법에 대해서 소개해 드렸습니다. 포스팅 서두에 말씀드렸다시피, 이번 글을 시작으로 "반응형 스킨 #2"를 수정해가면서 제 입맛에 맞는 스킨을 완성해 나가는 과정들을 알려드릴게요.

많은 응원 부탁드리구요~

저와 같이 의견을 교환해가며, "반응형 스킨 #2"를 함께 수정해가고 싶으신 분들은 친구추가 해서 자주 방문해 주시고, 댓글로 많은 의견 주세요. ^^

그럼 다음 시간에 뵈요~