WHATEVER 스킨으로 교체한지 얼마 되지 않았는데, 다른 분들이 사용하시는 스킨을 구경하다 보니 마음에 드는 스킨이 참 많네요. 그중에서 "고래의 개인노트" 운영자님이 무료 배포 중이신 스킨이 딱 마음에 들었어요.
스킨 수정 작업하느라 애를 많이 먹었는데 또 바꿔야 하나 고민을 좀 했습니다. 하지만 모바일 버전에서는 WHATEVER 스킨이 조금 더 마음에 들어서, 우선은 그대로 가는 걸로 결정했습니다.
이번 시간에는 상단바(상단 메뉴바, 헤더, HEADER) 고정하는 방법에 대해서 알아볼 텐데요. 본문 글을 다 읽은 후 메뉴를 클릭하기 위해 상단으로 다시 올라가야 하는 것은 참 불편한 일이죠. 헤더를 고정하거나 아니면 본문 맨 아래에 위로 가는 화살표 버튼을 생성해줄 필요가 있겠습니다.
우선, 처음 스킨을 입히셨다면 상단 메뉴바에 카테고리가 없어서 당황하셨겠죠. 블로그 관리 홈 > 꾸미기 > 메뉴 에서 메뉴 추가로 카테고리를 하나하나 불러올 수 있는데요. 처음에 그렇게 상단바를 꾸몄다가 카테고리 글 숫자도 나오지 않고 해서, 다시 수정했습니다.
카테고리 만드는 방법은 원더바웃님의 블로그 "티스토리 whatever 스킨 카테고리 메뉴 넣기" 포스팅을 참고했습니다.
위 화면과 같이 수정을 해줍니다. 위에 복사해서 쓸 수 있는 파일을 첨부했습니다. 복사(Ctrl+C) 해서 붙여 넣고(Ctrl+V) 적용 눌러주세요. 계속 수정이 필요하니 창은 닫지 않고 놔두시면 됩니다.
저는 헤더 높이를 조금 줄이기 위해서 height: 70px; 을 삽입했는데, 그 부분을 삭제하시면 원래 헤더 높이로 사용할 수 있습니다. 헤더 아래쪽 라인 border-bottom: 2px로 수정했는데, 원하시는 라인 두께와 색상으로 변경하시면 되겠습니다.
처음에 position만 fixed로 수정하고 고정이 되는지 확인했었는데요. 고정이 되긴 되는데 헤더의 바탕색이 투명하고, 스크롤을 내렸을 때 이미지 뒤로 글자가 다 넘어가더군요. 그래서 백그라운드 컬러를 흰색으로 넣어주었고요. (원하는 색상 값을 넣으시면 됩니다)
상단바가 이미지 뒤로 넘어가지 않게 최상단으로 빼주기 위해서 z-index: 999;를 넣었습니다. 처음에는 값을 100을 넣었는데요. PC에서는 문제가 없었는데, 모바일에서 메뉴를 클릭 후 카테고리 창이 뜨긴 뜨는데 비활성화가 되어서 클릭할 수가 없더라고요. 이 부분에서 멘붕이 왔습니다.
왜 안 되는지 원인을 몰라서 혼자 오랜 시간 머리를 쥐어뜯으며, 방법을 찾아다녔어요. 결국 모바일 오류 때문에 헤더 고정을 포기해야 하나 고민하다가, 결국 방법을 찾게 되었습니다. 바로 저 z-index 값 때문이었습니다. 모바일에 들어가는 z-index 값 중에 100보다 큰 610이 있어서 카테고리 창이 뒤로 깔려버렸던 거죠.
값을 999로 수정해주니 바로 해결이 되었습니다. 알고 보니 이렇게 간단한 문제를 말이죠!! ^^;;; 헤더 높이를 저처럼 70px로 수정하셨다면, 블로그 네임과 카테고리 위아래 여백이 맞지 않을 거예요. 이 부분을 수정해 주겠습니다.
먼저 블로그 네임 위치를 수정할게요. 약 96번째 줄에 있는 #header h1을 찾습니다. 스킨마다 수정한 부분이 다르기 때문에 줄 위치는 다를 수 있습니다. padding: 20px로 수정했습니다.
카테고리 위치를 수정하기 위해서, 맨 아래쪽에 삽입한 카테고리 코드로 갑니다. 약 2849번째 줄에 #gnb ul li 에서 padding: 20px로 수정하고 적용 클릭합니다.
값을 수정하면서 결과를 체크해보면 위치가 어떻게 움직이는지 보이실 거예요. 원하는 위치로 잡으시면 되겠습니다. PC, 모바일에서 같이 움직이는 부분이 있고, 따로 만져줘야 하는 부분이 있는데요. PC에서 헤더 높이를 줄이고 나니, 모바일에서는 헤더 높이가 더 높아졌어요. 이 부분을 수정하겠습니다.
찾기로 Media Screen - Mobie를 검색합니다. 모바일 상단바 높이를 조금 줄이기 위해 #header에 height: 50px; 을 삽입해줬습니다. 블로그 네임 위아래 여백은 #header h1에서 line-height: 10px로 수정했고요. 저 같은 경우는 세 줄 메뉴 버튼이 화면에서 잘려서, #header .mobile-menu에서 right: 10;으로 수정했습니다.
모바일 환경에 따라 차이가 있을 수 있으니, 값은 적당하게 조절하시면 되겠습니다. PC와 모바일에서 헤더를 고정시키고, 헤더 높이 수정, 블로그 네임, 카테고리 위치 잡는 것까지 마무리가 되었습니다. 이렇게 상단바를 고정시켰으니 커버와 본문 등의 위치를 그만큼 아래로 내려주는 작업이 필요합니다.
그 설명과 함께 부가적으로 필요한 수정은 다음 시간에 이어서 살펴보도록 할게요. 시행착오를 겪으며 여기저기 수정을 워낙 많이 하고 체크를 다 해놓지 못해서, 설명이 부족한 부분이 있을지도 모르겠습니다. 궁금하신 점 있으시면 댓글 남겨주세요~
댓글