■ 메뉴 미리보기
지금 제 블로그에도 CSS 메뉴를 이용해서 만들었습니다.
복잡한 자바스크립트보단 소스도 더 간결하면서, 수정하기도 쉬어서 요즘 많이들 사용하고 있지요 ~
■ 소스 살펴보기
먼저 소스를 다운받아주세요.
먼저 소스를 열어보시면 어디서 부터 어디까지가 head 와 body 에 들어갈 소스인지 알게됩니다.
위 소스에서 다른 부분은 그다지 수정하지 않아도 상관없고요,
자신의 홈피색에 맞게 하려면
빨간 네모난 부분만 수정하셔도 됩니다.
color : 메뉴 색을 나타냅니다.
border-bottom : 메뉴 아래 라인 부분 두께를 조절합니다.
solid gray 메뉴 라인부분의 색을 나타냅니다.
border-bottom-color : black 마우스를 가따대었을때 색을 말합니다.
■ 소스 적용하기
이제 만들어진 메뉴를 적용해야겠지요?
스킨 => HTML/CSS 편집으로 갑니다.
skin.html 부분에서 </head> 바로 위에 head 부분의 소스를 넣어주세요.
스킨마다 아마 소스가 조금씩 다르겠지만 기본 치환자는 같기때문에 그걸로 설명할께요.
</s_search> 이부분을 찾으세요. 검색 소스가 끝나는 부분입니다.
CTRL + F 를 선택하여 검색창에 찾으시면 편리합니다.
제 스킨에서는 </s_search> 끝나고 </div><!-- floatWrapper_01 close --> 이렇게 되어있네요 ~_~
여하튼 </div>도 다 닫혀있는 소스까지 찾아낸 다음 바로 그 아래에
<body> 에 들어가있는 메뉴 부분 소스를 넣어주시면 됩니다.
기본 스킨 소스들이 길기 때문에 항상 주석을 표시해 주세요 ^^
그러면 메뉴 적용은 다 한겁니다.
미리보기를 보면서 설정을 해주세요.
그럼 이쁜 메뉴 만드세요^^
지금 제 블로그에도 CSS 메뉴를 이용해서 만들었습니다.
복잡한 자바스크립트보단 소스도 더 간결하면서, 수정하기도 쉬어서 요즘 많이들 사용하고 있지요 ~
■ 소스 살펴보기
먼저 소스를 다운받아주세요.
heeyamenu1.txt먼저 소스를 열어보시면 어디서 부터 어디까지가 head 와 body 에 들어갈 소스인지 알게됩니다.
위 소스에서 다른 부분은 그다지 수정하지 않아도 상관없고요,
자신의 홈피색에 맞게 하려면
빨간 네모난 부분만 수정하셔도 됩니다.
color : 메뉴 색을 나타냅니다.
border-bottom : 메뉴 아래 라인 부분 두께를 조절합니다.
solid gray 메뉴 라인부분의 색을 나타냅니다.
border-bottom-color : black 마우스를 가따대었을때 색을 말합니다.
■ 소스 적용하기
이제 만들어진 메뉴를 적용해야겠지요?
스킨 => HTML/CSS 편집으로 갑니다.
skin.html 부분에서 </head> 바로 위에 head 부분의 소스를 넣어주세요.
스킨마다 아마 소스가 조금씩 다르겠지만 기본 치환자는 같기때문에 그걸로 설명할께요.
</s_search> 이부분을 찾으세요. 검색 소스가 끝나는 부분입니다.
CTRL + F 를 선택하여 검색창에 찾으시면 편리합니다.
제 스킨에서는 </s_search> 끝나고 </div><!-- floatWrapper_01 close --> 이렇게 되어있네요 ~_~
여하튼 </div>도 다 닫혀있는 소스까지 찾아낸 다음 바로 그 아래에
<body> 에 들어가있는 메뉴 부분 소스를 넣어주시면 됩니다.
기본 스킨 소스들이 길기 때문에 항상 주석을 표시해 주세요 ^^
그러면 메뉴 적용은 다 한겁니다.
미리보기를 보면서 설정을 해주세요.
그럼 이쁜 메뉴 만드세요^^
'■ 블로그꾸미기 > css menu' 카테고리의 다른 글
| 깔끔한 CSS 메뉴 - 2 (0) | 2010.09.27 |
|---|
