[스킨] GRAVITY SKIN 8 | 사이드바 메뉴 꾸미기

 

한재 님이 GRAVITY SKIN 8을 업데이트를 무려 2번이나 해주셨다. 첫 번째 때엔 link 기능을 추가해 주셨는데, 이번엔 메뉴 등 다른 업데이트가 많이 되었다. ㅠ_ㅠ 그저 감사할 따름이다. 이번에 나는 이 사이드바를 태그 연결되는 것으로 꾸며보려고 한다.

 

GRAVITY SKIN 8 꾸미기 관련 글

[스킨] GRAVITY SKIN 8 | 내게 맞는 폰트 찾기

[스킨] GRAVITY SKIN 8 | 블로그 제목처럼 Universe 만들어 보기

[스킨] GRAVITY SKIN 8 | 스킬바 활용

 

앞서 말씀드리자면 나는 코딩에 코 자도 모르는 사람이다. 잘 알지 못한다.

 

이 포스팅도 나 자신이 보기 위해 기록하는 것이다. 대충 몇 번째 줄, 어쩌고 저쩌고라고 적어두었다.

 

1. 사이드바 메뉴

 

메뉴바 수정 전 / 후

 

먼저 내가 수정할 사이드바에 있는 메뉴이다. 왼쪽은 변경 전의 모습이고 오른쪽은 변경 후의 모습이다. 한 줄이 두 줄이 되어 있는 걸 볼 수 있다. 먼저 메뉴바를 수정할 수 있는 방법을 적어두겠다.

 

2. 사이드바 기존 수정 방법

 

메뉴 수정할 수 있는 방법

 

먼저 블로그 관리 > 꾸미기 > 스킨 편집에 들어가면 위 이미지와 같은 설정이 가능하다. 다만 위 문구를 보면 알 수 있듯 메뉴 - 프로필/사이드바라고 되어 있지 않은가?

 

여기에서 《메뉴 - 프로필》은 프로필 사진을 누르면 나오는 것이고, 《메뉴 - 사이드바》는 우리가 수정할 사이드바의 메뉴이다.

메뉴 프로필 / 메뉴 사이드바

 

자, 여기에서 알아볼 수 있는 것? 저기에서 편집을 하게 되면 《메뉴 - 프로필》와 사이드바에 있는 메뉴가 같이 변경된다는 점이다.

 

 

변경한 메뉴 - 사이드바

 

짜잔, 이렇게 변경했다.

 

여기에서 나는 《메뉴 - 프로필》은 그대로 놔두고 싶어서 그대로 놔두고 《메뉴 - 사이드바》만 수정하는 방법으로 진행했다. 따라서 《메뉴 - 프로필》에 나오는 메뉴와 《메뉴 - 사이드바》에 나오는 메뉴가 동일하게 보이고 싶다면 앞서 소개한 기존 수정 방법을 통해 수정하면 된다.

 

다시 한번 말하지만 아래에 내가 소개할 방법은 《메뉴 - 프로필》에 나오는 메뉴는 그대로 두고, 《메뉴 - 사이드바》 메뉴만 수정하는 방법이다.

 

3. 사이드바 메뉴만 따로 수정

※ GRAVITY SKIN 8.1 스킨을 다운로드하고 전혀 수정을 하지 않았을 때를 기준으로 설명한다.

 

3.1 블로그 관리 > 꾸미기 > 스킨 편집 > html 편집 > html에 들어간다.

 

3.2 ctrl + f를 누르고 "메뉴"를 검색해준다.

 

※ html 172번 줄에 메뉴라고 적힌 부분을 찾을 수 있을 것이다.

 

3.3 179번 줄("<s" 로 시작하는 줄), 183번 줄("</s"로 시작하는 줄)이 보일 텐데, 그 부분만 삭제해준다.

 

※ 여기에서 중요한 건, 179번 줄과 183번 줄만 지워주고 그 안에 있는 값은 없애지 않는다.

 

아래는 이해를 돕기 위한 예시니 참고.

 

/* 변경 전 */ 

179번 줄 <s 뭐라뭐라뭐라뭐라>
180번 줄 <세븐틴 - World 들어주세요.>
181번 줄 <f(x) - All mine 들어주세요.>
182번 줄 <제가 좋아하는 노래거든요.>
183번 줄 </s 뭐라뭐라뭐라뭐라>

/* 변경 후 */

179번 줄 
180번 줄 <세븐틴 - World 들어주세요.>
181번 줄 <f(x) - All mine 들어주세요.>
182번 줄 <제가 좋아하는 노래거든요.>
183번 줄

 

