친절한효자손 취미생활

본문 중간 링크글에 대한 스타일이 어느덧 네번째까지 맞이하게 되었습니다. 코딩의 세상은 참 오묘합니다. 그리고 너무나도 객관적인 영역인데 크리에이터의 입맛과 취향에 따라 그 결과물이 천지차이여서 참 신기함과 동시에 재밌기까지 합니다. 코딩하시는 분들이 이 맛에 작업하시는게 아닐까 싶습니다. 물론 그 코딩이 순수 개인의 의지냐, 아니면 돈을 벌기 위한 수단이냐에 따라 엄청난 차이가 있겠지만요. 서두가 길었습니다. 네번째 스타일을 만나보시겠습니다.

 

 

이런 형태의 수동 링크글 입니다. 마우스를 올려 보시면 살짝 위로 뜨는 느낌을 연출했습니다. 다소 입체감 있는 링크글 스타일 입니다.

 

CSS 세팅

아래에 있는 첨부파일을 다운로드 합니다.

 

친효애드온 - 본문중간 수동링크 모듈 마크4.txt
0.00MB

 

파일을 열어보시면 다음의 CSS 스타일 코드들이 들어있습니다.

 

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

.rgyLink4 > p {
    display: flex;
    -webkit-display: flex;
    align-items: center;
    -webkit-align-items: center;
    position: relative;
    top: 0;
    margin: 10px 0 !important;
    border-radius: 500px;
    box-shadow: 5px 5px 3px 1px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 5px 5px 3px 1px rgba(0, 0, 0, 0.7);
    color: #777 !important;
    background-color: #eee;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.rgyLink4 > p::before {
    content:"\f111";
    margin-left: 10px;
    font-family: "FontAwesome";
    color: rgba(0, 0, 0, 0.5);
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.rgyLink4 > p:hover {
    top: -5px;
    box-shadow: 9px 9px 7px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 9px 9px 7px 2px rgba(0, 0, 0, 0.4);
    color: #222 !important;
    background-color: #fff;
}

.rgyLink4 > p:hover::before {
    color: rgba(0, 0, 0, 0.2) !important;
}

.rgyLink4 > p > a {
    display: block;
    padding: 10px;
    color: inherit;
}
/* 본문 중간 수동 링크 (마크4) 끝 */

이것을 관리자 > 꾸미기 > 스킨편집 > HTML 편집 > CSS 탭으로 가셔서 빈 공간을 확보 후 그대로 붙여넣기 하시면 됩니다.

 

이렇게 넣어주시면 됩니다. 참고용 이미지를 일부분만 캡쳐해서 올립니다. 여기까지 진행했다면 세팅은 모두 끝 입니다. 다음은 사용 방법 입니다.

 

HTML 사용법

본문 중간에 이전 글 넣기 플러그인이나 텍스트를 따로 블록 지정하여 URL 링크를 거는 방법 등으로 본문과 관련글을 넣었다고 가정하겠습니다. 기본 형태는 다음과 같습니다.

 

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

 

친효스킨에서는 위의 스타일이 본문 기본 형태 입니다. 이제 마크4 모듈 스타일처럼 만들어 줄 것 입니다. rgyLink4 클래스명을 가진 <div> 태그로 감싸주기만 하면 됩니다. HTML 모드로 변경 후 수동으로 감싸줍니다. 먼저 위의 링크글에 대한 태그 상태는 다음과 같습니다.

 

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

이 코드를 아래처럼 만들어 주면 됩니다.

 

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

차이점이 보이시죠? 그렇습니다. 방금 설명드린 방법대로 <div class="rgyLink4">링크글</div> 형태로만 만들면 되는 아주 간단한 작업 입니다. 최종 결과물은 다음과 같습니다.

 

 

정상적으로 잘 적용되었습니다. 끝.

 

당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드