친효애드온 : 티스토리 본문 중간 수동 링크 (마크10)
안녕하세요. 친절한효자손입니다. 진짜 오랜만에 본문 중간 링크 스타일을 만들어 보았습니다. 그동안 게을렀던 자신을 탓하고 반성하며 이따금씩 이런 스타일들을 틈나는대로 만들어 보기로 다짐합니다. 완성된 모습은 다음과 같습니다. 아래의 버튼에 마우스를 올려보세요.
See the Pen 친효애드온 : 본문 링크 (마크10) by rgy0409 (@rgy0409) on CodePen.
기본적으로 짙은 회색 박스안에 텍스트가 들어있는 형태의 링크 버튼입니다. 이 링크 버튼은 문단 사이에 있는 특정 단어에 링크를 걸 때는 사용하기가 부적합합니다. 상/하/좌/우로 기본 패딩값이 무려 20px이나 적용되기 때문입니다. 따로 링크 텍스트를 만들 때 적합합니다. 그러면 세팅부터 사용 방법까지 알아보겠습니다. 먼저 아래의 파일을 다운로드 받아주시기 바랍니다.
텍스트 문서에는 CSS 코드들이 들어있습니다.
CSS 세팅
위의 텍스트문서에 들어있는 CSS 코드를 모두 복사 후 자신의 티스토리 스킨 CSS 빈 공간에 붙여넣기 합니다. 위치를 잘 모르시겠다면 CSS의 가장 아래쪽에 붙여넣기를 하시면 됩니다. 그리고 저장합니다. 이렇게하면 세팅은 모두 끝납니다. 매우 간단하죠?
HTML 사용 방법
이제 HTML를 사용하는 방법입니다. 이 방법은 이미 자세히 글로 작성한 바 있으니 아래의 글을 참고하시기 바랍니다.
위의 참고글에서 보셨듯 div로 감싸주기만 하면 됩니다. 그럼 본 페이지에서 바로 예시로 사용해 보겠습니다. 아래에 텍스트로 링크를 만들겠습니다.
해당 텍스트에는 제 티스토리 URL 주소를 넣었습니다. 그러면 현재 친효스킨의 기본 링크 스타일이 적용되어 있는 상태가 됩니다.
<p><a href="https://rgy0409.tistory.com/" target="_blank" rel="noopener">친절한효자손 티스토리 바로가기</a></p>HTML 상태는 이렇게 적용되어 있을겁니다. 글쓰기에서 오른쪽 상단에 있는 기본모드를 HTML모드로 변경하면 태그 상태를 확인할 수 있습니다. 이제 이 태그를 rgyLink10이라는 클래스명을 가진 div로 감싸줍니다.
<div class="rgyLink10">
<p><a href="https://rgy0409.tistory.com/" target="_blank" rel="noopener">친절한효자손 티스토리 바로가기</a></p>
</div>이렇게 감싸주면 되겠습니다. 그 결과가 아래의 버튼입니다.
어떤가요? 잘 적용이 되었죠? 현재 친효스킨 사용자가 본 애드온을 사용한다면 친효스킨의 링크 기본 스타일이 적용되었기 때문에 텍스트의 색상이 친효스킨에서 정의하는 색상으로 들어가게 됩니다. 또한 텍스트 앞에 링크 아이콘이 들어갈 겁니다. 그럴땐 다음과 같이 수정을 해줍니다.
친효스킨 사용자 추가 설정
<div class="rgyLink10">
<p data-ke-size="size16"><a href="https://rgy0409.tistory.com/" target="_blank" rel="noopener" style="color: #fff !important;">친절한효자손 티스토리 바로가기</a></p>
</div>보시면 a태그 안쪽에 style을 추가해 주었습니다. 텍스트 색상을 흰색으로 강제 적용시키는 옵션입니다. 그리고 CSS에 다음의 코드를 추가해줍니다.
.rgyLink10 p a::before {
display: none !important;
}링크 아이콘을 없애는 CSS코드입니다. 이렇게하면 완벽하게 적용될 것입니다. 끝.