179번 줄에 내용만 삭제하고 줄은 그대로 놔둬라. 나는 179번 줄에 내용만 삭제되고 줄은 그대로 있다고 생각하며 설명할 것이다.

 

3.4 181번 줄을 수정해준다.

 

181번째 줄 <a href="이동했으면 하는 경로"><i class="아이콘명"></i></a>

ex)
181번째 줄 <a href="/tag/맛집"><i class="fa-solid fa-feather-pointed"></i></a>

 

아이콘명은 FONTAWESOME 사이트에서 검색 가능하니 원하는 것을 찾아 쓰자.

참고로 나는 free만 검색해서 사용한다.

 

3.5 이런 식으로 수정을 해주면 된다.

 

혹시 몰라 삭제해야 할 줄과 수정해야 할 줄을 적어둘 테니 참고해서 수정하길 바란다.

 

3.3처럼 내용 삭제: 179번, 183번, 184번, 188번, 189번, 193번, 194번, 198번

3.4처럼 수정할 곳: 181번, 186번, 191번, 196번

 

여기까지 수정해서 만족한다면 다행이지만, 나는 두 줄까지 만들지 않았는가? 두 번째 줄을 만드는 방법을 알려주겠다.

 

4. 메뉴 두 줄로 만들기

 

수정 방법: 178번~199번 줄까지 복사해서 200번째 줄에 붙여준다.

 

199번 줄을 보면 </영문> 형태로 되어 있을 것이다. 그러면 199번 줄 </영문> 바로 뒤 커서를 두고 엔터를 쳐준 다음에 복사한 것을 붙여 넣기를 해준다.

그렇게 되면 200번 줄이 178번 줄과 같을 것이다.

 

그렇게 하면 당신이 수정한 첫 번째 줄과 똑같은 두 번째 줄을 얻을 수 있다. 두 번째 줄을 똑같이 쓰고 싶다면 그대로 두어도 상관없지만, 그러려고 굳이 두 줄을 만들 필요는 없지 않은가? 아무튼 그렇게 해서 두 번째 줄을 활용할 수 있다.

 

이 방법은 두 줄을 쓰는데 두 줄 모두 4개씩 가득 채워서 사용하는 방법이다.

 

이 방법에서 조금만 수정하면 아래와 같이 사용도 가능하다.

 

Q. 두 줄로 쓸래요. 근데 두 번째 줄 중에 나는 아이콘 하나만 쓰면 돼요.

 

두 줄로 쓰지만 아이콘은 하나만.

 

A. 206번 줄부터 220번 줄을 삭제해라.

 

Q. 두 줄로 쓸래요. 근데 아까 아이콘 하나만 쓴다던 사람인데, 저 하나 더 쓰고 싶어요.

 

두 줄, 아이콘은 두 개.

 

201번 줄부터 205번 줄을 복사해서 205번 줄 마지막 커서에 엔터를 두고 붙여 넣기를 해라.

206번 줄이 201번 줄과 동일하다면 성공한 것이다.

 

세 개 쓰려고 할 때도 위와 같이 한 번 더 복사해서 붙여 넣기 해주면 된다.

 

보다 보면 ‘아, 이게 하나의 덩어리처럼 움직이는구나.’하는 걸 눈으로 보면서 알 수 있다. 내가 알려주는 줄의 간격이 일정하다는 걸 알 수 있을 것이다.

 

5. 수정을 했으면 정리를 해주자.

 

줄만 덩그라니 있고 비어 있는 줄은 과감히 정리해준다.

 

예시는 아래와 같다.

 

/* 변경 전 */
179번 줄 
180번 줄 <세븐틴 - World 들어주세요.>
181번 줄 <f(x) - All mine 들어주세요.>
182번 줄 <제가 좋아하는 노래거든요.>
183번 줄

/* 변경 후 or 정리 후 */

179번 줄 <세븐틴 - World 들어주세요.>
180번 줄 <f(x) - All mine 들어주세요.>
181번 줄 <제가 좋아하는 노래거든요.>

 

이렇게 정리해주고 나면 깔끔해진다.

 

연결되는 주소도 개별적으로 수정하고 아이콘도 개별적으로 수정했다. 뭐, 이렇게 기록을 남기는 이유는 내가 나중에 기억을 못 할까 봐 기록을 해놓는 목적도 있다.

 

html을 볼 줄 아시는 분이면 이것만 기억하면 될 것 같다.

ul은 한 줄, li는 여기에선 아이콘을 감싸주는 역할을 의미한다는 것을.

 

6. 스킨 정보

 

스킨명: GRAVITY SKIN 8(ver 8.1)

스킨 배포 및 판매: 한재 님

 

한재님 블로그 바로가기