마크쿼리, 반응형 스킨 적용 실패기, 티스토리 제공 스킨 수정 후 적용기

마크쿼리의 반응형 스킨은 2 종류가 있었습니다.

1. Spiderweb 그리고

2. DoobeDoo가 그 2종류인데요

Download 주소 : "http://markquery.com/download/"

 최상단 타이틀이미지부터 수정하려고 해보았으나.. 굉장히 어려웠습니다. 타이틀 이미지를 없애는데 까지는 성공했지만 제가 원하는 이미지를 추가하는 과정에서 어려움을 겪고 포기했습니다.

차선으로 티스토리에서 제공하는 스킨을 약간 수정하여 스킨으로 적용해보기로 했습니다. 그리하야 제가 고른 스킨은

 이 스킨입니다. 가장 심플하고 깔끔해보여서 일단 적용해보았습니다. 하지만 역시 상단 이미지를 먼저 수정해야될 필요가 있었습니다. 제 블로그는 책을 리뷰하는 블로그는 아니니까요.

 보통 티스토리에서 제공하는 스킨은 스킨위자드 기능으로 자유롭게 수정이 가능합니다만 본 스킨의 타이틀은 도무지 수정되질 않아 애를 먹던 차에 본 스킨을 수정하는 과정을 담은 블로그 글이 있어서 참고했습니다.

참고 블로그 url : "http://aboooks.tistory.com/4" 

 이 글을보고 아주 약간의 style.css의 구조에 대해 감을 잡고 본격 수정에 나섰습니다.

1. 타이틀 이미지 수정

 위 블로그의 글쓴이분과는 달리 저는 타이틀을 제거하고 제가 올리는 이미지로 타이틀을 대체하면 되는 것이었으므로 수정 과정이 약간 달랐습니다. 저는 제가 수정해나간 과정을 적어보도록 하겠습니다. (추후에 무슨 문제가 발생할지는 저도 모릅니다 ㄷㄷ)

 티스토리 관리자 화면에서 "꾸미기-HTML/CSS편집"으로 들어가보시면 HTML/CSS 탭과 이미지 업로드탭 이렇게 2가지 탭이 존재합니다. HTML/CSS탭은 skin.html과 style.css로 나눠져있는데요, 일전에 잠깐 언급했던것처럼 html은 문서나 글에 관한 정보를 담고 있고 css는 문서의 서식과 포맷에 대한 정보를 담고있는 부분이라고 합니다.

 여기서 저는 위 블로그 글과는 다르게 skin.html은 건드리지 않고 style.css부분만 수정할 예정입니다. 자, 그럼 style.css을 차근차근 들여다봅시다.

기본적으로 /* layout */ 와 같이 '/*' 와 '*/' 사이에 들어가는 문구는 코딩에 영향을 주지 않는 부분 같습니다. 학부시절 C언어를 배울때도 코드를 보는 사람들의 이해를 돕기 위해 비슷한 방식으로 코드 중간중간에 일종의 '메모'를 해둔다고 했었습니다. html에서도 비슷한 개념으로 /*와 */를 사용하는것 같습니다. (는 html 문외한의 말이므로 믿거나 말거나)

 여하튼 저는 위 블로그의 글을 참고하여

#header {

position:relative;

height:1%;

padding:/*@title-height:30=padding-top:*/80px/*@*/ 10px 27px 10px;

background:/*@title-background-color*//*@*/ /*@title-background-image*//*@*/ /*@title-background-image-position*//*@*/ /*@title-background-image-repeat*//*@*/;

}

#content {

float:left;

width:/*@post-width*/710px/*@*/;

overflow:hidden;

border-top:3px solid #6faab8;

}

#footer {width:100%;text-align:center;padding:0 0 30px 0;font-size:11px;color:#b2b2b2;letter-spacing:-1px;clear:both;}

#sidebar {overflow:hidden;float:right;width:200px;border-top:3px solid #6faab8;}

/* Header */

/* title */

#header h1 {font-family:/*@title-font-family*//*@*/;font-size:/*@title-font-size*//*@*/;color:/*@title-color*//*@*/;}

#header h1 a {display:block;width:306px;height:49px;background:url(images/title.png) left top no-repeat;cursor:pointer;}

* html #header h1 a {background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i1.daumcdn.net/cfs.tistory/blog/skin/tis_simpleGrid/images/title.png', sizingMethod='crop');}

#header h1 a:hover { text-decoration:none;}

#header h1 span {display:none;}

/* blog menu */

#header .list_blogmenu {width:/*@post-width:-18*/692px/*@*/;margin:0 0 0 -1px;padding:0;list-style:none;}

#header .list_blogmenu li {display:inline;margin-left:5px;padding-left:8px;background:url(images/icon_dot.gif) no-repeat 0 6px;}

#header .list_blogmenu li a{font-size:11px;}

#header .list_blogmenu .first {margin:0;padding:0;background:0 none;}

/* blog img + blog id */

#header .wrap_blogimg {position:absolute;bottom:32px;right:10px;width:180px;}

#header .wrap_blogimg #blogImage {}

#header .wrap_blogimg #blogImage img {display:block;width:60px;height:60px;}

#header .wrap_blogimg .userID {position:absolute;bottom:-2px;left:73px;width:100px;margin-top:38px;font-family:Gulim;}

이 부분을 수정했습니다. 어떻게요? 아래와 같이 수정했습니다.

위 블로그의 글이 삭제하라는 부분을 차례로 삭제해 보면서 본래의 BOOK REVIEW라는 이미지가 언제 없어지는지 확인해봤습니다. 

