친효스킨 : TOP 버튼 모바일에서 숨기는 방법

현재 친효스킨에는 PC 해상도를 기준으로 스크롤을 조금 내리면 오른쪽 하단에 TOP버튼 외 3개의 버튼이 나타나도록 설계가 되어 있습니다. 이 버튼은 모바일 해상도에서는 크기가 약 30% 작아집니다. 하지만 모바일에서 볼 때 다소 눈에 거슬리시는 분들도 계실 수 있습니다. 따라서 모바일 해상도에서는 아예 보이지 않도록 설정하는 방법에 대해 알아보겠습니다. 먼저 친효스킨의 CSS에서 아래의 부분을 검색합니다. "TOP버튼" 이라고 찾으면 됩니다.

 

/* 친효애드온 : TOP버튼 시작 */
#topBtn {
    display: none;
    position: fixed;
    right: 0;
    bottom: 80px;
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
}

이 부분 입니다. 현재 모바일 (스마트폰) 해상도를 기준에 맞춰진 영역입니다. 여기 보시면 transform: scale(0.7); 이라고 되어 있는걸 확인할 수 있습니다. 0.7은 70%의 scale (크기) 라는 의미를 가지고 있습니다. 즉 모바일 해상도에서 보이지 않게 하려면 70%가 아닌 0%로 만들면 되겠죠. 따라서 0.7 대신 0을 입력하면 해결 됩니다. 한곳만 변경하지 말고 두 곳 모두 변경해줘야 합니다.

 

transform: scale(0);
-webkit-transform: scale(0);

 

즉 이렇게 변경해 주시면 스마트폰으로 접속했을 때는 TOP버튼 모듈이 보이지 않게 될 겁니다. 끝.

 

 

이 글도 읽어보세요

친효컬럼 : 하루 일기 쓰는 습관을 블로그로 실천해 보세요

친효컬럼 : 키보드 워리어가 되지 말자

 

"친절한효자손 취미생활" 을 검색!