티스토리 '북클럽 스킨' 헤더의 메뉴 삭제하기
티스토리 블로그 스킨 중 북클럽 스킨은 깔끔한 레이아웃과 세련된 디자인 덕분에 많은 분들이 선호합니다.
하지만 사용하다 보면 “조금 더 깔끔하게 바꾸고 싶다”거나 “메뉴는 필요 없다”는 생각이 들 때가 있습니다.
이번 글에서는 블로그 메인 페이지 상단에 있는 [홈] [태그] [방명록] 메뉴를 삭제하여, 불필요한 요소를 정리하고 깔끔한 블로그 화면을 만드는 방법을 알려드리겠습니다.
📌 알림
웹서핑을 하다 보면, 제가 만든 코드나 태그 속성, 심지어 오탈자까지 그대로 가져가 본인 글처럼 사용하는 경우가 있습니다. 코드 자체의 복사는 막을 수 없지만, 제 자료를 활용해 관련 포스팅을 작성하실 때는 반드시 출처를 명시해 주시기 바랍니다.
[📌 코드 수정 시 주의사항은 아래 '더 보기'를 참고하세요.]
1. 스킨 저장.
스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경 전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.
스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.
2. [Ctrl] + [F]를 사용할 때.
먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.
본 글은 기존에 작성했던 포스팅을 수정하는 과정에서 실수로 삭제되어, 내용을 수정, 보완하여 다시 작성한 '재업로드 글'입니다.
헤더의 메뉴 삭제 미리보기
💡 안내
아래의 [방법 1]과 [방법 2] 중 본인에게 더 편한 한 가지만 선택하여 적용하시면 메뉴 영역이 깔끔하게 비활성화됩니다.
방법 1. CSS 편집으로 삭제하기
CSS 코드를 수정하려면 CSS 탭으로 이동해야 합니다.
1. 티스토리 '관리자 홈'에서 [꾸미기] → [스킨 편집] → [HTML 편집] → [CSS 탭]으로 이동합니다.
2. Ctrl + F를 이용해 아래의 태그를 찾습니다.
#gnb {
3. 기존 #gnb { ... } 스타일 코드 바로 아래에 다음 코드를 이어서 추가해 주세후, [적용] 버튼을 눌러 저장합니다.
/* 헤더의 메뉴 비활성화 코드 추가 */
#gnb {
display: none !important;
}기존 코드와 완전히 분리하여 #gnb { 블록을 바로 아래에 한 번 더 추가해 주는 이유는, 나중에 메뉴를 다시 원복(복원)할 때 기존 스킨 고유 코드를 건드리지 않고 이 추가된 부분만 찾아 깔끔하게 삭제할 수 있어 관리가 매우 편리해지기 때문입니다.
💡 안내
아래의 [방법 1]과 [방법 2] 중 본인에게 더 편한 한 가지만 선택하여 적용하시면 메뉴 영역이 깔끔하게 비활성화됩니다.
방법 2. HTML 편집으로 삭제하기
이번에는 HTML편집을 이용해 여백 부분을 삭제해 보겠습니다
1. 티스토리 '블로그관리 홈'으로 들어가셔서 스킨편집 > html편집 > 'HTML 탭'으로 들어갑니다.
2. 여기서 HTML 탭을 한번 클릭 후 [Ctrl + F]를 이용해 ##_blog_menu_##를 검색합니다.
##_blog_menu_##3. 검색 후 아래 그림처럼 숨겨줄 코드의 시작 부분에 <!--를 추가하시고, 끝부분에 -->를 추가해 줍니다.
그런 HTML코드가 색이 변하면서 비활성화 처리가 됩니다.
💡 알아두면 유용한 코드 주석 활용법
HTML과 CSS 코드를 편집할 때는 '주석(Comment)' 기능을 활용하면 코드를 지우지 않고도 임시로 숨기거나 메모를 남길 수 있어 안전한 작업이 가능합니다.
1. 주석이란?
주석 안의 내용은 실제 블로그 화면이나 기능에는 아무런 영향을 주지 않으며, 오직 코드를 관리하는 사람에게만 보이는 설명 글 또는 숨김 영역이 됩니다.
2. 작성하는 방법
- HTML 주석: <!-- 숨길 내용이나 설명 --> 형태로 작성합니다. (예: <!-- 홈 상단메뉴 -->)
- CSS 주석: /* 숨길 내용이나 설명 */ 형태로 작성합니다. (예: /* GNB 메뉴 숨김 처리 */)
3. 메뉴 복원 방법
추후 다시 메뉴 영역을 활성화하여 사용하고 싶다면, 추가했던 CSS 코드나 HTML 내의 주석 표시(<!--와 --> 또는 /*와 */)를 제거한 뒤 저장하면 원래대로 깨끗하게 복원됩니다.
티스토리 블로그를 운영하다 보면 스킨 종류에 따라 상단 로고나 타이틀 주변의 여백이 너무 넓거나 좁아 답답하게 느껴질 때가 있습니다. 오늘은 티스토리 스킨 편집 메뉴에서 CSS 코드를 수정하여 헤더 내부 여백(Padding)을 조정하고 로고 간격을 완벽하게 최적화하는 방법을 알기 쉽게 정리해 드리겠습니다.
CSS 수정을 통한 헤더 내부 여백 조정 방법
1. 블로그 관리자 홈에서 [스킨 변경] - [스킨 편집] - [html 편집]으로 이동한 뒤, 우측 상단의 [CSS] 탭을 클릭합니다.
2. 코드 입력창을 클릭한 후 [Ctrl + F]를 눌러 아래의 레이아웃 선택자를 검색합니다.
/* Layout Selector */3. 해당 위치 부근에서 아래와 같은 코드를 찾습니다. 여기서 padding(안쪽 여백) 수치와 line-height(줄 간격)의 px(픽셀) 수치를 낮추거나 높여가며 위아래 간격을 정밀하게 제어할 수 있습니다.
/* == 티스토리 헤더 여백 설정 설명 == */
padding: 23px 0; /* 상하 여백 23px, 좌우 여백 0을 의미합니다. (상하 값을 낮추면 줄어듭니다.) */
font-family: 'Nanum Myeongjo';
font-weight: 800;
font-size: 1.75em;
line-height: 32px; /* 텍스트 줄 간격(행간)을 설정합니다. */
letter-spacing: -0.2px;
color: #333;💡 꿀팁
수치를 한 번에 크게 바꾸기보다 5px 단위로 늘리거나 줄이면서 '스킨편집'의 '미리보기'로 실시간 확인하는 것이 좋습니다.
Case A. 「h1 태그가 2개입니다.」 적용 코드
Case B. 「h1 태그가 2개입니다.」 미적용 코드
4. 원하는 크기와 여백 조절이 끝났다면, 우측 상단의 [적용] 버튼을 반드시 누르고 블로그 화면을 새로고침(F5)하여 변경된 디자인을 최종 확인해 주시면 모든 작업이 완료됩니다!
마무리
이렇게 하면 북클럽 스킨의 상단 메뉴를 깔끔하게 정리할 수 있습니다. 메뉴를 삭제하면서도 필요에 따라 HTML 편집 없이 간단히 유지할 수 있으므로, 블로그 화면을 깔끔하게 관리하는 첫걸음으로 추천드립니다.
다음 글에서는 블로그 상단의 ‘타이틀 로고’를 크게 만들어 블로그 첫인상을 더욱 돋보이게 하는 방법을 소개할 예정이니, 계속해서 확인해 보세요.
관련글 바로가기
티스토리 북클럽 스킨 | "h1 태그가 2개입니다." 문제 원인과 해결 방법
티스토리 북클럽 스킨 | "h1 태그가 2개입니다." 문제 원인과 해결 방법
티스토리 '북클럽 스킨' SEO 검색 최적화 방법수익형 블로그를 운영하거나 블로그 활성화를 목표로 하신다면, 지금 당장 티스토리 북클럽 스킨의 고질적인 결함을 점검하셔야 합니다. 모든 글은
galam.tistory.com
블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨
블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨
목차옆 열기/닫기 버튼 자동목차블로그 헤더의 '타이틀 로고' 크게 만들기✚블로그의 헤더는 방문자가 가장 먼저 시선을 두는 곳이자, 여러분의 브랜드를 가장 효과적으로 전달하는 얼굴과 같
galam.tistory.com
여러분의 공감과 댓글은 큰 힘이 됩니다.✦ 가람과 함께하는 이야기 ✦
