티스토리 블로그 스킨 만들기 9 – 제이쿼리 플러그인을 이용한 메뉴바 만들기 1

이번 글에서 만들 메뉴바입니다. 이미지로 보면 단순하지만 이곳 을 클릭하여 위 테스트 블로그로 이동하고 메뉴에 마우스오버하면 홈에 있던 회색의 박스가 애니메이션 되면서 해당메뉴로 이동합니다. 이것은 제이쿼리 플러그인을 사용한 것입니다. 이러한 제이쿼리 플러그인을 Lava Lamp 라고 합니다. 이것은 메뉴의 글자의 크기에 따라서 사각형이 변하기 때문에 이름이 붙여진 것입니다. Lava Lamp란 용암이 물흐르듯 움직이는 램프인데 이것에서 이름을 붙인듯합니다. 제 블로그에 사용한 것도 제이쿼리 플러그인을 사용한 것인데 이것을 설치하려면 메뉴를 html 편집창에서 편집을 할 수 있도록 되어있어야 하는데 지금 수정하고 있는 스킨은 메뉴 편집이 안되고 관리자 메뉴의 화면설정으로 들어가서 메뉴를 삽입하거나 제거하는 기능이 있습니다. 이곳에서 메뉴를 추가나 제거를 할 수 있을 뿐입니다. 그래서 메뉴를 그대로 두고 간단한 제이쿼리 플러그인을 사용하도록 합니다. 이것을 사용하면 화면설정에서 메뉴를 추가하거나 제거해도 그에 따라서 변동이 됩니다. 메뉴 사용하는 방법도 알아봅니다.

1. 제이쿼리 플러그인 수정하기 

이곳 을 클릭하면 제이쿼리 플러그인이 있는 제 포스팅으로 이동합니다. 압축파일을 다운받아 찾기쉬운 폴더에 압축을 해제하고 html 파일과 CSS파일을 텍스트 에디터에 열고 수정해야합니다.

우선 html 파일을 클릭하여 웹브라우저에서 보면 위와 같이 세종류의 플러그인이 있습니다. 하나는 이미지를 사용하는데 이미지의 색상이 블로그와 어울리지 않습니다. 그래서 두번째 플러그인을 사용합니다. 세번째를 원하시면 제 포스팅 글내용을 응용해서 사용해도 됩니다.  

 
html파일을 텍스트 에디터에 열면 위와 같이 나옵니다. 1의 lavalamp_text.css는 CSS파일을 링크합니다. CSS파일을 텍스트에디터에 열면 세종류가 있는데 그중에 한부분만 복사해서 블로그의 CSS에서 사용할 것입니다. 2는 제이쿼리 라이브러리로 제이쿼리는 어려운 자바스크립트를 쉽게 사용하기 위해 많은 함수를 저장한 함수 보관소로 생각하시면 됩니다. 이 라이브러리만 있으면 간단한 애니메이션도 가능합니다. 이러한 애니메이션을 자바스크립트만으로 만들자면 많은 코드가 필요하게 됩니다. 제이쿼리 라이브러리는 위처럼 파일을 폴더에 첨부하여 링크를 걸어도 되지만 되도록이면 구글의 제이쿼리 라이브러리를 사용하는 것이 훨씬 편합니다 . 3은 지금 사용하려고 하는 라바램프 플러그인이고 4는 애니메이션을 부드럽게 움직이게 하는 기능의 플러그인입니다. 이징(easing)이란 애니메이션에서 움직이기 시작할때는 관성에 의해 서서히 움직이고 가속도가 붙어서 빠르게 움직이다가 정지할때도 서서히 정지하는 기능을 하는 하나의 용어로 자동차의 움직임을 생각하시면 이해가 되실 겁니다. 이두가지 파일은 다운받은 파일에서 블로그로 업로드해서 링크를 걸어줘야합니다. 5의 빨간 박스의 코드는 라바램프를 사용하기 위해 타겟을 정하는 제이쿼리로서 이부분도 블로그의 html 편집창에 붙여넣기해야합니다. 현재 3가지 타겟으로 아래의 3개의 클래스 선택자에 대해서 작동할 수 있도록 해놓았는데 필요한 것은 No Image 부분입니다. 블로그에서는 .blogMenu라는 클래스 선택자를 타겟으로 하므로 위 세가지를 지우고 
.blogMenu 로 고쳐줍니다. 순서대로 블로그에 첨부해봅니다.

 
구글의 제이쿼리 라이브러리는 이곳 을 클릭하여 아래로 스크롤하면 위와같은 부분이 있습니다. 1에서 클릭하여 2까지 드래그한 다음 Ctrl+C키를 눌러 복사합니다.

