BASIC 2008 스킨 메뉴바 색깔 수정하기

 

안녕하세요? 오랜만에 찾아뵙는 <블로그 배우기> 포스팅입니다. 사실 저도 블로그에 대해 아는 것도 별로 없는데 건방지게 이런 코너(?)를 진행(?)하게 되다니 참...쑥쓰럽네요.

하지만 독자분들과 제가 서로 배워가는 입장, 동병상련이기 때문에 더 쉽고 자세히 설명해 드릴 수 있을 거라 생각합니다 ^^

 

오늘 할 과제는 BASIC 2008 스킨에서 메뉴바 색깔 수정하기입니다. 사람마다 부르는 호칭이 다를 수도 있는데 제가 말하는 메뉴바는 이것입니다. 혹시 정확한 명칭을 아시는 분은 댓글 주세요.

 

 

BASIC 2008 스킨을 예로 하여 설명을 드리려고 하는데요, 아마 다른 스킨에서도 메뉴바 색깔 바꾸는 원리는 저의 글과 비슷하다고 추측해봅니다. 그러면 시작하겠습니다.

 

 

 

티스토리에서 뭔가 하고 싶다면 항상 관리자 버튼을 통하여야 합니다. 관리자 버튼을 클릭해주시고yo~

 

 

 

그리고 나서 HTML/CSS 편집 링크를 클릭 → 파일업로드 탭을 클릭합니다. 파일업로드 페이지에는 블로그에 사용된 여러가지 이미지 파일이 있습니다. 여기서 우리는 메뉴바에 사용된 이미지 파일을 찾아야 합니다. 앞서 말씀드렸다시피 지금 우리는 메뉴바 색깔을 바꾸고 싶습니다. 어떻게하면 될까? 가장 쉬운 방법은 메뉴바 이미지 파일을 찾아서 그 색깔을 포토샵으로 바꾸어주고, 다시 업로드하여 덮어쓰기하면 됩니다. 파일명이 바뀌지 않았기 때문에, 그대로 인식하겠죠?

 

 

 

찾아보니 메뉴바 모양과 비슷하게 생긴 이미지 파일이 나옵니다. 저도 이것이 메뉴바 이미지 파일인 줄 알고 색을 수정해서 다시 업로드 시켜보았습니다만..아무런 변화가 없더군요. 알고보니 아무짝에도 쓸모 없는 파일입니다! 훼이크에 속지 마시고 진짜 메뉴바 이미지를 찾아봅시다!

 

 

자 진짜는 여기 있습니다. images/wrap_menu.bottom.gif, ~wrap_menu_middle.gif, ~wrap_menu_top.gif가 진짜 메뉴바 이미지 파일입니다. 그림에서처럼 클릭하여 실제로 가로선 형태로 나오는지 확인해보시기 바랍니다.

 

 

 

해당 파일에서 마우스 오른쪽을 클릭하여 다른 이름으로 저장합시다. 앞서 말한 이미지파일 3가지를 모두 다운받으셔야 합니다. 

 

자 이제는 포토샵을 다뤄야 할 차례입니다. 아직 포토샵을 접하지 못한 분들에겐 포토샵이 어렵게 다가올 수도 있는데요. 전혀 어렵게 생각하지마시구요. 알고 보면 쉽고 재밌답니다. 컴퓨터에 포토샵이 없으신 분들은 여기서 30일 평가버젼을 다운받을 수 있습니다. 괜히 높은 버젼 필요없구요, 포토샵 CS만으로도 충분!합니다.

[포토샵 다운로드] http://file.naver.com/pc/view.html?fnum=56062&cat=42

 

 

 

파일을 열어주시고요, 먼저 해당 파일이 Indexed Color 모드로 설정되어 있어서 제대로 색이 바꾸지 않습니다. ( 컬러 모드에 대한 설명은 이 글에서는 필요없다 생각하여 생략합니다. ) 포토샵 상단 메뉴에서 Image → Mode에 들어가서 Indexed Color 모드를 RGB Color 모드로 바꿉니다.

 

 

 

 

