친효애드온! 본문 중간 수동 링크 모듈 (마크6)

스타일들이 통일감은 전혀 없지만 그냥 만들고 싶은대로 만드는 중 입니다. 이 중에서 마음에 드는 스타일을 골라 사용하시면 됩니다. 이번에도 본문 중간에 삽입하는 링크용 스타일을 연출해 보았습니다. 여섯번째 버전 입니다. 먼저 적용 예시 입니다.

 

짧은 제목의 링크 글

중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글

이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글

 

이런 스타일 입니다. 마우스를 올리면 색상이 변하면서 흔들거리는 애니메이션을 추가했습니다.

 

CSS 세팅

먼저 아래의 첨부파일을 다운로드 받습니다. 그리고 파일을 열어줍니다.

 

친효애드온 - 본문 중간 링크 모듈 (마크6).txt

0.00MB

 

텍스트 파일 문서 안에는 다음의 CSS 코드들이 들어 있습니다.

 

/* 친효애드온 : 본문 중간 수동 링크 (마크6) 시작*/
.rgyLink6 {
    margin: 5px 10px;
}

.rgyLink6 > p > a {
    display: block;
    margin: 5px 0;
    padding: 7px 10px;
    font-family: "NanumGothic", sans-serif;
    color: #1D67B1;
    transition: all 0.2s;
}

.rgyLink6 > p > a::before {
    content:"\f069";
    font-family: "FontAwesome";
    margin-right: 7px;
}

.rgyLink6 > p > a:hover {
    color: #555;
    animation: rgy01 1s forwards;
}

@keyframes rgy01 {
    0% {
        transform: none;
    }
    
    10% {
        transform: translateY(-7px);
    }
    
    20% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-5px);
    }
    
    40% {
        transform: translateY(0px);
    }
    
    50% {
        transform: translateY(-2px);
    }
    
    60% {
        transform: translateY(0px);
    }
    
    100% {
        transform: none;
    }
}
/* 본문 중간 수동 링크 (마크6) 끝 */

이 코드를 모두 전체 복사합니다. 그리고 관리자 > 꾸미기 > 스킨편집 > HTML 편집 > CSS 탭으로 가서 빈 공간을 확보 후 그대로 붙여넣기를 진행합니다.

 

HTML 사용 방법

지금까지의 방법과 동일합니다. 우선 이전 글 넣기로 링크글을 삽입합니다. 그리고나서 HTML 수동 모드로 전환 후 해당 링크 태그를 div로 감싸주면 됩니다. 클래스명은 rgyLink6 입니다. 그러면 아래쪽에 일반적인 링크글을 삽입해 보겠습니다.

 

친효애드온! 본문 중간 수동 링크 모듈 (마크5)

 

친효스킨의 기본 링크글에 대한 스타일이 적용되었습니다. 이제 본문 중간 수동 링크 모듈 6번째 버전으로 업그레이드 시켜보겠습니다. 위의 태그 상태는 다음과 같습니다.

 

<p><a href="https://rgy0409.tistory.com/3869" target="_blank" rel="noopener">친효애드온! 본문 중간 수동 링크 모듈 (마크5)</a></p>

그렇죠? 이 상태 입니다. 이제 이 태그를 <div>로 감싸주면 됩니다.

 

<div class="rgyLink6">
    <p><a href="https://rgy0409.tistory.com/3869" target="_blank" rel="noopener">친효애드온! 본문 중간 수동 링크 모듈 (마크5)</a></p>
</div>

최종적으로 이런 형태가 될 것 입니다. 이렇게 해서 완성된 스타일이 아래의 모습 입니다.

 

친효애드온! 본문 중간 수동 링크 모듈 (마크5)

 

생각보다 쉽습니다. 그러면 한번 직접 사용해 보시기 바랍니다. 끝.