친절한효자손 취미생활

이번에도 심심해서 본문 중간 링크용 스타일을 만들어봤습니다. 앞서 소개한 두 개가 다소 유니크한 느낌이라면 이번에는 정말 평범하게 만들었습니다. 마크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>

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

 

 

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

공유하기

facebook twitter kakaoTalk kakaostory naver band