Swatches 팔레트에서 녹색을 선택해줍니다. ( Swatches 팔레트는 화면 우측에서 찾으시면 됩니다. 굳이 녹색이 아니라 원하시는 색을 선택하시면 됩니다. ) 녹색이 전경색으로 표시됩니다. 위의 참조 그림에서 보시면 두 개의 사각형에 하나는 녹색이고 하나는 흰색이죠? 앞에 나와있는 녹색이 전경색, 뒤에 있는 흰색이 배경색으로 설정된 모습입니다.  그리고 Alt ( 알트) + Del ( 딜리트 ) 단축키를 눌러서 전경색 녹색을 채워버립니다. 곤색이였던 메뉴바 이미지가 이제는 녹색이 되어버렸습니다.

 

 

 

 

 

동일한 파일명으로 덮어쓰기를 할 때 나타나는 <~덮어쓰기 하시겠습니까?> 라고 묻는 확인창과 Gif 파일로 저장할 때 나타나는 옵션창입니다. 신경쓰지 마시고 전부 OK로 하시면 됩니다. 위와 같은 작업을 메뉴바 이미지 파일 3가지에다가 다 해주셔야 합니다.

 

 

 

 

관리자 버튼 → HTML/CSS 편집 → 파일업로드  → 추가 버튼을 눌러서 색을 바꾼 메뉴바 이미지 파일 3개를 모두 업로드해줍니다. 업로드할 때 따로이 <~덮어쓰기 하시겠습니까?>라고 묻는 창은 나오지 않습니다. 혹시나 제대로 안 올라갔나? 하면서 걱정 안 하셔도 되구요, 제대로 업로드되셨으니까요. ^^

 

 

 

 

다 올리고 나서 블로그 메인으로 돌아가서 확인해봅시다. 혹시 메뉴바에 아무 변화가 없나요? 그럴때는 Ctrl + F5를 해보세요! 컴퓨터가 과거에 저장된 파일을 인식해서 그렇게 표시되는 수가 있다고 하네요.

 

 

 

Ctrl + F5를 하니까 제가 바꾼 녹색이 나타났어요! 으잉? 그런데 가운데 저 곤색선은 뭔가요?

 

 

 

문제 해결을 위해서 다시 관리자 → HTML/CSS 편집 → HTML/CSS 탭 → Style.css 편집창을 살펴봅시다. 

 

 

 

Style.CSS 창에서 Ctrl + F를 누르고 Middle을 검색하면 위의 그림처럼 나타나게됩니다. 자! 눈치 빠르신 분들! 왜 곤색선이 나타났는지 눈치채셨죠?

바로 background:#253036 코드 때문이였습니다. 여기서 #253036은 웹색상코드라고 하는 건데요, 색깔을 브라우져가 알 수 있도록 컴퓨터 언어로 나타내주는 부분이라 생각하시면 되요. 해당 색깔 코드를 지금 우리가 쓰고 있는 녹색 코드로 교체하면! 곤색선이 사라지게 되는 것이죠! 그렇다면 제가 사용한 녹색의 색상 코드는 어떻게 확인 할 수 있을까요?

 

 

 

 

바로 포토샵을 이용해 확인할 수 있습니다! 포토샵에서 저희가 색을 바꿔버린 메뉴바 이미지 파일을 열어주시고요. 위의 사진에서 빨간 사각형으로 표시한 부분. 그러니까 전경색(녹색) 사각형을 더블 클릭합니다. 그러면 Color Picker라는 창이 뜨고요. 맨 밑에 # 옆에 위치한 네모칸에 웹색상코드가 나와있습니다. 녹색의 웹색상코드는 8DC63F군요!

 

 

 

앞서 확인한 253036을 8DC63F로 바꾸고 저장 버튼을 클릭합니다. 그리고 블로그 홈으로 돌아가볼까요?

 

 

 

짜잔! 제가 원하는 대로 메뉴바의 색상이 교체됐습니다! 긴 포스트 읽어주셔서 감사합니다! 혹시 질문이나 오타, 내용 오류 지적이 있으면 댓글 달아주시면 답해드리겠습니다!

 

수고하셨습니다. ^^