친효애드온! 본문 중간 수동 링크 모듈 (마크4)
본문 중간 링크글에 대한 스타일이 어느덧 네번째까지 맞이하게 되었습니다. 코딩의 세상은 참 오묘합니다. 그리고 너무나도 객관적인 영역인데 크리에이터의 입맛과 취향에 따라 그 결과물이 천지차이여서 참 신기함과 동시에 재밌기까지 합니다. 코딩하시는 분들이 이 맛에 작업하시는게 아닐까 싶습니다. 물론 그 코딩이 순수 개인의 의지냐, 아니면 돈을 벌기 위한 수단이냐에 따라 엄청난 차이가 있겠지만요. 서두가 길었습니다. 네번째 스타일을 만나보시겠습니다.
중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글
이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글! 반드시 두 줄로 만들었어야만 하는 그 링크 글!
이런 형태의 수동 링크글 입니다. 마우스를 올려 보시면 살짝 위로 뜨는 느낌을 연출했습니다. 다소 입체감 있는 링크글 스타일 입니다.
CSS 세팅
아래에 있는 첨부파일을 다운로드 합니다.
파일을 열어보시면 다음의 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 링크를 거는 방법 등으로 본문과 관련글을 넣었다고 가정하겠습니다. 기본 형태는 다음과 같습니다.
친효스킨에서는 위의 스타일이 본문 기본 형태 입니다. 이제 마크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> 형태로만 만들면 되는 아주 간단한 작업 입니다. 최종 결과물은 다음과 같습니다.
정상적으로 잘 적용되었습니다. 끝.
