[티스토리 스킨 편집] 상단 메뉴 없애기(초⭐️간단!!)

 

 

 

 

 

티스토리 블로그에 관심을 가진지도 어언 한 달.

처음엔 Odyssey 스킨을 사용하다가 애드센스에는 Book Club 스킨이 좋다는 얘기를 듣고서는

북클럽 스킨을 조금씩 손보며 계속 사용하고 있다.

 

아마 많은 블로거들이 나와 같은 이유로 북클럽 스킨을 사용하고 있는 듯하다 :)

 

 

북클럽 스킨을 적용하고 스킨 편집 > 홈 설정에서

홈 화면 글 수를 9개로 늘리면 이렇게 콘텐츠의 길이와 사이드바의 길이가 얼추 보기 좋게 맞춰진다.

 

여기서 난 잘 사용하지 않는 상단의 메뉴도 없애볼까 한다.

 

관리 화면에서 홈, 태그, 방명록 대신 자주 쓰는 다른 메뉴를 넣을 수 있긴 하지만

북클럽 스킨 특성상 사이드바에 이미 카테고리가 있기도 하고...

또 메뉴가 많아서 주요 메뉴를 상단에 집어넣으면 이 상단바가 유용하겠지만

난 카테고리에 메뉴가 많지 않으니 굳이 상단의 메뉴가 또 필요할까 싶었다.

 

 

 

 

 

 

 

 

이번에도 역시 F12를 눌러 개발자 모드를 들어간 뒤

왼쪽 상단의 아이콘을 클릭해준 후, 내가 없애고자 하는 상단의 메뉴를 클릭해준다.

 

그럼 블로그 타이틀 밑에 제법 공간을 차지하고 있는 이 메뉴가

nav#gnb란 것을 알 수 있다.

 

그럼 이제 관리 > 스킨 편집 > html 편집 > CSS로 들어가서

CSS문서를 한 번 클릭해준 뒤 ctrl + F 또는 ctrl + G를 눌러서 #gnb를 검색한다.

 

왼쪽은 크롬의 검색 기능이고, 오른쪽이 에디터의 검색 기능인데 오른쪽처럼 에디터의 검색 기능을 이용해야 한다.

 

#gnb를 검색해보면 #gnb, #gnb::-webkit-scrollbar 등등 검색 결과가 꽤 많이 나오지만

다른 것 다 제쳐두고 #gnb { 로 시작하는 부분만 보면 된다.

 

방법은 설명하기 민망할 정도로 아주 아주 아~주 간단하다.

그냥 이 #gnb 안에

display: none;

이 한 줄만 끼워 넣어주면 끝!

 

적용을 누르고 블로그를 새로고침 해주면

이렇게 자리를 차지만 차지하던 상단 메뉴가 감쪽같이 사라진 것을 볼 수 있다~!

 

아예 다 지워버리는 방법도 있긴 하지만...

사람 일이란 또 어떻게 될지 모르는 일이니 그냥 display: none;만 쓱 끼워 넣었다가,

나중에 다시 메뉴가 필요하다 싶으면 다시 그 한 줄만 샥! 지워주면 된다.

 

 

 

 

 

 

---

 

 

 

 

 

 

메뉴뿐만 아니라 다른 요소도 안 보이게, 자리도 차지 안 하게 만들고 싶다면

지금 본 방법과 똑같이 개발자 모드(F12)로 들어가서

 

1. 요소의 이름을 알아내고

2. CSS 문서에서 검색 기능으로 해당 요소의 스타일을 알아낸 뒤

3. display: none;으로 안 보이게 만들면 끝!