마크쿼리! 반응형 웹 블로그 스킨 적용하기!

제 블로그는 처음부터! 마크쿼리의 Skeleton스킨을 적용하고 있었습니다.

이 스킨의 장점으로는 심플하면서도! 무엇보다 부트스트랩(bootstrap)을 기반으로한 반응형 웹 이라는 점입니다.

 

반응형 웹 이란?

페이지의 화면을 해상도의 크기에 맞게 자유자재로 변형하여 표현한 것입니다.

스마트폰을 예로들면 PC의 모니터와 스마트폰의 크기는 다릅니다.

모니터의 화면을 스마트폰에 그대로 나타내려면 스크롤이 길어지겠죠??

하지만 반응형 웹을 적용하면 스마트폰의 해상도에 맞게 메뉴나 본문의 내용을 조정하여 스크롤 없이 표현할 수 있습니다.

 

처음 블로그를 시작했을때 1.2.1버전 이었는데 오늘! 드디어 skeleton 3.0.0b버전을 적용했습니다!

 

공식 홈페이지 : http://markquery.com/

마크쿼리 커뮤니티 : http://markquery.com/community/

 

스킨 다운로드와 적용방법

우선 스킨을 받아야 겠죠?? http://markquery.com/에 접속하여 Download - Tistory 탭을 클릭! 

 

저는 Spider's Web을 사용하고 있습니다.

Doo Be Doo 의경우 사이드바를 없애고 본문 영역이 넓은 스킨입니다. 취향에 맞게 다운로드 해주세요!

다운로드후 과감히 압축을 풀어주고 티스토리의 관리자 화면에 들어갑니다!

 

스킨 - 스킨등록 버튼을 클릭합니다.

스킨을 등록하기전에 이전에 사용중인 스킨은 스킨저장버튼을 눌러 꼭 저장해두세요!

 

추가 버튼을 눌러 스킨이있는 폴더의 내용을 업로드 해주면되는데 grunt를 제외한 모든파일을 올려줍니다.

스킨폴더안에 폴더가 또있는경우 같이 지정해서 올리면 폴더의 내용은 안올라갈 수도 있기때문에

추가 버튼을 눌러 images폴더안에 들어가 images폴더안의 내용도 전부 올려줍니다!

 

추가 버튼을 눌러 스킨폴더안의 images폴더 내용 전부를 추가!

추가후 스킨명을 지정해주고 저장버튼을 누르면 됩니다.

 

저장후 보관함에서 마크쿼리 스킨을 적용버튼을 눌러 적용해주면 끝입니다!

 

v3.0.0을 적용후 v1.2.1과 비교해 봤습니다.

 

PC에서의 v1.2.1 

 

PC에서의 v3.0.0b 

3.0.0버전으로 오면서 상단 HOME쪽의 고정기능이 사라졌습니다. 전 플로팅메뉴가 좋아 다시 넣었습니다. 헤헤

또 상단 메뉴에 마우스오버시 회색으로 색상변경이 되며 드롭다운 메뉴도 만들어졌네요 ㅎㅎ

또한 기존의 글꼴과 글꼴크기 변경 위치가 변경되었고 클립모양의 아이콘을 클릭하게되면 인쇄가 가능합니다!

search바 위치도 카테고리 위로 변경되었네요 상단 이미지는 skin.html인데 title대신 이미지를 넣을수 있게끔 변경되었습니다.

 

모바일 v1.2.1 

 

모바일 v3.0.0b 

 

1.2.1의 경우 상단 홈메뉴가 고정메뉴 이며 ▤ 아이콘을 클릭하면 드롭다운 형식으로 카테고리와 search바가 나타납니다.

3.0.0b의 경우 상단에 ▤ 아이콘만 있으며 고정메뉴는 아닙니다. 아이콘을 클릭하면 드롭다운형태로 나타나게 되며

카테고리 메뉴가 존재할경우 V 아이콘을 눌러 하위메뉴를 드롭다운 형식으로 표현합니다.

 

저는 3.0.0b버전을 사용하면서 폰트와 검색 기능은 상단에 주고 상단메뉴를 고정 메뉴로 주었습니다.

또한 폰트와 검색이있던 태그를 없애 버리면서 최대한 본문의 내용이 많이 보이게끔 수정했죠 ㅎㅎ

상단 배너도 사이즈를 크게 줄였고요.. CSS를 잘알지못해 수정하는데 오랜시간이 걸렸지만..

크롬의 개발자도구(F12)로 하나씩 적용해가면서 하니 공부도 많이 되네요.. ^^

항상 티스토리 블로그를 운영하면서 반응형 스킨을 제공하지 않는점이 안타까웠는데

마크쿼리 스킨은 현재 무료로 배포중인데다 유료 못지않은 뛰어난 퍼포먼스를 자랑하는 반응형 웹 스킨인것 같습니다!