'김생선의 어장나라'에 해당되는 글 3건




안녕하세요, 김생선입니다.
지난 4월 21일의 1차 리뉴얼을 시작으로 2차 리뉴얼까지 모두 마쳤습니다.
1차 리뉴얼과의 달라진 점은 세부 수정 사항과 함께 1차 리뉴얼이 큰  레이아웃을 수정하였다면, 이번 2차 리뉴얼은 보이지 않는 부분을 수정하였다는 점에서 의의가 크다고 볼 수 있겠습니다.


0. 변경사항


1. 레이아웃의 변경
1차에서는 가로 사이즈를 1055px로 마무리를 지었지만 제 블로그의 약 10%에 해당하는 분들이 1024px의 해상도를 사용하시는 것을 보고 레이아웃의 가로 사이즈를 1024px로 줄였습니다. 이렇게 레이아웃을 줄이면서 내부 레이아웃인 콘텐츠 레이아웃과 카테고리 레이아웃 또한 수정하였습니다.

2. 카테고리의 변경


기존의 카테고리 정렬 방식(좌)에서 카테고리를 좀 더 세분화하는 방식(우)으로 카테고리를 재정렬 하였습니다. 제가 작성한 글들을 좀 더 세부적으로 관리하기 위함이며, 방문자들 또한 같은 주제의 다른 글을 찾아보기 쉽게 수정하였습니다.
또한 닫혀있는 카테고리를 임의로 열어서 더욱 더 쉽게 찾아볼 수 있게 되었습니다.

3. 물결효과의 플래시 타이틀 삽입
물결이 일렁이는 효과를 준 플래시 타이틀을 삽입하였습니다.

4. 구글 애널리틱스 삽입
블로그의 더욱 효과적인 관리를 위하여 구글 애널리틱스를 삽입하였습니다. 이에 대한 더욱 자세한 사항은 아래의 링크를 클릭하시면 이동합니다.
2011/05/15 - [어장 컴퓨터] - 내 블로그의 더욱 스마트한 관리 - Google Analytics 

5. 티 에디션의 사용
티 에디션(일명 메인화면)을 사용하였습니다.
가장 인기있고 가장 자주 쓰는 세 개의 카테고리와 최근에 작성된 글을 포함한 총 네 개의 카테고리의 최신글을 보여주는 티 에디션을 적용하였습니다. 썸네일 이미지와 함께 메인화면에서 바로 글들을 선택할 수 있도록 하였습니다.

6. 블로그 내부 글씨크기를 전체적으로 수정
기존에 수정을 거치기 전에는 본문 9px로 보이는 텍스트를 12px로, 제목 또한 12px에서 물결 효과 플래시 제목을 추가하면서 수정을 하였습니다. 이 외에도 댓글 입력 폼의 색상등을 수정하였습니다.

7. 블로그 파비콘 적용
블로그 아이콘이라 볼 수 있는 파비콘을 적용하였습니다. 해당 파비콘은 익스플로러의 경우 탭과 주소표시줄에서, 크롬에서는 탭에서 확인할 수 있습니다. 파란 물고기 모양의 조그만한 파비콘입니다. ^^


1. 마치며


지난 1차 리뉴얼에 비하자면 많은 부분이 변하지는 않았지만 조금 더 쾌적한 환경이 될 수 있도록 수정하였습니다.
블로그 내 아이콘 변경과 기타 사항에는 큰 변화가 없을 것이며 앞으로 조금씩 수정할 계획이지만 이렇게 따로 글을 쓰지 않을 예정입니다.

또한 QR코드를 삽입한 새로운 명함을 준비중이지만 이건 또 언제 만들고 언제 인쇄하지... 으 --

새로워진 김생선의 어장나라에서 새로운 마음가짐으로 더욱 유익한 정보를 드릴 수 있도록 노력하겠습니다. :-)

'어장 사생활' 카테고리의 다른 글

나의 넥원이 골골대신다...  (2) 2011.06.13
김생선의 일상이야기  (2) 2011.06.04
2011. 05. 24 블로그 2차 리뉴얼 완료  (0) 2011.05.24
김생선의 요즘 일상  (2) 2011.05.01
2011. 04. 21 블로그 1차 리뉴얼 완료  (10) 2011.04.21
공과금용지  (4) 2011.04.16
블로그 이미지

김생선

어장에서 바라보는 세상


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

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 { clearbothfloatleftwidth: 190px; margin-left: 40px; displayinlinepadding-bottom: 30px; }

 
바로 사이드바의 속성을 정해주는 구문입니다. floatleft;를 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="[##_search_name_##]" value="" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
  4.             <input class=" button" type="submit" name="Submit" onclick="[##_search_onclick_submit_##]"/>
  5.           </s_search>
  6.         </div>
  7.         <h1><a href="[##_blog_link_##]" title="[##_title_##]"><img src="http://cfs.tistory.com/custom/blog/79/794764/skin/images/kimfish1055-2.png" alt="[##_title_##]"/></a></h1>


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

  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>
  2. <div id="searchBox">
  3.             <s_search>
  4.             <input type="text" class="search_keyword" name="[##_search_name_##]" value="" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
  5.             <input class=" button" type="submit" name="Submit" onclick="[##_search_onclick_submit_##]"/>
  6.           </s_search>
  7.         </div>

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

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

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

1. #searchBox { floatrightmargin-top: 98px; margin-right: 15px; displayinline;}


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


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


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


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

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

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


간단하게 소스를 또 짚고 넘어가자면, 오른쪽에 위치한 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 : 그 외.

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


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

'어장 사생활' 카테고리의 다른 글

2011. 05. 24 블로그 2차 리뉴얼 완료  (0) 2011.05.24
김생선의 요즘 일상  (2) 2011.05.01
2011. 04. 21 블로그 1차 리뉴얼 완료  (10) 2011.04.21
공과금용지  (4) 2011.04.16
[마감] 초대장 신청이 마감되었습니다.  (35) 2011.04.09
학교 시간표  (3) 2011.02.20
블로그 이미지

김생선

어장에서 바라보는 세상



안녕하세요 김생선입니다.

요사이 여러가지 일 때문에 블로그 관리를 소홀히 했습니다.
11월 말 부터는 또 기말고사이다보니 한동안 더욱 소홀히 할 것 같네요.
그래도 블로그 댓글은 항상 눈팅중이니 ㅎ...


얼마전 친하게 지내는 한 동생놈이 해 준 제보입니다.
네이버에서 김생선을 검색, 정확히 말 하자면 김생ㅅ만 쳐도 김생선의 어장나라가 자동완성되네요.

뭐 사실 약간의 꼼수가 섞여있지만 그것을 밝히진 않겠습니다. ^^;

네, 그럼 조만간 다시 뵙도록 하지요. 그 때가 되면 블로그도 새단장 할 생각입니다.
블로그 이미지

김생선

어장에서 바라보는 세상

티스토리 툴바