붉은색으로 표시된 부분은 수정이 있었던 부분이고, 파란색으로 표시된 부분은 본래 코드가 제거된 부분입니다.

#header {

position:relative;

height:1%;

padding:/*@title-height:30=padding-top:*/80px/*@*/ 10px 27px 10px;

background:/*@title-background-color=*//*@*/ /*@title-background-image=*/url("images/cover.jpg")/*@*/ /*@title-background-image-position=*/left bottom/*@*/ /*@title-background-image-repeat=*/no-repeat/*@*/;

} = 이 부분이 타이틀 이미지를 불러오는 역할을 하는것 같습니다.

#content {

float:left;

width:/*@post-width=*/710px/*@*/;

overflow:hidden;

border-top:3px solid #6faab8;

}

#footer {width:100%;text-align:center;padding:0 0 30px 0;font-size:11px;color:#b2b2b2;letter-spacing:-1px;clear:both;}

#sidebar {overflow:hidden;float:right;width:200px;border-top:3px solid #6faab8;}

/* Header */

/* title */

#header h1 {font-family:/*@title-font-family=*/inherit/*@*/;font-size:/*@title-font-size=*/inherit/*@*/;color:/*@title-color=*//*@*/;} = 이 부분은 어떤 역할을 했는지는 모르겠습니다..

#header h1 a {;} = 본래 코드를 삭제하고 이것만 남겼더니 본래의 BOOK RIVIEW 이미지가 사라졌습니다.

* html #header h1 a {background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i1.daumcdn.net/cfs.tistory/blog/skin/tis_simpleGrid/images/title.png', sizingMethod='crop');}

#header h1 a:hover { text-decoration:none;}

#header h1 span {display:none;}

/* blog menu */

#header .list_blogmenu {width:/*@post-width:-18=*/692px/*@*/;margin:0 0 0 -1px;padding:0px 0px 100px 650px;list-style:none;} = 이 부분을 수정한 이유는 아래에  있습니다.

#header .list_blogmenu li {display:inline;margin-left:5px;padding-left:18px;background:url(images/icon_dot.gif) no-repeat 0 6px;} = 별 의미없는 것 같습니다만 수정되있네요..언제 수정했을까 내가

#header .list_blogmenu li a{font-size:11px;}

#header .list_blogmenu .first {margin:0;padding:0;background:0 none;}

/* blog img + blog id */

#header .wrap_blogimg {position:absolute;bottom:32px;right:00px;width:180px;}

#header .wrap_blogimg #blogImage {}

#header .wrap_blogimg #blogImage img {display:block;width:60px;height:60px;}

#header .wrap_blogimg .userID {position:absolute;bottom:-2px;left:73px;width:100px;margin-top:38px;font-family:Gulim;}

 이렇게 수정만한다고 끝나는게 아니었습니다. 위에서 타이틀 이미지를 불러오라는 명령어를 입력해뒀으므로 불러올 이미지를 업로드 해줘야합니다.

HTML/CSS탭 옆에는 파일 업로드라는 탭이 있습니다.

여기서 본래의  images/cover.png를 삭제하고 제가 만든 타이틀 이미지를 cover.png로 이름을 바꾼 뒤 아래의 +추가 버튼으로 추가했습니다. 이렇게 타이틀로 불러올 이미지를 업로드하는것 같습니다.

2. 상단 메뉴 위치 수정

그리고 /* blog menu */ 부분을 수정한것은 바로 블로그 메뉴가 타이틀 이미지를 가렸기 때문입니다. 이 메뉴 위치를 이동시켜줄 필요가 있었기 떄문에 저는 메뉴에 관한 코드를 찾았고 대충 이리저리 바꿔본 결과 저 부분이 바로 블로그 메뉴를 수정하는 코드라는걸 알아냈습니다. 

본래 타이틀 이미지에 붉은색으로 색칠해놓은 부분 위에 메뉴가 위치했었기에...

블로그 메뉴에 관한 코드를 찾은 후 메뉴 위치를 담당하는 코드를 찾다보니 padding이라는 부분의 여백값을 통해 메뉴위치를 조절 할 수 있다는 사실을 알아냈습니다. 그리고 위, 아래, 오른쪽, 왼쪽 부분의 여백을 주는 방법을 알아낸 뒤에(그냥 4가지 여백값을 순서에 맞게 입력해주면 되는것이었습니다.) 여백 값은 미리보기를 통해 조절했습니다.

3. 배경색 수정

 마지막으로 배경색을 조금 바꿔보고 싶었습니다. 하지만 본 스킨은 배경에 패턴이 들어가있는 상황! 배경을 담당하는 부분이 어딜까 훑어보니 보나마나 body의 "background"이겠거니.. 싶습니다. 역시나 

background-color:/*@background-color*/#FAF9FB/*@*/;

background-image:/*@background-image=*/url("images/bodybg.gif")/*@*/;

background-repeat:/*@background-image-repeat=*/repeat/*@*/;

background-position:/*@background-image-position=*/0 0/*@*/;

}

배경 패턴 이미지에 관련된것 같은 파란색 부분을 삭제해버리고 backgroud color 부분 다음에 오는 코드값을 원하는 색 코드로 바꿔줬더니 배경 패턴이 사라지고 원하는 색으로 쌲쌲 바뀐걸 볼 수 있었습니다. 와!!!!

이렇게 겨우겨우 블로그 타이틀을 조금 수정해봤습니다. 역시 html은 정말 어려운것 같습니다.. 공부를 하긴 귀찮고 ㅜㅜ.. 

하지만 앞으로도 차근차근 바꿔나가보도록 하겠습니다!!