친효애드온 사용 방법
오늘 확인해보니 친효애드온에 대한 사용 방법을 따로 글로 작성하지는 않았다는걸 확인했습니다. 매번 사용 방법에 대해 언급하기가 대단히 귀찮기 때문에 아예 이렇게 공식적으로 문서화를 해두면 저도 편하고 사용하시는 분들도 일괄적으로 배울 수 있으니까 일석이조라는 생각이 들었습니다. 거두절미하고 바로 시작하겠습니다.
친효애드온이란?
스타크래프트 테란 종족에 있는 Add-On(애드온)에서 힌트를 얻어서 개발되었습니다. 해당 건물의 특수 기능들을 사용할 수 있게 도와주는 애드온은 매우 유용한 기능이죠. 친효애드온 또한 친효스킨을 좀 더 개성있게 꾸밀 수 있는 일종의 부가서비스 같은 개념 입니다. 굳이 사용하지 않아도 상관 없지만 가독성이나 개성 부분을 좀 더 살리고 싶을 때 종종 이용하는 기능 입니다. 쉽게 말해서 그냥 CSS 스타일 꾸러미 입니다.
다른 스킨에서는 사용 불가능한가요?
아닙니다. 다른 반응형 스킨에서도 사용 가능하도록 설계되었습니다. 다만 다른 스킨에서는 오작동 할 수 있는 부분이 있습니다. 왜냐하면 해당 스킨의 CSS 선택자가 친효애드온의 선택자와 중복되는 경우가 발생할 수 있기 때문입니다. 이 문제는 번거롭지만 크롬 개발자도구를 통해서 선택자를 살펴본 후 문제를 해결해야 합니다. 친효애드온은 친효스킨을 기준으로 개발되기 때문에 이 부분은 어쩔 수 없습니다. 모든 스킨을 다 사용하면서 테스트 할 수 없기 때문이지요. 따라서 가장 좋은 방법은 친효스킨을 사용하는 것 입니다아~! (간단명료!)
친효애드온 구조
친효애드온은 대체로 어떤 링크에 대한 스타일을 꾸며주는 역할이 대부분 입니다. 이 부분은 <div> 태그를 사용해서 감싸주면 됩니다. 그 다음에는 해당 div에 class(클래스)명을 부여해주기만 하면 됩니다. 매우 간단하죠? 예를 들어서 이전 글 넣기 플러그인 기능을 통해서 본문과 관련된 어떤 글을 삽입했다고 가정하겠습니다.
<div class="rgyLink6">
<p><a href="#" target="_blank" rel="noopener">본문과 관련된 글</a></p> <!--신형 글쓰기-->
<p><a href="#" target="_blank" class="tx-link">본문과 관련된 글</a></p> <!--구형 글쓰기-->
</div>이 링크를 HTML 모드에서 살펴보면 다음과 같습니다. 참고로 신형 글쓰기 에디터에서의 이전 글 넣기와 구형 글쓰기 에디터의 이전 글 넣기는 약간의 차이가 있습니다. 대단한 차이는 아니므로 그냥 차이가 있다는 것만 알고 계시면 좋겠습니다.
지금 <p>태그로 감싸여진 부분이 바로 이전 글 넣기로 들어간 태그이며, 이 <p>태그를 수동으로 감싸준 <div class="rgyLink6"> (중략) </div> 가 바로 친효애드온을 적용시키기 위한 태그 입니다. 수동으로 감싸주는 것 입니다. 수동으로 적용시켜야 한다는게 조금 번거롭긴 합니다만... 감내하고 사용해야 합니다. 어쩔 수 없는 부분 입니다. 여기에서 rgyLink6가 바로 클래스명 입니다. 친효애드온은 이 클래스명이 핵심이라고 할 수 있습니다.
플러그인 - 이전 글 넣기 활성화
아직 이전 글 넣기 플러그인을 사용하지 않는 상태라면 꼭 활성화 해주세요. 정말 요긴하게 자주 사용하는 플러그인 중 하나 입니다.
티스토리 관리자 화면에서 플러그인으로 들어갑니다.
여러 플러그인 중 이전 발행 글 링크 삽입이라고 하는 플러그인을 찾아서 선택합니다.
이전 발행 글 링크 삽입 플러그인에서 설정해야 하는 부분이 딱 한 곳 있습니다. 현재 저는 제목으로 세팅되어 있습니다. 즉 링크글을 넣을 때 글 제목만 삽입되게 하는 겁니다. 기본 형태는 "발행일 - 카테고리 - 제목" 입니다. 그런데 우리가 티스토리를 운영하다보면 다년간 운영할 것이고, 카테고리명도 변경이 될 수 있지 않겠습니까? 그렇기에 발행일과 카테고리명은 상당히 불필요하다고 생각됩니다. 또한 이렇게 기본형태로 두면 링크글 제목이 엄청 길어집니다. 그러면 가독성이 떨어지므로 그냥 제목만 출력되게 만들어 주었습니다. 제목으로 수정 후 적용 버튼을 눌러주면 끝 입니다.
CDN 세팅하기
친효애드온은 폰트어썸 아이콘을 사용하기도 합니다. 따라서 관련 CDN 주소를 스킨의 <head> 안쪽에 마크업 해둬야 합니다. 관련 링크는 다음과 같습니다.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">아래 메모장에도 이 링크가 들어있으니 첨부파일을 다운받아서 사용하시면 됩니다.
CSS 세팅하기
친효애드온 관련 모든 글에는 CSS 세팅이 있습니다. CSS가 스타일시트라고 생각하시면 됩니다. 쉽게 이야기하자면 옷장인 샘 입니다. 빨간색 옷만 들어있는 옷장이 하나 있다면 여기에서 꺼내 입을 수 있는 옷은 빨간옷 딱 한 벌 뿐일 겁니다. 하지만 파란색 옷장, 초록색 옷장을 새로 장만하면 선택의 폭이 무려 3배나 커집니다. 그렇죠? CSS는 이런 옷장 꾸러미라고 이해하시면 됩니다. 옷장 이름이 바로 rgyLink6 같은 클래스명 이구요. 따라서 자신이 사용하는 스킨의 CSS에 친효애드온 CSS 코드를 삽입해야 합니다.
먼저 적용시키고자 하는 친효애드온의 CSS 코드가 담긴 첨부파일을 다운로드 받습니다. 그리고 메모장 파일을 열어보시면 CSS 태그 코드들이 저장되어 있을 겁니다. 전체를 선택해 복사합니다.
이제 자신의 티스토리 관리자 화면으로 접속합니다. 왼쪽의 카테고리에 있는 꾸미기 > 스킨편집으로 들어갑니다.
스킨편집창이 새롭게 열렸습니다. 오른쪽 상단에 보시면 HTML 편집 버튼이 보일겁니다. 눌러주세요.
여기에서 CSS 탭으로 들어갑니다. 그러면 아래쪽에 수 많은 CSS 스타일 코드들이 저장되어 있음을 확인할 수 있을 겁니다. 이제 이곳에 빈 공간을 확보해 그대로 붙여넣기를 진행하면 됩니다.
빈공간이라 함은 화살표로 표시된 부분입니다. 다른 CSS 태그에 영향을 받지 않는 공간을 말합니다. 이곳에 적용시킬 친효애드온 CSS 코드를 그대로 붙여넣기를 하면 됩니다. 이미 기존에 있는 스킨의 CSS 코드 중 어디에 넣어야 하는지 햇갈리실 수 있는데 CSS는 순서에 크게 영향을 받지 않습니다. 따라서 그냥 적당히 빈 공간이 보인다면 그대로 붙여넣기 하시면 됩니다. 처음 부분에 하셔도 되고 맨 아래에 하셔도 되며 중간에 붙여넣기 하셔도 됩니다.
참고로 이렇게 코드 안쪽에 또 추가로 삽입하시면 절대 안 됩니다. 그러면 사용중인 스킨 오류가 생겨서 정상적으로 사용이 불가능하게 됩니다. 빈 공간을 확보하시어 삽입하면 됩니다.
만약 현재 사용중인 스킨이 이렇게 빈 공간이 없고 다닥 다닥 붙어있는 경우라면 어떻게 하면 좋을까요? 간단합니다. 빈 공간을 강제로 만들어주면 됩니다.
이렇게 말입니다. 엔터키를 사용하시면 됩니다. 중요한건 {} 괄호 안에 넣지만 않으면 된다는 것 입니다. 다시 한 번 요약해서 설명하자면 다음과 같습니다.
선택자 { 스타일 코드 }
이 구조 안쪽외에 다른 바깥에서 영역을 확보해 CSS 코드를 삽입하시면 되시겠습니다.
이전 글 넣기 활용하기
아까 플러그인 중 이전 글 넣기 기능을 활성화 했으니 이제 사용 방법에 대해 알아봅시다. 현재 본문과 관련 있다고 생각되는 과거의 글을 불러와 봅시다.
보시는 것 처럼 글쓰기 에디터의 버전에 따라 이전 글 넣기 위치가 조금 다릅니다. 신형 에디터는 맨 위에 메뉴 버튼을 눌러서 플러그인에 있는 이전 글 넣기로 진입해야 합니다. 구형 에디터는 오른쪽의 플러그인을 눌러보시면 이전 글 넣기 기능이 보일겁니다.
이전 글 넣기를 실행한 모습 입니다. 이런 창이 하나 새롭게 열리는데 원하는 글을 검색 기능을 통해 바로 찾을 수 있어서 편리합니다. 현재 본인의 티스토리에 작성된 모든 문서들이 나열되어 있으니 아마 찾는건 쉬울 겁니다. 그냥 클릭만 하면 본문에 자동 삽입 됩니다. 삽입되는 위치는 현재 커서가 활성화 되어 있는 곳 입니다.
HTML 적용하기
이제 CSS 코드도 세팅했고 이전 글 넣기로 관련글도 본문에 넣어놨으니 남은건 친효애드온을 사용하는 일만 남았습니다. 새로운 옷장을 추가했으니 이제 꺼내 입기만 하면 되는 것 입니다. 위에서 구조 설명할 때 말씀 드렸죠? 옷장이 클래스명이므로 해당 클래스명의 옷장 이름만 불러와주면 됩니다. 일단 아래에 예시로 사용할 관련글을 넣어놓겠습니다.
현재 친효애드온 스타일을 적용하지 않은 기본 형태로 본문에 관련글이 들어간 상태 입니다. 이제 HTML 모드로 전환해서 태그 상태를 살펴봅시다.
참고로 HTML 모드로 전환하는 위치는 두 개의 에디터가 차이가 있습니다. 위의 이미지를 참고하시어 적용해 보시기 바랍니다. HTML 모드 전환 후 태그 상태를 살펴보겠습니다.
<p><a href="https://rgy0409.tistory.com/3119" target="_blank" rel="noopener">친효스킨 다운로드 / 사용법 / 업데이트 일지</a></p>현재 이 위치네요. 처음에 태그 위치를 찾는게 조금 어려울 수 있습니다. 하지만 크롬의 검색 기능을 사용하면 쉽습니다.
HTML 모드 전환 후 크롬에서 Ctrl + F를 누르면 이렇게 검색창이 활성화 됩니다. 그리고 방금 이전 글 넣기로 넣은 글 제목을 키워드로 검색합니다. 1번이 검색할 키워드이며 2번은 해당 키워드의 결과가 모두 몇 개 인지를 나타내주는 숫자 입니다. 그리고 3번은 빠른 이동이 가능한 버튼 입니다. 3번을 통해 이동하면 방금 삽입한 링크를 쉽게 찾을 수 있습니다.
그래서 이렇게 편리하게 해당 위치를 찾을 수 있습니다. 이제 수동으로 div 태그를 활용해 감싸줌과 동시에 클래스명을 부여하면 됩니다.
<div class="rgyLink6">
<p><a href="https://rgy0409.tistory.com/3119" target="_blank" rel="noopener">친효스킨 다운로드 / 사용법 / 업데이트 일지</a></p>
</div>이렇게 div 태그로 감싸주고, 해당 div에 class(클래스)명을 부여했습니다. 이 클래스명은 친효애드온마다 각자 다르므로 적절한 스타일로 적용해 보시기 바랍니다. 친효애드온 카테고리에 들어가 보시면 종류별로 다 다르므로 하나 하나 확인해 보시기 바랍니다. 위의 예시는 본문 중간 수동링크 마크6 입니다. 아래는 최종적으로 적용된 모습 입니다.
이렇게해서 정상적으로 친효애드온이 적용되었습니다. 대체로 이렇게 div와 클래스명 조합으로 친효애드온을 조합하는 방식 입니다. 때때로는 그냥 메모장에 기본 형태를 저장해두고, 해당 태그를 텍스트만 바꿔서 통째로 사용하는 방식도 있는데 이건 특수한 경우이므로 방법을 생략했습니다. 이와 비슷한 방법의 친효애드온을 만들면 해당 페이지에서 모든 사용 방법을 설명하므로 그건 그때그때 방법을 살펴보시면 되시겠습니다. 끝.
