친효애드온 : 본문 중간 수동 링크 (마크2) 모듈
본문 중간에 참고용으로 삽입하는 링크글에 대한 두번째 친효애드온을 만들었습니다. 기존 스타일은 밋밋해서 좀 더 색다른 변화를 주고 싶었습니다. 관련글 모듈과 살짝 비슷한 부분이 있는데, 그럼에도 불구하고 개인적으로 무척 만족스러운 모듈이라고 생각하고 있습니다. 먼저 아래의 예시를 살펴보도록 하겠습니다.
보통은 링크글을 한 개 정도 배치하지만, 만약 2개 이상의 그룹으로 배치하는 경우에도 가능합니다. 링크글 목록이 약간씩 떨어져 배치됩니다. 마우스를 올리면 왼쪽의 동그라미가 가로로 길어지는 애니메이션 효과를 연출했습니다. 그리고 동그라미 안쪽의 화살표 기호도 같이 따라가면서 사라집니다. 이런 애니메이션 효과를 가진 링크글 마크2 모듈 입니다.
링크 제목의 길이에 상관 없이 가로 100% 백그라운드가 채워집니다. 또한 본문의 가로 사이즈를 넘어가는 텍스트 제목의 경우에는 말줄임표가 생성됩니다. 즉 무조건 1줄의 제목으로만 출력이 됩니다. 2줄 이상으로 제목이 늘어나지 않습니다. 이제 설치 방법 입니다.
HTML 폰트어썸 CND 세팅
스킨편집 > HTML 로 가서 <head> 안에 아래의 CND 주소를 입력 합니다.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">아래에 텍스트파일을 첨부했습니다. 다운로드 후 열어서 복사 후 사용하시면 됩니다.
CSS 세팅
위의 첨부파일에는 CSS 관련 소스도 들어 있습니다. 스킨편집 > CSS 로 가셔서 빈 공간을 확보 후 모두 붙여넣기를 합니다.
사용 방법
먼저 본문에 이전 글 넣기 기능으로 관련글을 링크하거나, 수동으로 텍스트에 링크를 생성합니다. 그리고 해당 태그를 모두 div 태그로 감싸고, div 클래스명을 rgyLink2 로 만들어주면 됩니다. 위의 예시에 사용된 링크글의 HTML 상태는 다음과 같습니다.
<div class="rgyLink2">
<p><a href="#">이것은 짧은 제목의 링크글</a></p>
<p><a href="#">이것은 그래도 제법 중간 사이즈의 제목을 가진 링크글</a></p>
<p><a href="#">이것은 지금까지 여러분들께서 듣도 보도 못한 길이의 제목을 자랑하는 매우 긴 텍스트로 이루어진 장문의 링크글</a></p>
</div>이렇게 <div class="rgyLink2">링크글</div> 로 둘러싸여 있다는 것을 확인할 수 있습니다. 이 마크2 버전의 본문 중간 수동 링크 모듈을 적절하게 사용한다면 블로그 체류시간을 꽤 향상시킬 수 있을 것으로 기대합니다. 너무 과도한 사용은 오히려 독 입니다. 그러므로 적시적소에 알맞게 사용해 주시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
