티스토리 Poster 스킨 꾸미기 2 (사이드 메뉴 버튼 고정)

앞서서 고정된 이미지를 각각 왼쪽과 오른쪽에 하나씩 추가하는 내용을 다뤄봤습니다.

2019/02/19 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 1-1 (고정 배경 이미지 넣기)

2019/02/20 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 1-2 (고정 배경 이미지 추가)

이번에는 가장 아쉬웠던 헤더 부분의 메뉴 버튼을 고정하는 과정을 정리해보겠습니다.

비슷한 방법이지만 이번에는 웹에서 테스트 후 실제 코드를 바꾸는 과정까지 같이 포함시켜 봅니다.

주의!!! 실수로 코드가 꼬일수도 있으므로 태그 작업 전에 항상 백업부터 해두시길 권합니다.

* * *   * * *

 크롬 브라우저에서 태그 확인 및 변경 테스트 후 티스토리 코드 수정하기

지금 소개해드릴 방법은 IE에서도 비슷한 방식으로 사용할 수 있지만 개인적으로는 크롬 브라우저를 추천합니다.

굳이 Poster 스킨이 아니더라도 다른 스킨을 대상으로 작업할 때도 적용 가능합니다.

1) 변경 대상의 클래스 또는 ID 확인

크롬 브라우저에서 F12 키를 눌러주면 개발자 도구를 호출 할 수 있습니다.

새로운 창 또는 지정된 영역에 호출되는데요.

실제로 웹 관련 작업을 할 때 아주 유용하게 사용할 수 있는 툴입니다.

<개발자 도구 실행 화면>

개발자 도구에서 클릭모양의 버튼(셀렉트버튼)을 눌러주면 파랗게 색이 변합니다.

이 상태에서 마우스를 사이드 메뉴 호출 버튼에 가져다 대면 음영처리되면서 요소 명이 출력 됩니다.

button.mobile-menu라고 뜬게 보이죠? 

이를 클릭하면 개발자 도구 상에서 해당 요소의 소스코드를 확인할 수 있습니다.

<button type="button" class="mobile-menu"><span>메뉴</span></button>

자신이 찾고자 하는 요소의 정보를 이런식으로 확인 가능합니다.

2) Style 변경 테스트

<button type="button" class="mobile-menu"><span>메뉴</span></button> 요 위치에서 마우스로 한번 클릭해주면 화면 하단에 

CSS 정보가 출력됩니다.

이번에 추가주고자 하는 효과는 앞서의 포스팅과 마찬가지로 화면에 고정하는 효과입니다. 

positon: absolute; 에서 absolute를 클릭하면 파랗게 선택영역이 발생하면서 수정이 가능합니다.

여기에 fixed를 적어주고 엔터 또는 마우스로 다른 공간을 클릭하면 수정이 됩니다.

(참고! 개발자 도구 상에서 하는 변경은 일회성 테스트일 뿐 실제 반영은 안되니 부담갖지 마시고 여러가지 테스트를 해보는 것도 괜찮은 방법입니다.)

사진과 같이 position: fixed;로 수정이 되었다면 티스토리 화면 영역을 클릭 후 휠을 움직여 보세요.

화면에 떠서 잘 고정되어 있다면 정상적으로 반영되었다는 뜻입니다.

3) 티스토리 CSS 코드 수정

본격적으로 CSS 수정하기에 앞서 한가지 더 기술하자면,

지금 수정하고자 하는 요소가 실제로 동작하는 영역이 맞는지 확인하는 또 다른 방법이 있습니다.

바로 티스토리 페이지에서 호출하는 script.js라는 파일을 직접 확인하는 것입니다.

꾸미기 - 스킨편집 - HTML편집 - 파일업로드 에서 확인할 수 있는데요. 

script.js라는 파일에서 우클릭 후 링크주소를 복사해 웹에서 바로 확인이 가능합니다.

<script.js에 작성되어 있는 클릭시 동작 명령>

앞서 확인했던 요소 이름 mobile-menu가 실제로 동작하는게 맞는지 확인만 해보면, 

"click", ".mobile-menu"이라고 적혀있는게 바로 보입니다.

클릭 했을 때의 조건이 모두 들어가 있네요. 

스크립트 파일까지 건드리면 스킨자체를 뜯어고치는 거나 다름없어서 확인만 하고 다음단계로 넘어가겠습니다. 

(지금 단계에서는 굳이 스크립트까지 건드릴 필요는 없기도 하고요.)

꾸미기 - 스킨편집 - HTML편집 - CSS 로 이동해서 mobile-menu를 검색합니다.

동일한 단어형태가 여러번 반복되는게 보일텐데 가장 위의 .mobile-menu로 끝나는 134행(제 기준)의 position값을 absolute 에서 fixed로 수정해줍니다.

(뒤에 표기된 단어는 .mobile-menu와 관련있는 다른 요소라고 생각하면 됩니다.)

이번에는 별거 없습니다. 

크롬 브라우저에서 했다시피 저 명령만 바꿔주면 됩니다. 

그리고 마찬가지로 미리보기에서 새로고침 후 정상동작하는지 확인 후 저장하시면 끝입니다.

4) 정리

원래는 메뉴 버튼 뿐만 아니라 검색 버튼과 홈페이지 명이 모두 포함되어 있는 헤더 영역을 fixed로 바꿔볼 생각이었는데요.

테스트하다 보니 모달 영역(음영 처리 부분)이 말썽이라 스크립트까지 수정했었습니다.

하지만 동작 테스트를 해보니 클릭 이벤트가 어쩔 때는 되다가 어쩔 때는 안되다가 해서...(이건 순전히 제 실력 문제겠지만요.)

또 나중에 판올림하게되면 다시 건드려야할지도 몰라서 등등의 이유를 붙여서!

'굳이 스크립트까지 건드리지는 말자. 그냥 깔끔하게 가자!'라는 합리화를 통해 메뉴 버튼만 고정하는 걸로 마무리 지어버렸습니다. ^^;

다음에 또 무언가 고치게 된다면 다시 포스팅 할게요.