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

이번에도 심심해서 본문 중간 링크용 스타일을 만들어봤습니다. 앞서 소개한 두 개가 다소 유니크한 느낌이라면 이번에는 정말 평범하게 만들었습니다. 마크1과 비슷한 컨샙의 모듈 입니다. 일단 아래에 샘플이 있으니 직접 마우스로 올려보면서 테스트해 보시기 바랍니다. 참고로 클릭해도 아무런 변화가 없습니다.

 

짧은 제목의 링크 글

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

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

 

이런 느낌의 본문 중간 링크글 입니다. 완전 단순하죠? 복잡한 스타일을 싫어하신다면 마음에 드실 것 같습니다. 저 역시 종종 이용하게 될 스타일 입니다.

 

CSS 세팅

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

 

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

0.00MB

 

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

 

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

.rgyLink5 > p > a {
    position: relative;
    display: block;
    margin: 5px 0;
    padding: 7px 15px 7px 30px;
    border: 1px solid transparent;
    border-radius: 50px;
    font-family: "NanumGothic", sans-serif;
    color: #555;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.rgyLink5 > p > a::before {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 10px;
    content: "\f105";
    font-family: "FontAwesome";
}

.rgyLink5 > p > a:hover {
    border-color: #ff5544;
    color: #ff5544;
}
/* 본문 중간 수동 링크 (마크5) 끝 */

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

 

일부만 캡쳐한 모습 입니다. 이렇게 빈 공간을 만들어 붙여넣기 하면 됩니다. 아무곳이나 상관 없습니다. 단 다른 스타일의 {} 괄호 안에 넣으면 안 됩니다.

 

HTML 사용 방법

지금까지의 방법과 동일 합니다. 그저 rgyLink5 라는 클래스명의 div로 감싸주기만 하면 됩니다. 아래쪽에 일반적인 이전 글 넣기의 링크글을 첨부해 보겠습니다.

 

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

 

위의 링크는 글쓰기의 HTML 편집 모드로 살펴보면 아랭와 같습니다.

 

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

이렇게 되어 있습니다. 이제 이 태그를 div로 감싸줍니다.

 

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

이렇게 감싸주기만 하면 됩니다. 간단하죠? 이렇게해서 완성된 최종 모습 입니다.

 

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

 

보시는 것 처럼 본문 중간에 수동으로 넣는 링크글의 다섯번째 스타일이 완벽하게 적용되었습니다. 끝.