2011. 04. 21 블로그 1차 리뉴얼 완료

안녕하세요, 김생선입니다.
이전부터 마음먹고 하지를 못했던 블로그 리뉴얼을 이제서야 끝냈습니다.
이 포스트는 앞으로의 블로그 운영 목표 및 각종 양식에 대해 기록하는 용도로 작성하려고 합니다.

4월 20일 새벽 5시 30분 무렵, Zedge 관련 포스트를 작성하고 잠도 안오기에 블로그에 무작정 손을 대기 시작했습니다.
웹디자인에 내공이 깊은 친구에게서 블로그 리뉴얼에 관한 조언을 많이 들었고, 학교도 10시 정도에 가는 터라 무작정 손대기 시작했습니다. ^^;

 

0. 변경사항

기본적인 스킨은 Tistory Studio (White)를 사용하고 있습니다.
여기에서 사이드바 메뉴를 왼쪽에서 오른쪽으로 변경하였고, 텍스트 타이틀을 이미지 타이틀로 변경, 검색창 위치, 본문 여백 재설정 정도를 수정하였습니다.

사실상 큰 것은 없었지만 레이아웃이 전체적으로 틀어지는 문제 때문에 겨우 다잡고 하여 지금의 모습을 보여드릴 수 있게 되었습니다. 미리미리 HTML과 CSS를 공부해둘걸 하는 후회가 정말 막심할 정도였습니다.(이자리를 빌어 책꽂이 한켠만 차지하는 HTML/CSS책, 미안해)

또한 PC 브라우저 스킨 뿐 아니라 모바일 브라우저 스킨도 변경하였고, 되도록 PC의 환경과 비슷한 느낌을 주려고 스킨을 구성하였습니다. 
여기에서는 몇가지 소스를 예로 들 생각입니다. 제가 앞으로 다시 리뉴얼 할 때 참고하기 쉽고, 그리고 혹여나 다른 분들도 도움이 되길 위해서..

1. 세부 변경 사항 - 텍스트 타이틀을 이미지 타이틀로

먼저 가장 바꾸고 싶었던 텍스트 타이틀을 이미지 타이틀로 변환하는 과정을 보여드리겠습니다.

 
텍스트로만 이루어진 스킨의 경우에는 내용이 다를 수 있습니다. 참조하시기 바랍니다.
블로그의 관리 - 스킨 - HTML/CSS 편집에 들어가셔서 이미지 타이틀로 쓸 이미지를 파일 업로드를 통하여 업로드 합니다.
그리고 HTML/CSS 편집에서 아래의 구문을 찾습니다.

