친절한효자손 취미생활

친효스킨의 본문 끝자락에 들어가는 관련글(참고글) 모듈 입니다. 벌써 마크5로서 다섯번째 버전입니다. 기본 스타일은 모두 같지만 마우스를 올리면 나타나는 CSS 애니메이션 효과들이 모듈마다 다릅니다. 본인이 원하는 모듈을 골라서 사용하면 됩니다. 먼저 관련글 모듈을 적용하는 방법에 대해서 숙지하시기 바랍니다. 본문에서는 CSS 파일과 간단한 설명만 언급하고 있습니다.



그리고 아래는 예시 입니다. 마우스를 올려 보시기 바랍니다. 스마트폰에서는 아마 확인이 잘 어려울 겁니다.



짧은 글의 제목이든, 아주 긴 글의 제목이든 상관 없이 애니메이션이 동작 됨을 알 수 있습니다. 친효스킨에 맞춰서 마찬가지로 모듈도 반응형으로 제작되었습니다. 따라서 다른 스킨에서도 사용 가능합니다.


CSS 세팅하기

아래의 파일을 받아서 스킨편집 > CSS 부분에 공백란을 만들고 붙여넣기를 해주시면 됩니다.


친효애드온 - 관련글 마크5 CSS.txt


HTML 사용방법

이전 글 넣기로 글을 불러와도 되고 수동으로 링크를 만들어도 상관 없습니다. 티스토리 글쓰기에서 HTML 모드로 전환 후 아래와 같이 div 로 수동으로 감싸주기만 하면 됩니다. 관련글 마크5 모듈은 클래스명이 rgyTextBox5 입니다.


<div class="rgyTextBox5">

    <p><a href="URL주소">글 제목</a></p>

    <p><a href="URL주소">글 제목</a></p>

</div>


이렇게 파란색 부분처럼 감싸주시면 됩니다. 본문 아래의 관련글에는 마크5 버전의 관련글 모듈이 적용되어 있습니다. 한 번 마우스를 올려보세요. 그러면 유용하게 사용해 주시기 바랍니다. 끝.





공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 와.. 진짜 대단하십니다. 하나하나 정독 중 인데 그저 감사합니다
    2020.04.30 10:17 신고
  2. 안녕하세요! 다른건 다 적용이 잘 되었는데 <span>글자</span>을 입력하니까 +버튼이랑 글자가 엇갈려서 보이는데 이유가 뭘까요?ㅠㅠ
    2020.08.13 12:39 신고
    • 안녕하세요, 문제의 글 주소를 남겨주시면 확인해보겠습니다.
      2020.08.13 13:25 신고
    • https://min-ji.tistory.com/87 맨 밑에 있습니다!
      2020.08.13 13:34 신고
    • 스킨편집의 CSS에 들어갑니다. 그리고 다음의 영역을 찾습니다.

      .rgyTextBox5 > span::before

      이 안에 있는 요소 중 vertical-align:text-buttom 이 있을거에요. text-buttom을 middle로 변경해주시면 됩니다. 세미콜론 조심해 주세요.
      2020.08.13 14:23 신고
    • 그렇게 하고 폰트 사이즈도 한 단계 키우니까 딱 됐어요ㅎㅎ 감사합니다!
      2020.08.13 14:30 신고