티스토리 Tistory 상단 메뉴바(툴바) 안보이게 하는 방법, 감추기

티스토리 Tistory 상단 메뉴바(툴바) 안보이게 하는 방법, 감추기

 

환경: Chrome

 

티스토리 메인 화면에서 오른쪽 상단에 있는 메뉴가 필요 없다고 생각하시는 분들이 있습니다. 어차피 관리자 페이지로 이동해서 작업을 하기 때문에 사용할 일이 많지 않습니다. URL 뒤에 /admin 을 입력하면 관리자 페이지로 접속이 가능하거든요. 이 메뉴바를 안보이게 숨겨 보겠습니다.

 

▼ 먼저 메뉴바에 적용되어 있는 CSS id 나 clsss 가 무엇인지 알아야겠죠. F12 를 눌러 개발자 도구를 띄웁니다.

 

▼ 다음은 메뉴바로 가서 오른 마우스를 누릅니다. 그럼 [검사] 라는 메뉴가 나타납니다. 이것은 마우스 위치에 있는 영역에 HTML 소스 위치를 찾아 줍니다. 개발자 도구에서 소스를 뒤지지 않고 해당 위치를 바로 찾아 갈 수 있습니다. 

 

▼ 검사를 통해 영역이 찾아 지면 개발자 도구 화면에 표시가 됩니다. 메뉴바를 감싸고 있는 것이 div 이고 id=tistorytoolbarid 라는 것을 알았습니다. 그럼 해당 div 에 영역을 숨기는 CSS 소스를 적용해야겠죠.

 

▼ 소스 적용을 위해 관리자 페이지로 갑니다. 그리고 왼쪽 메뉴에서 [HTML/CSS 편집]을 선택합니다. 그럼 분할된 편집 화면이 나타납니다. 

 

▼ 숨기는 방법은 CSS 소스는 두 가지가 있습니다. display : none 으로 하거나 visibility : hidden 으로 하는 것입니다. 그럼 차이점은 무엇일까요? display : none 은 숨기는 순간 공간도 사라집니다. 하지만 visibility : hidden 은 보이지만 않을 뿐이지 화면에서 공간은 그대로 차지하고 있습니다. 이 두 가지 속성의 차이점을 알고 자신의 블로그에 활용하세요.

 

/* 상단 메뉴바 숨기기 */ #tistorytoolbarid { display : none; }

 

CSS 탭을 누르고 편집창에 소스를 복사해서 넣습니다. 그리고 오른쪽 상단에 있는 [저장] 버튼을 눌러 적용합니다. 

 

▼ 다시 블로그로 돌아와서 메뉴바의 위치로 이동합니다. 그럼 사라진 것을 알 수 있습니다. 다시 보이게 하고 싶다면 추가한 소스를 삭제합니다. 만약 visibility : hidden 을 사용했다면 값을 visible 로 바꿔 주세요.

 

/* 상단 메뉴바 숨기기 */ #tistorytoolbarid { visibility: visible; }