친효애드온 : TOP버튼 + 설명 말풍선 기능 (마크3)
예전에 올렸던 TOP버튼 마크2의 업그레이드 버전 입니다. 이번에는 마우스를 가져다 올리면 왼쪽에 해당 아이콘에 대한 설명 말풍선이 나타나는 기능입니다. 대단한 기능이 추가된건 아닙니다. 단지 말풍선이 한번 더 옆으로 팝업되는 기능이 추가되었을 뿐 입니다. 거추장스러운 디자인이 싫으신 분들은 그냥 마크2 버전을 사용하시면 되겠으며, 이번 버전이 마음에 드신다면 마크3를 적용하시기 바랍니다. 친효스킨 v1.14 이상에서는 마크3 버전으로 기본 적용되어 있습니다. 아래는 예시 입니다.
See the Pen 친효애드온 : TOP버튼 (마크3) by rgy0409 (@rgy0409) on CodePen.
아이콘에 마우스 포인터를 올려보시면 왼쪽으로 설명 말풍선이 나타나는것을 확인하실 수 있습니다.
적용 방법은 마크2에 제시된 방법과 거의 동일합니다. 아래의 마크2 페이지에서 적용 방법을 일부 확인하시고 직접 적용시켜보시기 바랍니다. HTML 세팅 - 카테고리 링크 추가 까지 진행하시고 나머지는 이곳 본문의 내용을 적용하시면 됩니다.
HTML 세팅 - 버튼 추가
스킨에 나타나는 버튼의 뼈대를 적용시키도록 하겠습니다. 아래의 첨부파일을 다운로드 하시고 모두 복사하시고 자신의 스킨의 HTML 내부에 있는 </s_t3> 위에 붙여넣기를 해주시면 됩니다.
친효애드온 - TOP버튼 마크3 HTML.txt
이렇게 붙여넣기 해주시면 됩니다.
CSS 세팅
마지막으로 스타일을 정의하는 CSS 세팅만 남았습니다. 아래의 첨부파일을 다운로드 받으시고 메모장 안의 모든 내용을 복사합니다.
그리고 이번에는 스킨의 CSS 편집으로 들어가셔서 적당히 빈 공간을 확보하고 그대로 붙여넣기 하신 후 저장 하시면 됩니다.
CSS 코딩 중 일부만 스크린샷 했습니다. 저 화살표 아래로 계속 이어져 있습니다. 그냥 참고만 하시기 바랍니다. 정상적으로 적용되면 현재 제 스킨의 오른쪽 하단처럼 버튼들이 나타나고 마우스를 올려보시면 말풍선이 출력됩니다. 모바일 해상도에서도 버튼을 터치하면 동일하게 출력됩니다. 끝.
"친절한효자손 취미생활" 을 검색!
