[ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 01 -

이곳에서 처음 진행되는 튜토리얼입니다. 일단은 간단하게 얼마전 공개한 crystal blue 스킨을 살짝 수정해봅시다.

먼저 포토샵으로 이미지 작업을 합니다. 크리스탈 블루가 밝은 형광빛 나는 색으로 취향을 좀 탈수가 있기 때문에 이번엔 어두운 배경을 사용합니다. 배경 이미지는 flikr에서 'Creative Commons 사용권이 있는 사진' 옵션을 켜고 검색해서 찾은 이미지입니다.

메뉴의 위치를 위로 옮기고 블로그 타이틀과 블로그 설명 문을 강조할 생각으로 헤더 영역의 중앙으로 옮겼습니다. 크기도 좀 키웁니다. 간단하게 작업할 생각이기 때문에 이미지 작업을 아주 완성도있게 할 필요는 없습니다. 대략적인 느낌을 눈으로 확인해보는데 주안점을 두고 디테일한 부분들은 코딩하면서 잡아주도록 하겠습니다.

CSS를 이용해 이미지로 바뀌어져 있는 블로그 메뉴 부분을 텍스트 링크로 바꿉니다. .blogMenu a 에 padding:16px 0 0 0; height:0; overflow:hidden; 속성을 삭제합니다.  .blogMenu .tab~~ 으로 시작되는 라인들도 지워, 메뉴별 배경 이미지도 삭제합니다.

이제 텍스트 메뉴가 나타나지만 간격이 좀 애매하네요.
각각의 메뉴에 margin-leftt:14px; 을 추가하여 메뉴간 간격을 조절하고 skin.html 에서 메뉴 이름을 영문으로 수정하고 admin으로 갈수 있는 링크도 추가했습니다.

.blogMenu의 배경색을 검정색으로 바꿔줍니다. 배경색을 깔고 나면 .blogMune 안에 위치한 메뉴들의 자리가 어정쩡한걸 확인할수 있습니다. 이건 .blogMenu에 padding값을 넣어서 수정했습니다. 그러면서 font 크기도 조절합니다.

이제 .blogMenu의 위치를 맨위로 올립니다. 올리는 방법은 여러가지가 있을수 있습니다만, 이번엔 간단하게 position 속성으로 띄운후, top:0; left:0; 속성으로 자리를 잡게 만들었습니다. 메뉴가 브라우저 끝부분에 안붙는걸 확인한뒤 margin값을 삭제했습니다. width:100%; 속성으로 가로길이를 브라우저 크기에 맞춥니다.

짠! 이렇게 만들었습니다.

메뉴바 부분이 적절히 끝난것 같네요 :)
블로그 메뉴바를 커스터마이징하며 수정한 css파일을 비교해보면 아래와 같습니다.
설명이 애매해서 그렇지 실제로 보면 그리 많은 수정이 필요한것은 아닙니다.

수정전
.blogMenu { height:20px; margin-left:4px; margin-top:1px; overflow:hidden;} .blogMenu a { color:#ccc; padding:16px 0 0 0; height:0; overflow:hidden; display: block; float:left;} .blogMenu .desc { margin-top:-4px; font:0.9em dotum; letter-spacing:-1px; display:none;} .blogMenu li { float:left;} .blogMenu .tab_home a { background:url(images/menu_01.gif); width:59px;} .blogMenu .tab_medialog a { background:url(images/menu_02.gif); width:74px;} .blogMenu .tab_localog a { background:url(images/menu_03.gif); width:90px;} .blogMenu .tab_taglog a { background:url(images/menu_04.gif); width:73px;} .blogMenu .tab_guestbook a { background:url(images/menu_05.gif); width:68px;}
수정후
.blogMenu { height:20px; overflow:hidden; background:black; font:10px tahoma; padding:6px 0 0 0; position:absolute; top:0; left:0; width:100%;} .blogMenu a { color:#ccc; display: block; float:left;} .blogMenu .desc { margin-top:-4px; font:0.9em dotum; letter-spacing:-1px; display:none;} .blogMenu li { float:left; margin-left:14px;}

메뉴바를 수정했으니 이젠 배경 이미지 수정합니다. flickr에서 찾아낸 파일을 bg.jpg로 저장하여 images 폴더에 덮어넣은 후 이미지가 덮이지 않는 부분의 색상코드도 바꿔주었습니다. 라이센스를 표기하에 사용이 가능하다는 조항이 있으므로 skin.html을 수정하여 copyright에 링크도 삽입했습니다.
body {background:url(images/bg.jpg) center top no-repeat #323232; margin-top:40px; }

#49b3ce를 #323232로 바꿨습니다~

자, 이제 생각한 모양이 얼추 모양이 나오고 있습니다 :)
다음 포스트에서 블로그 타이틀의 위치를 조절하고 배포를 위한 준비를 해보겠습니다.

Crystal Blu 2nd tutorial #1 : [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 01 -
#2 : [ crystalBlue 2nd ] 스킨을 수정해 봅시다. - 02 -
#3 : [ crystalBlue 2nd ] 스킨을 배포합니다~