친효스킨 TOP버튼 세트 크기(사이즈) 변경하는 방법

현재 사용중인 모니터가 4K여서 지금의 친효스킨 TOP버튼 세트 버튼의 크기가 딱히 문제가 되지는 않았습니다. 하지만 해상도가 FHD 이하급으로 내려가면 버튼 사이즈가 꽤 크다는것을 직감했습니다. 특히 티스토리에서 기본 제공하는 구독 버튼과의 겹침이 있어서 이 부분을 수정해야겠다고 생각했습니다. 내년 초 쯤 배포할 친효스킨 2.5 버전에서는 이와 관련된 항목이 스킨 옵션에 제공됩니다. 허나 그때까지 못 기다리시는 분들을 위해서 수동으로 변경하는 방법을 안내해 드리겠습니다.

CSS 수정

먼저 아래의 첨부파일을 다운로드 받습니다.

친효스킨 TOP버튼 세트 크기 변경 CSS.txt

0.00MB

다운로드 완료 후 열람해 보시면 CSS 코드가 두 개 들어있음을 확인할 수 있습니다. 각 코드별 사용 위치가 다르니 잘 따라해 주시기 바랍니다. 먼저 친효스킨의 CSS에서 "top버튼" 이라고 검색합니다.

그러면 주석 처리된 TOP버튼 시작이라는 부분이 가장 첫 번째로 검색이 될 것입니다. 이 주석 바로 아래에 빈 공간을 만듭니다. 그리고 첨부파일에 있는 첫번째 코드를 삽입합니다.

#topBtn {
    transform-origin: bottom right;
}

이 부분이죠. 이걸 사용합니다. 이 코드는 기준 축을 설정하는 코드입니다. 즉 TOP버튼의 기준축이 오른쪽 하단이 됩니다. 해당 포인트를 중심으로 크기가 변경됩니다.

이렇게 삽입하면 됩니다. 그리고 조금 더 아래로 내려가보시면 다음의 위치를 찾을 수 있습니다.

@media (min-width: 1000px) 부분을 찾습니다. 조금만 내려오면 금방 찾을 수 있을겁니다. 해당 코드 바로 아래에 두번째 첨부파일의 코드를 붙여넣기 합니다.

#topBtn {
    transform: scale(1) !important;
}

이 코드입니다. 이 코드가 크기를 정의하는 코드입니다. scale 괄호 안의 숫자를 변경해 보시기 바랍니다. 1은 1배라는 의미입니다. 즉 1이 기본크기이고 1보다 작은 소수값을 입력하면 크기가 작아지게 됩니다. 0.1씩만 줄여도 크기 변화가 확 체감되므로 본인이 마음에 드는 적당한 값을 입력 후 저장하시면 됩니다. 참고로 소수점 둘째짜리까지도 입력 가능합니다. 예를 들어서 0.87 이런식입니다.