블로그 HTML 편집창에서 첫부분에 보면 1과 같은 부분이 있습니다. 블로그의 CSS를 불러오는 링크인데요. 제이쿼리는 CSS의 선택자를 타겟으로 하기 때문에 CSS다음에 붙이는 것이 좋습니다. CSS가 먼저 로딩되고 제이쿼리가 그다음 동작으로 들어가야죠. 1에 클릭하고 엔터키를 두번 쳐서 Ctrl+V키를 눌러 구글 제이쿼리 라이브러리를 붙여넣습니다. 그다음 텍스트 에디터에서 3과 4부분을 복사해와서 차례대로 붙여넣습니다. 그런다음 jquery라는 단어 앞에 ./images/ 를 추가합니다. 두개의 파일을 블로그 서버에 업로드할 것인데 그 경로가 images폴더이거든요. 앞에 점은 반드시 붙여야합니다. 그다음으로 텍스트 에디터에서 6부분을 복사해서 붙여넣습니다. 7처럼 .blogMenu라고 고쳐져 있어야합니다. 8은 애니메이션되는 속도입니다. 700은 700밀리초(mili second)입니다. 그러니 0.7초를 의미합니다.

위 창이 있는 상단에서 파일업로드를 우클릭해서 “새탭에서 링크열기”를 선택해서 그 화면으로 갑니다. 하단에서 추가버튼을 클릭하여 브라우저창이 나오면 압축파일중 iquery.lavalamp.js 와 jquery.easing.1.1.js파일을 선택해서 업로드합니다.

2. CSS 수정

