초보 도전 시리즈 , 겁없이 반응형 스킨에 도전하다..

보통의 데스크탑 컴퓨터에서 깔끔하고, 잘 보이는 화면이,

모바일 환경에서 인터넷 환경(저같은 경우는 블로그)에 접속하면은 

만족스럽지 못한 화면이 나올때가 많습니다.

 이러한 이유는 처음에 최초 제작자체 의도가 데스크탑에 맞추어졌기 때문에, 

모바일같은 환경에서는 화면도 작을 뿐더러 가독성이 떨어지므로 

전혀 다른 결과가 연출되는 경우가 많습니다.

기껏해서 데스크탑으로 깔끔한 디자인에 글을 열심히 써놨는데, 

정작 모바일 환경에서는 구린화면이 보인다면....... 

모바일 환경에서만 접속하는 사람은 이거 화면 구리구만 

이렇게 생각하는 경우도 왕왕 있습니다. 

또한 요새의 대세는 모바일 환경으로 넘어가는 추세이므로, 

고수님들이 반응형 스킨, 반응형 스킨을 말씀하시길래, 

겁없이 저같은 초보도 반응형 스킨에 한번 도전해 보았습니다.

일단 반응형스킨이란 것이 무엇이냐고 하면? 

반응형이라는 말 자체에서 알수있듯이, 반응을 한다는 것이지요. 

예를들어서 화면이 줄어들면서 이것이 알아서 지가 자체적으로 반응하면서 자동 줄어든다 이렇게 이해할 수 있겠네요. 

데스크탑의 큰 화면 스킨이, 모바일 환경으로 접속한다면, 인공지능처럼 알아서 스킨 디자인이 쇽쇽 줄어든다? 뭐 이렇다는 개념입니다.^^ 대충 이해하셨나요?^^

 겁없는 도전을 하더라도 그래도 많은 분들이 쓰고, 그나마 대중화된 스킨을 쓰는게 좋다는 생각을 하게 되었습니다.

그 이유는 그래도 많은 분들이 써야, 물어볼데라도 생기지 않겠습니까^^

 그래서 여기저기 찾아본 결과

마크쿼리 님의 반응형 스킨 spider's web을 결정하였습니다.

역시나 유명한 것이어서 그런지 물어볼 수 있는 커뮤니티도 있고 좋습니다^^

(아직 물어본적은 없지만요 헤헤) http://markquery.com/community/

이곳은 다운 받는 곳 http://markquery.com/download/

1. 설치하기

일단 다운받아서 설치하는 것까지는 힘들지 않습니다. 

가보시면 아시겠지만, 다운받는 설명이 아주 자세히 나와 있기 때문입니다^^

설치하실때는 dist, src, test 파일은 업로드 하지 말라고 써있는데^^ 시키는 대로 했습죠^^

자~ 설치되어서 처음 블로그에 처음 보이는 화면입니다. 제일 위에 디자인텐이라고 써있죠^^

그러나 첫번째 난관에 봉착했습니다. 

과연 저 큰 화면을 어떻게 바꿔야 할까라고요. ㅠ.ㅠ

기본적으로 제공하는 MARKQUERY 마크쿼리 라고 써있는 저 대문짝을 바꿔보고 싶었거든요

그래서 연구에 연구를 해본결과( 저같은 초보에게는 벅찹니다^^)

이 그림의 사이즈는 1170*400이라는 것을 알아냈습니다. (가로 1170픽셀, 세로 400픽셀)

그래서 1170*400사이즈의 그림을 만들어서 거기다가 한번 넣어보자라는 생각을 하게 되었습니다.

그래서 제가 자체적으로 제작한 아래 대문을 제작하였습니다.^^ 물론 사이즈는 역시나 1170*400 사이즈로 만들었습니다.

저는 컴맹수준이라서 포토스케이프로 제작하였습니다^^ 진짜 쉬우니까 초보자 분들도 쉽게 만드실수 있습니다^^

원래 최초의 기본 대문 파일이름이 cover.jpg이었으므로, 

저는 그 그림을 삭제하고 저의 대문 이름을 cover.jpg로 저장하였습니다.^^

참고로 image폴더 안에 들어있습니다^^ 

그래서 티스토리 관리에 들어가셔서 HTML/CSS편집모드, 파일업로드 클릭하고 

파일목록을 잘 찾아보시면 images/cover.jpg가 있으실겁니다^^

그걸 삭제한다음에, 저의 것을 다시 cover.jpg로 올립니다^^ 

역시나 참고로 images 폴더안에 이미 저의 cover.jpg(나의 자가 제작대문)안에 그 사진파일을 복사해 집어넣었어야겠지요^^

그래서 파일업로드 클릭, 추가 클릭, 저의 cover.jpg클릭해서 올리고 

다시 html/css왼쪽을 클릭해서 확인버튼을 눌러주시면 이제 다 끝났습니다^^

이제 다 끝나셨으면, 인터넷창에서 새로고침 버튼만 한번 눌러준다면 짠~~

참고로, 아래의 선이 있어서 가운데 글씨를 쓰면 좀 안 이뻐보여서, 약간 글씨를 왼쪽으로 치우치게 만들었네요^^

짜잔~ 이렇게 됩니다^^ 히히

한번 도전해 보시길바랍니다^^ (직접 할 때는 거의 몇 시간 걸렸는데, 글로 정리하려니 짧네요^^ ㅎㅎ)

와~ 역시나 진짜 좋은 스킨이네요.

 알아서 밑에 댓글 창도 뜨고, 디자인 깔끔하고 딱 제스타일입니다^^

-아래에 댓글을 남겨주십시오 -