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

티스토리는 내가 직접 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를 공부할 수 있습니다. 티스토리에 사용되는 웹언어는 다른 언어에 비해서 비교적 쉬워서 해볼만 합니다.

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