북클럽 스킨 상단 헤더(메뉴) 고정하기
티스토리 블로그 북클럽 스킨에서 상단 메뉴 고정 방법에 대해 포스팅한 많은 글이 있는데, 간단하게 구현하는 방법을 공유합니다.
수정 방법은 CSS에서 #header, #aside, #dimmed 세 부분만 수정하면 되는 간단한 작업입니다.
항상 그렇듯 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '상단 메뉴 고정하기'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다.
📌 알림
웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.
[📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]
1. 스킨 저장.
스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.
스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.
2. [Ctrl] + [F]를 사용할 때.
먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.
헤더(header) 고정하기
1. '블로그관리의 [꾸미기] > [스킨 편집] > [html 편집] > [CSS]'로 들어갑니다.
1. 헤더 수정 : #header
1) CSS 탭에서 [Chift] + [F]를 이용해 #header를 검색합니다.
#header {
2) #header { border-bottom: 1px solid #eee; } 코드를 /* .. */ 주석 으로 숨김 처리 후 아래 코드를 넣어줍니다.
/* 헤더고정 */
#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 축 상의 위치를 끌어올려주는 작업입니다.
#aside {
z-index: 1030; /* 400 */
3. 모바일 사이드바 탭을 띄울 때 어두워지는 부분 수정 : #dimmed
마지막으로 #dimmed부분의 'z-index'를 'z-index:1020'으로 바꾸어서 모바일에서 사이드바 탭을 띄웠을 때 상단메뉴도 같이 어두워지도록 Z 축을 조정해 줍니다.
즉, Z축을 1000보다 높은 숫자들로 조정하되, 숫자 크기가 #aside > #dimmed > #header 순으로 작아지게 조정하면 됩니다.
#dimmed {
z-index: 1020; /* 300 */
헤더의 서치 아이콘 사각형 배경색 둥글게 만들기
북클럽 스킨의 헤더를 고정하고 투명도를 조절하거나 색상을 변경하면 서치 아이콘의 배경색이 정사각형 형태임을 확인할 수 있습니다.
이제 이 정사각형의 모서리를 둥글게 만들어 원형으로 바꾸는 방법에 대해 알아보겠습니다.
서치 아이콘 배경색 둥글게 만들기
1) '블로그관리의 [꾸미기] > [스킨 편집] > [html 편집] > [CSS]' 탭으로 들어갑니다.
2) CSS 탭에서 [Chift] + [F]를 이용해 #header .util .search {를 검색합니다. 두개의 코드 중 첫 번째 코드입니다.
#header .util .search {
3) #header .util .search {태그 하단 }사이에 [Enter]를 이용해 한 칸을 띄어 준 후 아래의 코드를 복사 하여 넣어줍니다.
border-radius: 50px; /*서치 아이콘 배경색 라운드*/
4) 미리보기로 확인 후 [적용]을 눌러 '저장'합니다.
관련글
[▸ 티스토리 꾸미기] - 블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨
블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨
목차 블로그 상단의 '타이틀 로고' 크게 만들기 오늘은 아래 그림처럼 블로그 상단의 '타이틀 로고'를 기존의 크기보다 조금 더 크게 만드는 법에 대해서 알아보겠습니다. 로고 CSS코드 수정하기
galam.tistory.com
[▸ 티스토리 꾸미기] - 티스토리 북클럽 스킨 I 상단 메뉴 삭제하기
티스토리 북클럽 스킨 I 상단 메뉴 삭제하기
목차 티스토리 북클럽 스킨 I 상단 메뉴 삭제하기 티스토리 블로그 스킨들 중 북클럽 스킨이 제일 깔끔한 것 같습니다. 깔끔하기는 하지만 조금씩 맘에 안 드는 부분들도 있는데 그 부분을 수정
galam.tistory.com
마무리
이렇게 간단하게 북클럽 스킨 상단 메뉴 고정에 대해 알아보았습니다. 블로그 관리에 접속하면 상단 메뉴가 고정되어 있는 것이 신기했고, 따라 해보고 싶은 마음에 검색을 해보니 많은 글이 올라와 있어 생각보다 쉽게 작업을 끝낼 수 있었습니다.
저는 상단 메뉴에 메뉴들이 없지만, 상단에 메뉴가 있는 블로그들은 고정된 메뉴를 통해 쉽게 이동이 가능하니, 방문자들의 체류 시간 증가와 이탈률 감소를 기대해볼 수 있을 것 같습니다. 이상입니다!
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"
