마크쿼리 spider's web 다시 적용하기!!

어렵사리 마크쿼리 Spider's Web 다시 적용하기

오늘부터 본격적으로 마크다운 에디터를 이용하여 포스트를 작성하려고 합니다. 지금 사용하고 있는 에디터는 'MOU' 인데요, 다른 유료 앱과는 달리 free이며 본문을 작성하면서 실시간으로 출력 상태를 확인할 수 있다는 장점이 매력적입니다. (몰랐던 점은 마크다운 에디팅 창과 출력 창 중 하나만 스크롤을 바꿔도 나머지 창도 같이 스크롤된다는 장점이 사소하지만 마음에 드는 점이었습니다.)

문법또한 간단하여 쉽게 익힐수 있다는 장점이 있다고 합니다만 이 점에 대해서는 추후 포스팅에서 말씀드리도록 하겠습니다.

마크쿼리 반응형 스킨 적용

1. 커버 이미지 수정

어제까지만 해도 마크쿼리 반응형 스킨 적용에 어려움을 겪고 http://tistory.com에서 제공하는 기본 스킨의 html 코드를 수정하여 제 입맛에 맞게 타이틀을 수정하고 상단메뉴를 옮기는 작업을 했었습니다.

하지만 역시나 모바일 플랫폼에서 인터넷을 사용하는 빈도가 무시할 수 없을 정도로 높아 반응형 스킨이 꼭 필요하다는 생각이 들었습니다. 그래서 결국 반응형 스킨 중 많은 유저분들이 사용하고 계시는 마크쿼리 스킨을 적용시켰습니다.

마크쿼리 스킨 다운로드

마크쿼리 스킨은 2 종류가 있는데요

1. Spider's Web

2. Doo Be Doo

이렇게 2가지가 있습니다. 두 스킨은 레이아웃도 다르지만 코드 구조도 조금 다르다고 하시는것 같습니다. 저는 Spider's Web이 맘에들어 우선 이 스킨을 적용했습니다.

스킨을 적용하고나니 제일 처음 눈에 들어오는건 큼지막한 마크쿼리 커버이미지 였습니다.

이 이미지를 제가 원하는 이미지로 바꾸기 위해 무려 2시간이 걸렸습니다. 이미지는 일러스트레이터 cs6로 작업한 jpg파일입니다. 본래 스킨의 커버이미지의 사이즈는 400x1170으로 꽤나 큰편입니다. 가로, 세로 모두 줄이고 싶었지만 가로길이를 줄이는데는 실패하고 말았습니다..

하지만 세로 높이를 줄이는데는 성공했는데요, 결국 저는 원래 사이즈인 400x1170으로 커버 이미지를 제작했습니다.

그럼 커버 이미지를 바꿔볼까요?

우선 원하는 사이즈의 이미지를 준비해줍니다. 이 때 이미지 파일 이름을 꼭 기억해두세요

(모든 작업은 마크쿼리 Spider's Web을 이미 적용했다는 가정 하에 진행됩니다.)

그리고 블로그 관리자 화면에서 꾸미기-HTML/CSS편집-파일 업로드로 들어가서 미리 준비한 이미지 파일을 추가합니다.

그리고 HTML/CSS탭으로 들어가서 style.css부분을 변경해줄겁니다. 처음에는 style.css패널 크기가 보기에 너무 작습니다. 코드 창 우측 하단을 드래그 해서 보기 편하게 늘려주세요.

방대한 코드 중

/* site cover
-------------------------------------------------- */
.cover {
  padding-top: 8.54%;  
  *height:auto;
  background-image: url(./images/cover2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}
.cover figcaption {
  margin: 0;
  padding:0;
  font-size:0;
  text-indent:-9999px;
}

이 부분을 찾아줍니다. 윗 부분에 써있는대로 site cover, 즉 커버 부분을 담당하는것 같습니다. 그 중에서도

background-image: url(./images/cover2.jpg);

이 부분의 이미지파일 이름을 바꿔줍니다. 본래 이미지파일 이름은 cover.jpg입니다. 제가 추가한 이미지 파일 이름은 cover2.jpg였으므로 위에 보시는 바와 같이 cover2.jpg가 들어가있습니다.

그리고 이제 이미지가 표시되는 사이즈를 조절해줘야 합니다. 여기에 대한 설명은 마크쿼리 사이트에도 반응형웹 커버 이미지 라는 글로 설명되어 있습니다. 저는 자세히 이해할 순 없었지만.. 이미지 표시에 대한 코드가 퍼센티지로 나와있는걸 보니 아마도 모바일과 PC기반의 다양한 브라우저 크기에 맞춰서 컨텐츠를 출력하려면 가로, 세로 비율에 대한 값이 지정되있는것 같았습니다. (아니면 아닌거고..)

수정해야될 부분은

padding-top: 8.54%;

이 부분입니다.

이 때 원하는 이미지 사이즈로 퍼센티지를 계산해 줄 수 있습니다. 본래 이미지의 경우 가로, 세로 400x1170이었으므로 (400/1170)x100 을 하면 나오는 값인 34.18이 지정해줘야할 퍼센티지가 되는것 같습니다. 만약 높이가 100px인 이미지를 삽입하고 싶으시다면 (100/1170)x100 = 8.54를 입력해주시면 됩니다.

계산값은 항상 소수점 둘째자리까지 표시해주시면 되는것 같습니다.

이렇게 해서 제가 원하는 이미지를 커버 이미지로 등록하였습니다.

만약 이렇게까지 했는데 이미지가 바뀌지 않는다면??

브라우저 캐시의 문제일 가능성이 있으므로 캐시를 삭제하고 페이지를 새로고침 해보라는 글들이 많더군요. 저의 경우에도 페이지를 그냥 새로고침해서는 변경사항이 제대로 적용되지 않았습니다. 반드시 캐시를 삭제해주고 새로고침을 해야 변경사항이 적용되는 현상을 보였습니다.

저는 맥에서 사파리를 사용하므로 캐시삭제 방법이 IE와는 차이가 있을 수 있습니다만 이 정도 방법은 검색하시면 금방 나올겁니다..ㅎ

이렇게 어렵사리 커버 이미지를 바꿨습니다. 이 글을 쓰는 사이에도 블로그 곳곳의 배경색을 조금씩 바꿨는데요, 알면 알수록 어려운 HTML입니다.

어서 빨리 블로그가 제자리를 찾도록 분발해야겠습니다!