티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS)

 

북클럽 스킨 상단 헤더(Header) CSS로 고정하기

✚

티스토리 북클럽 스킨을 쓰면서 스크롤을 내려도 메뉴 바가 위에 그대로 남아있으면 좋겠다고 생각하신 적 없으신가요? 상단 메뉴를 고정하면 방문자가 다른 글을 읽거나 카테고리를 이동하기가 훨씬 편해집니다.

이미 인터넷에 많은 방법이 나와 있지만, 복잡한 코딩 없이 CSS에서 #header, #aside, #dimmed 딱 세 부분만 수정하는 가장 간단한 방법을 공유합니다.

코드가 들어가서 얼핏 복잡해 보일 수 있지만, 준비된 이미지를 보며 하나씩 차근차근 따라 하시면 초보자도 3분 만에 적용하실 수 있습니다. 천천히 시작해 볼까요?

📌 알림 

웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

 [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

 

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

728x90

---

헤더(Header) 고정하기 미리보기

☑

---

1. CSS로 헤더 영역 수정하기 (#header)

☑

 

1. '블로그관리의 [꾸미기] > [스킨 편집] > [html 편집] > [CSS] 탭으로 들어갑니다.

---

 

2. CSS 탭에서 [Chift] + [F]를 이용해  #header를 검색합니다.

#header {

---

 

3. 기존의 #header { 코드를 아래 코드로 덮어씁니다. .

/* 헤더고정 */
#header {
  z-index:1010;
  background-color:rgba(255,255,255,0.90); /* 불투명 배경색 90% */
  box-sizing:border-box;
  position:sticky;
  position:-webkit-sticky;
  top:0;
  box-shadow: rgba(99, 99, 99, 0.2) 1px 1px 10px 0px; /* 하단 그림자 효과 */
  backdrop-filter: blur(5px); /* 헤더 블러 효과 */
  /*border-bottom: 1px solid #eee; 헤더 하단 밑줄 삭제*/
}
/* 헤더고정 끝 */

---

 

3) 마지막으로 미리보기로 확인 후 [적용]을 눌러 '저장'합니다

 

코드 설명

/* 헤더고정 */

#header {

  z-index:1010;

  background-color:rgba(255,255,255,0.90);

// 헤더 배경색 투명도 조절, 0.90 숫자가 낮아질수록 투명해집니다.

  box-sizing:border-box;

  position:sticky;

  position:-webkit-sticky;

  top:0;

  box-shadow: rgba(99, 99, 99, 0.2) 1px 1px 10px 0px;

// 헤더 하단에 그림자 효과로 헤더에 입체감을 줍니다.

  backdrop-filter: blur(5px);

// 헤더에 블러 효과를 주어 불투명 유리처럼 보이게 하여, 헤더 아래 비치는 본문이 흐리게 보입니다.

  /*border-bottom: 1px solid #eee; 헤더 하단 밑줄 삭제*/

// 헤더 하단에 밑줄을 넣고 싶으면 주석을 지워 주세요.

}

/* 헤더고정 끝 */

---

2. 모바일 사이드바 수정 (#aside)

☑

앞 단계에서 #header만 고정하게 되면, 모바일 화면에서 사이드바 메뉴를 열었을 때 사이드바가 고정된 헤더 밑으로 들어가 가려지는 문제가 발생합니다.

이를 해결하기 위해 CSS에서 #aside 코드를 찾아 z-index: 400;으로 되어 있는 부분을 z-index: 1030;으로 변경해 줍니다.

화면의 앞뒤 레이어 순서를 결정하는 Z축 위치를 헤더(z-index: 1000)보다 더 위로 끌어올려, 사이드바가 정상적으로 상단 메뉴 위에 표시되도록 만드는 작업입니다.

 

1. CSS 탭에서 [Chift] + [F]를 이용해  #aside를 검색합니다.

#aside {

---

 

2. z-index: 400;으로 되어 있는 부분을 z-index: 1030;으로 변경 후, [적용]을 눌러 '저장'합니다.

z-index: 1030; /* 400 */

---

3. 모바일 배경 음영 수정 (#dimmed)

☑

마지막으로 #dimmed(배경 음영) 부분의 z-index를 z-index: 1020;으로 변경해 줍니다. 이렇게 하면 모바일에서 사이드바를 열었을 때, 상단 메뉴까지 자연스럽게 같이 어두워지도록 레이어 위치가 조정됩니다.

쉽게 정리하자면, 세 요소의 z-index 값을 고정된 헤더(1000)보다 높은 숫자로 주되, 화면에 보여야 하는 우선순위에 따라 #aside(1030) > #dimmed(1020) > #header(1000) 순서로 크기를 맞춰주는 것입니다.

 

1. CSS 탭에서 [Chift] + [F]를 이용해  #dimmed {를 검색합니다.

#dimmed {

---

 

2. z-index: 300으로 되어 있는 부분을 z-index: 1020으로 변경 후, [적용]을 눌러 '저장'합니다.

z-index: 1020; /* 300 */

---

4. 검색 아이콘 배경을 둥글게 만들기

☑

북클럽 스킨의 헤더를 고정한 뒤 투명도를 조절하거나 배경색을 바꾸면, 돋보기(검색) 아이콘의 배경이 둔탁한 정사각형 모양으로 도드라져 보일 때가 있습니다.

지금부터는 이 딱딱한 정사각형 모서리를 부드럽게 다듬어, 깔끔한 원형 배경으로 바꾸는 방법을 알아보겠습니다.

▲ 배경색 수정 전

▲ 배경색 수정 후

---

1. 검색 아이콘 배경을 둥글게 만들기

1. 티스토리 '블로그 관리' 페이지에서 [꾸미기] > [스킨 편집] > [html 편집]으로 이동한 뒤, [CSS] 탭을 클릭합니다.

2. CSS 입력창 안을 한 번 클릭한 후, [Shift] + [F] 키를 눌러 #header .util .search {를 검색합니다. 검색된 두 개의 코드 중 첫 번째 코드를 수정할 예정입니다

#header .util .search {

---

 

3. #header .util .search {  코드의 닫는 중괄호(}) 직전에 [Enter] 키를 눌러 줄바꿈을 해준 뒤, 아래 코드를 복사해서 붙여넣어 줍니다.

border-radius: 50px; /*서치 아이콘 배경색 라운드*/

---

 

4. 미리보기로 확인 후 [적용]을 눌러 '저장'합니다.

---

관련글 바로가기

☑

[▸ 티스토리 꾸미기] - 블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨

블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨

[▸ 티스토리 꾸미기] - 티스토리 북클럽 스킨 I 상단 메뉴 삭제하기

티스토리 북클럽 스킨 I 상단 메뉴 삭제하기

---

마무리

☑

이렇게 간단하게 북클럽 스킨 상단 메뉴 고정에 대해 알아보았습니다. 블로그 관리에 접속하면 상단 메뉴가 고정되어 있는 것이 신기했고, 따라 해보고 싶은 마음에 검색을 해보니 많은 글이 올라와 있어 생각보다 쉽게 작업을 끝낼 수 있었습니다.

저는 상단 메뉴에 메뉴들이 없지만, 상단에 메뉴가 있는 블로그들은 고정된 메뉴를 통해 쉽게 이동이 가능하니, 방문자들의 체류 시간 증가와 이탈률 감소를 기대해볼 수 있을 것 같습니다.

여러분의 공감과 댓글은 큰 힘이 됩니다.✦ 가람과 함께하는 이야기 ✦