텍스트 에디터에서 CSS 부분을 수정합니다. 5의 47번째 줄부터 lavaLampNoImage를 모두 blogMenu로 바꿔줍니다. 앞의 점(.)은 그대로 둬야합니다. 1은 원본 플러그인의 폭이고 2는 배경색이므로 블로그에서는 필요없죠. 두줄을 제거합니다. 3은 2픽셀로 수정합니다. 4부분은 메뉴의 밑줄을 만드는 부분입니다. border를 border-bottom으로 바꾸고 gray는 검정(#000)으로 바꿉니다. 
lavaLampNoImage li.back는 메뉴의 애니메이션되는 네모상자를 만드는부분입니다. html에서 li까지는 있는데 .back이라는 클래스 선택자는 없습니다. 이것은 제이쿼리 플러그인에서 설정되어있습니다. 즉 제이쿼리는 이 .back라는 클래스 선택자를  애니메이션 하는 기능을 하고 있습니다. 배경색을 옅은 회색(#ccc)으로 바꿉니다. 이 색상을 원하는 색으로 설정해도 됩니다. 스킨의 전체적인 색이 회색계통이라서 회색으로 했습니다. 그 다음에 폰트의 크기는 12픽셀로 줄입니다.

위처럼 고쳤는데 위 코드를 그대로 복사해서 블로그 CSS에 붙이면 탭으로 인해 공간이 떨어져 있어서 블로그의 CSS편집창에는 보기가 좋지 않습니다. 그래서 탭으로 떨어진 공간을 제거해줘야합니다. 5에서 클릭하여 88번째 줄의 마지막 괄호까지 드래그하여 블럭설정한 다음 Shift+Tab키를 누르면 탭이 하나씩 줄어듭니다. 모든 탭공간이 사라질때까지 계속 눌러줍니다. 그런다음 Ctrl+C키를 눌러 복사합니다.

블로그의 CSS편집창에서 .blogMenu로 검색을 합니다. 위 화면에서 1을 제외한 2의 줄전체와 3의 빨간박스 전체를 제거합니다. 1의 마지막인 4에 클릭 엔터치고 Ctrl+V키를 눌러 붙여넣습니다. 저장버튼을 클릭하고 블로그 화면에서 보면 다음과 같이 나옵니다.

1의 네모박스는 다른메뉴에 마우스를 대면 따라다니면서 작동은 잘 됩니다. 그런데 홈 메뉴가 글자가 폭이 좁아서 네모 상자가 작습니다. 좀 늘려야하고 색상도 바꿔야하는데 #header a에 의해 통제를 받습니다. 지금 수정하고 있는 스킨의 메뉴바는 블로그 메뉴 치환자( [.##_blog_menu_##.] )만 있고 메뉴에 대부분 있는 ul이나 li 태그가 없지만 이를 CSS로 통제는 할 수 있습니다. 다만 3과 같은 클래스 선택자는 html에는 없지만 CSS에서 설정해주면 통제가 가능해지는 것이죠. 또한 4를 보면 서치박스로 인해 줄이 끝났습니다. 이것도 끝까지 나오게 하고 서치박스를 아래로 내려야합니다.

우선 홈의 폭을 늘려야하는데 위의 선택자에서 어떤 것을 선택할까요. 홈 메뉴는 li 태그에 있는데 다른 메뉴에서 li태그가 있죠. 홈만을 통제하기 위해서는 3의 t_menu_home이라는 클래스 선택자를 선택해서 CSS에서 명령을 내려야합니다.

.t_menu_home는 1처럼 패딩에 두개의 값만 있으면 앞의 값는 상하 패딩이고 뒤의 값는 좌우 패딩입니다. 좌우로 패딩이 생기므로 폭이 넓어집니다. 메뉴 글자의 색상은 #header a에 의해 통제되는데 색상이 #787878이었습니다. 그런데 #header .blogMenu li a 에도 글자의 색상인 검정이 있습니다. 하지만 선택자는 아이디 선택자가 클래스 선택자에 우선하므로 헤더의 모든 a 태그에 선언된 #787878이 우선하게 됩니다. 이것을 검정으로 바꾸려면 빨간색의 글자처럼 앞에 #header를 붙여주면 특정화되므로 가능해집니다. 위처럼 설정하고 블로그를 보면 원하는대로 변경이 됩니다.

메뉴와 서치박스는 그동안 자리를 잘 잡고 있었는데 제이쿼리 플러그인을 설치하면서 서로 어긋나게 됐습니다. 이것은 그동안 #searchBox가 float:right;로 우측에 자리를 잡았는데 2의 .blogMenu가 들어오면서 position:relative;가 있어서 그렇습니다. 이 속성은 그 아래에 있는 .blogMenu li.back 선택자가 position: absolute; 라는 속성이 필요하기 때문에 변경을 할 수 없으므로 #searchBox 에 대해서 위치 속성을 설정하면 둘다 잘 어울립니다. 1의 
float:right; 를 제거하고 position:absolute; right:0px; top:120px; 로 바꿔줍니다. 이것만 설정해서는 안되고 3처럼 부모요소인 #header에 
position:relative; 를 설정해줘야합니다. 포지션에 관한 내용은 CSS 기초부분을 보시면 도움이 됩니다.

여기까지 하고 관리자센터에서 화면설정을 선택하고 메뉴탭을 선택하면 다음과 같은 화면이 나옵니다.

3. 메뉴 사용하기

 
제 블로그의 카테고리에 제이쿼리가 있습니다. 이것을 상단 메뉴로 추가하려면 1에 메뉴이름을 입력하고 속성에서 카테고리를 선택하면 분류전체보기에 내가 만든 카테고리가 전부 나옵니다. 여기서 제이쿼리를 선택한 다음 추가버튼을 클릭하면 메뉴관리에 추가됩니다. 저장버튼을 클릭하고 블로그 화면에서 보면 메뉴가 나타납니다. 현재 홈메뉴가 한글로 되어있어서 폭이 좁아 좌우 패딩값을 설정하여 폭을 넓혔는데 이를 영문으로 바꾸면 폭을 늘리지 않아도 되겠죠. 우선 6의 홈 우측에 있는 X를 클릭하면 제거됩니다. 그런다음 메뉴명에 HOME를 입력하고 속성에서 기본메뉴를 선택합니다. 그러면 분류 전체보기에 홈이 나옵니다. 선택하고 추가하면 메뉴관리에 HOME으로 나옵니다. 클릭드래그하여 상단으로 이동하고 저장하면 한글이 영문으로 나오고 폭으로 설정한 패딩값을 제거해도 됩니다.

 
폭이 넓어져서 패딩을 제거해야하는 상황입니다. 이렇게 메뉴를 관리하는 것은 html이나 CSS와는 상관없고 데이터베이스에 저장이 됩니다. 다음글에서는 이 스킨에서 사용하는 메뉴기능을 제거하고 메뉴를 수동으로 메뉴를 설치하고 지금 제 블로그에서 사용중인 제이쿼리 플러그인을 설치하는 방법을 알아봅니다. 

다음은 지금까지 진행한 스킨의 파일입니다. 이전 글을 참고하여 설치하면 됩니다.

cfile2.uf.127CDF424F35422214C1A9.zip

Related posts:

  1. 티스토리 블로그 스킨 만들기 10 – 제이쿼리 플러그인을 이용한 메뉴바 만들기 2 이번 글에서 만들게 될 메뉴바입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 메뉴에 마우스 오버하면 서브 메뉴가 애니메이션 되면서 나옵니다. 구글...
  2. 티스토리 블로그 스킨 만들기 2 – 배경색상 변경, 본문 글자색상 변경, 컨테이너 배경 이미지 바꾸기 이전 글 에서 티스토리 스킨을 만들기 위한 환경 설정에 대해서 알아보았습니다. 두가지 방법이 있었는데 가능한한 텍스트큐브를 WAMP서버에 설치하고 작업하는 것이...
  3. 티스토리 블로그 스킨 만들기 4 – 사이드바 영역 배경이미지 만들기 사이드바 영역의 배경이미지는 가로로 늘어나지 않기 때문에 컨텐트영역의 배경이미지보다는 간단합니다. 하지만 모듈이 여러개 배치되므로 각 모튤마다 배경이미지를 만들어줘야합니다. HTML부분에서는 클래스...
  4. 티스토리 블로그 스킨 만들기 6 – 컨텐트 영역에 구글 애드센스 광고 설치하기 블로그나 웹사이트는 광고를 다는 것이 보통이죠. 구글 애드센스 광고는 이미지도 좋아서 웹페이지나 블로그에 하나의 장식요소로서의 작용도 합니다. 멋진 이미지가 있는...
  5. 티스토리 블로그 스킨 만들기 8 – Footer 영역과 페이징에 배경이미지 삽입 이번 글에서 진행할 내용은 세가지입니다. 컨테이너 영역 외부에 있던 Footer를 내부로 들여오고 이 footer와 페이징을 CSS기초에서 만든 배경이미지로 둥근 모서리를...

댓글 남기기