티스토리 헤더, 상단 메뉴바 고정 방법

티스토리는 내가 직접 HTML을 수정해서 커스터마이징을 할수 있다는 장점이 있습니다. 그런데 HTML을 잘 만지지 못하면 꾸미는데 한계가 있습니다. 그래도 하다 보면 실력이 늘게 되는데 편하게 다른 사람의 HTML 혹은 CSS를 확인하고 해당 내용을 갖고 올 수 있습니다. 웹 언어에 대한 기초만 이해하고 있다면 티스토리를 운영하는데 많은 부분을 커스터마이징 할수 있습니다.

티스토리 헤더 고정

컴퓨터로 볼때는 상단의 내 블로그 이름과 메뉴가 굳이 고정되어 있을 필요가 없다고 생각했습니다. 하지만 모바일 버전으로 볼때 상단의 메뉴바와 블로그 메인으로 가는 블로그 이름이 고정되어 있는 것이 좋아보였습니다.


저는 현재 JB FACTORY, JB-131 스킨을 사용하고 있습니다. 자신이 사용하는 스킨에 따라서 사용법이 조금은 다를 수 있습니다.


<모바일상에서 블로그 상단을 고정하려는 이유>


1. 내 블로그 이름을 알려서 브랜딩 한다.

2. 메뉴바 이용으로 내 블로그에 머무는 시간을 늘린다.

3. 같은 스킨을 사용하는 티스토리 블로거와 차별화 한다.


모바일에서 상단에 정리해주는 남자 블로그 타이틀과 메뉴가 없는 것이 마음에 들지 않았습니다. 그래서 고정하는 방법을 생각하고 있었던 찰나에 마침 한 블로그의 스킨에서 블로그 상단 메뉴가 모바일에서 고정되어 있는 것을 알았습니다.


▲ 힌트를 얻고 나서 제 블로그에도 적용 시켜보려고 했습니다. 먼저 내 블로그에서 어느 부분이 헤더 부분인지를 찾아야 합니다. 그래서 크롬에서 내블로그의 상단 부분에 마우스 우측을 클릭하고 검사를 실행해줍니다.


검사를 한 이후에 Elements 좌측에 모바일버전으로 보기를 선택한 이후에 자신의 헤더 부분이 어느 것인지 찾아야 합니다. 우측에 보이는 Element 코드를 선택할때마다 어느부분이 적용되는 부분인지 보여주기 때문에 헤더 부분을 찾기 쉽습니다. 제 스킨에서는 jb-background-header 부분입니다.


▲ 이전의 과정은 헤더 부분이 어디까지인지, 어느 부분을 고정할 것인지 찾았다면 이제는 블로그 상단 헤더를 고정시키는 방법을 알아보겠습니다. 블로그 관리자에서 꾸미기 - 스킨편집으로 들어갑니다.


스킨편집에서 HTML 편집으로 들어갑니다. HTML 부분에서 수정을 통해서 상단 메뉴바를 고정시킬 수 있습니다.


CSS 수정으로 들어가서 위와 같은 코드를 입력합니다. 코드를 대략 해석하자면 1023px 이하일때 해당 코드를 적용한다는 것입니다. 위의 코드에서 가장 중요한 부분은 position : fixed; 라고 할수 있습니다. 상단 고정을 시키는 것이지요. 하지만 모든 코드가 존재하지 않으면 정상작동하지 않을 수 있습니다.


JB 스킨을 사용하신다면 이 CSS 코드를 사용해보시기 바랍니다. 


<CSS 코드>


/* 헤더 고정 */

@media ( max-width: 1023px ) {

.jb-background-header { position: fixed;top: 0px; width: 100%; background-color: #ffffff; z-index: 999; }

.jb-background-main { margin-top: 56px; }

}


제가 원하던 제 블로그 타이틀과 메뉴가 상단에 고정되었습니다. 헤더 부분 고정을 함으로써 제가 원하는 효과를 낼지는 더 기다려봐야겠습니다.


마무리하며

상단 헤더 부분을 고정시키려고 생각은 하고 있었는데 방법에 대해서 알지 못하고 있었습니다. 그런데 마침 jb skin을 사용하는 블로거를 알게 되었고 적용시킬 수 있었습니다. 티스토리 블로그 운영자라면 크롬에서 검사하는 방법과 페이지 소스보기를 할줄 안다면 좀 더 편하게 HTML과 CSS를 공부할 수 있습니다. 티스토리에 사용되는 웹언어는 다른 언어에 비해서 비교적 쉬워서 해볼만 합니다.


혹시 잘 안되는 부분이 있다면 댓글로 달아주세요. 저도 잘 알지는 못하지만 되는데까지는 도움을 드리도록 하겠습니다.


이 글을 공유하기

댓글

Designed by JB FACTORY