** HTML 문제로 아래의 코드 중 [## _blog_link_ ##], [## _title_ ## ]은 모두 빈칸이 없어야 합니다. 검색하실 때 유의하시기 바랍니다.

1. <h1><a href="[## _blog_link_ ##]" title="[## _title_ ##]"><img src="./images/logo.gif" width="303" height="83" alt="[## _title_ ##]" />

이 부분에서 ./images/logo.gif 이것을 위에서 업로드한 이미지의 경로로 교체 후, 뒷부분의 width="303" height="83" 를 삭제해줍니다.
제가 변경한 소스는 아래와 같습니다.

1. <h1><a href="[## _blog_link_ ##]" title="[## _title_ ##]"><img src="http://cfs.tistory.com/custom/blog/50/503007/skin/images/kimfish1055-2.png" alt="[## _title_ ##]"/></a></h1>

간단히 풀어 설명드리자면, [## _title_ ##]이 img src="??" 내부의 주소를 참조하는데 이 주소의 이미지는 width="??"의 너비와 height="??"의 높이로 지정해준다는 뜻을 가지고 있습니다.

변경을 해주고 나서 저장을 하면 됩니다. 

2. 세부 변경 사항 - 사이드바를 왼쪽에서 오른쪽으로 이동

저같은 경우에는 애초에 사이드바를 오른쪽에 위치한 스킨을 고르려고 했지만 그러자니 또 마음에 들지가 않아서 이 스킨에서 수정하는 방법을 택했습니다. 되게 어려울 줄 알았는데, 의외로 간단했습니다. -_-;

마찬가지로 HTML/CSS 편집에서 Ctrl+F를 눌러 찾기를 활성화시킵니다.
검색에서,  #sidebar { 를 찾으면 이런 구문이 나옵니다. 

1. #sidebar { clear: both; float: left; width: 190px; margin-left: 40px; display: inline; padding-bottom: 30px; }

 
바로 사이드바의 속성을 정해주는 구문입니다. float: left;를 float: right;로 변경해주면 됩니다.
참고로 margin은 여백을 설정해주는 함수이며, 왼쪽은 margin-left, 오른쪽은 margin-right, 위는 margin-top, 아래는 margin-bottom으로 정해줍니다. 

3. 세부 변경 사항 - 검색창의 위치를 이동

애초에 제 블로그는 본문 너비가 800px로 이루어져 있습니다. 그리고 스킨에서 제가 따로 가로 1095px로 설정해주었습니다.
이미지는 얼추 1055px인데, 이걸 그대로 적용했다가는 검색창이 아래로 밀리면서 스킨 자체가 모두 어긋나는 불상사가 이루어지게 됩니다.
바로 아래와 같이 말이죠. :-)
 

(이미지 설명 : OMG!!!!!!! 사실 어제 새벽에만 해도 이 화면을 셀 수 없을 만큼 봤습니다.)

뭐 그러다보니 검색창의 위치를 조절해주어야 하는데 이걸 몰라서 짧은 이미지 타이틀만 사용하다가 학교에서 귀가한 후 수정하게 되었습니다. 바로 검색창 자체에 위쪽 여백이 설정된데다가, 이미지 타이틀보다 한단계 높은 곳에 위치해있기 때문이죠.

결국 이런 식으로 수정하게 되었습니다.

1. <div id="searchBox">
2.             <s_search>
3.             <input type="text" class="search_keyword" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
4.             <input class=" button" type="submit" name="Submit" onclick=""/>
5.           </s_search>
6.         </div>
7.         <h1><a href="https://kimfish.co.kr/" title="김생선의 어장나라"><img src="http://cfs.tistory.com/custom/blog/79/794764/skin/images/kimfish1055-2.png" alt="김생선의 어장나라"/></a></h1>

이 부분에서 보자면 <div id="searchBox"> 부터 </div> 까지가 검색창에 관한 레이아웃이라는 걸 알 수 있습니다. 일단 이 위치를 이미지 타이틀보다 한단계 낮은 곳에 위치시켰습니다.

1. <h1><a href="https://kimfish.co.kr/" title="김생선의 어장나라"><img src="http://cfs.tistory.com/custom/blog/50/503007/skin/images/kimfish1055-2.png" alt="김생선의 어장나라"/></a></h1>
2. <div id="searchBox">
3.             <s_search>
4.             <input type="text" class="search_keyword" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
5.             <input class=" button" type="submit" name="Submit" onclick=""/>
6.           </s_search>
7.         </div>

 
*자세히 보시면 이미지 타이틀의 바로 아래에 복사 붙여넣기를 하였다는 걸 알 수 있습니다.

그런데 이게 문제가 아닌게, 자세히 살펴보니 그래도 계속 이미지 타이틀이 적용이 잘 안되는겁니다. 뭔가해서 알아봤더니 바로 제가 한 뻘짓이 약간 숨겨져 있었습니다. 그 뻘짓이란, 바로 위에서 말씀드린대로 margin관련 함수는 여백을 주는건데, 이미지 타이틀 바로 아래에 검색창이 오게 하려고 검색창에게 위쪽 여백을 주었더니 그것과 충돌이 일어나서 전체적 스킨이 뭉그러진겁니다.

그래서 그 검색창에서 위쪽 여백을 준 margin 함수를 수정할 필요가 있었습니다.

1. #searchBox { float: right; margin-top: 98px; margin-right: 15px; display: inline;}

보시다시피 margin-top이 98px이라는 여백을 주고 있습니다. 이걸 그대로 수정하면 블로그 최상단에서부터의 여백이 되기 때문에 이 바로 위에서 검색창을 이미지 타이틀 바로 아래에 위치시키고, 거기에서 값을 계산하는 방식으로 고치게 된 것입니다.
제 경우는 (이는 이미지마다 다 다르기 때문에) 98px을 -7px로 수정하였습니다.

4. 세부 사항 편집 - 본문 여백 조정

이제 마지막 단계입니다.
대부분 눈에 띄는 가장 큰 문제들을 고치고 나니  약간의 거슬림이 보였습니다. 이 스킨의 문제였는데요 바로 이미지 타이틀 옆으로 제목이 비죽이 튀어나온 것이었습니다.
 

대충 이런 모양이었습니다. 정말 꼴보기 싫을 정도였습니다. ^^;

이 부분은 두가지 방법으로 수정할 수 있습니다. 이미지 타이틀을 왼쪽으로 약간 이동시키거나 혹은 본문을 오른쪽으로 약간 이동시키거나.
저같은 경우에는 후자를 선택했습니다.
Ctrl+F를 하여 검색을 활성화 시킨 후, content를 검색합니다. 그리고 아래의 구문을 찾으시면 됩니다.

1. #content{ float:right; width:/*@post-width=*/800px/*@*/; margin-right: 40px; padding-bottom: 56px; display: inline; }

간단하게 소스를 또 짚고 넘어가자면, 오른쪽에 위치한 float과 함께 content는 가로 800px로 정의되어져 있으며 오른쪽 여백은 40px이 되어져 있다고 볼 수 있습니다. padding은 테두리와 content 사이의 간격을 설정해주는 함수이며, 그러기에 여기에서는 바닥에서 56px이 떨어져 있다는 걸 알 수 있습니다.

여기에서 margin-right를 적당한 값으로 조절해주시면 됩니다. 그러면 보기가 깔끔해집니다. ^^;

5. 웹폰트를 사용하지 않고 글꼴 사용하기

일전에 웹폰트를 사용하면서 티스토리의 글씨체를 꾸미려고 노력했지만 방법도 번거롭고 정말 힘들기 그지없는 작업이었습니다.
웹폰트는 HTML 비표준 기술로, 익스플로러 이외의 브라우저에서는 정상적으로 보이지 않는 문제를 가지고 있기 때문입니다.

그런데 자신의 컴퓨터에 있는 글꼴을 우선시하여 보여주는 방법도 있기에 정리해 봅니다.

1. font-family: 돋움,Dotum,AppleGothic,sans-serif;

CSS 설정에 보시면 body{ 바로 아래에 이러한 구문이 보입니다. 여기의 돋움 앞에 즉 font-family: 바로 뒤에 아래의 구문처럼 복사, 붙여넣기 하시면 됩니다.

1. font-family: NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Gulim, 굴림, 돋움,Dotum,AppleGothic,sans-serif;

이는 NanumGothic을 가장 먼저 보여주며, 없을 시에 그 다음의 글꼴 순으로 보여준다고 정의합니다.
이로 하여금 웹폰트의 설정 없이, 그리고 브라우저에 상관 없이(물론 모바일은 예외입니다.) 나눔고딕을 제일먼저 보여주며 그 다음에 맑은 고딕, 굴림, 돋움 순으로 표시가 됩니다.


여기까지 티스토리 스킨을 수정하는 방법에 대한 나름의 기록을 정리해보았습니다. 

6. 김생선의 어장나라 양식 및 앞으로의 방향

1차 리뉴얼을 한 만큼 2차 리뉴얼도 있을 예정입니다.
이 2차 리뉴얼은 올해 중순이 오기 전에 마칠 예정이며, 각종 블로그 내 아이콘 및 색상과 글씨크기를 수정할 계획입니다.
또한 전체적으로 레이아웃을 새로이 손을 보아 더욱 쾌적한 블로그가 되도록 노력할 생각입니다.
이하는 블로그 양식입니다.

타이틀
타이틀 이미지는 가로세로 1055*150px로 정의되어져 있습니다.
색상코드는 RGB 150, 195, 232를, 웹에서는 #96c3e8을 사용합니다. CMYK 값은 38, 12, 0, 0 입니다.
모바일 블로그 스킨은 1000*250px의 이미지를 사용하며, 색상은 동일합니다.

본문 및 본문 이미지
본문은 가로 800px로 정의되어 있으며 본문에 그림을 삽입할 때에는 되도록 가로 780px을 유지하려고 합니다.
또한 매 포스트마다 제목을 겸하는 일종의 요약이미지를 넣을 예정인데 이 이미지는 800*400px의 이미지를 사용합니다.

아이디
블로그 내에서의 표현은 총 세가지로 이루어집니다.

김생선 : 블로그 및 제가 사용하는 이메일 등에서 사용하는 실질적인 아이디
KIM FISH : 블로그 타이틀에서만 사용하는 아이디
Kim Fish : 그 외.

기타사항
이모티콘 및 과도한 통신어체는 사용하지 않을 예정입니다.
문의사항은 우측의 이메일로 보내주시기 바라며 본문을 제대로 읽지 않았다고 생각되는 댓글은 답변하지 않습니다.


앞으로 김생선의 어장나라에 많은 떡밥을 던져주시기 바랍니다. 감사합니다.