친효애드온! 본문 중간 수동 링크 모듈 (마크3)
본문 중간에 삽입하는 링크에 대한 세번째 스타일 입니다. 이번 디자인은 완전 90년대 메트로 스타일로 만들었습니다. 완전 고전 스타일의 버튼 형식 입니다. 거두절미하고 바로 예제를 살펴보겠습니다.
중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글
이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글! 반드시 두 줄로 만들었어야만 하는 그 링크 글!
이런 스타일의 본문 중간 링크 입니다. 특징이라면 마우스를 올려도 아무 변화가 없습니다. 하지만 버튼 스타일이기 때문에 클릭을 할 때 스타일이 순간 바뀝니다. 마치 실제로 버튼이 눌리는 것 처럼 말입니다. 클래식한 버튼을 좋아하시거나 특별한 스타일의 링크글을 연출하고 싶다면 활용해보면 어떨까 싶습니다.
CSS 세팅
먼저 아래의 코드를 다운로드 받습니다.
텍스트 파일을 열어보시면 다음의 CSS 코드들이 들어 있는 것을 확인할 수 있습니다.
/* 친효애드온 : 본문 중간 수동 링크 (마크3) 시작 */
.rgyLink3 > p {
overflow: hidden;
}
.rgyLink3 > p > a {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 5px;
border-top: 5px solid #F2F2F2;
border-left: 5px solid #F2F2F2;
border-right: 5px solid #888;
border-bottom: 5px solid #888;
font-size: 15px;
color: #555 !important;
background-color: #DDD;
}
.rgyLink3 > p > a:active {
top: -1px;
left: -1px;
border-top: 5px solid #888;
border-left: 5px solid #888;
border-right: 5px solid #F2F2F2;
border-bottom: 5px solid #F2F2F2;
color: #111 !important;
background: #CCC;
background: -moz-linear-gradient(-45deg, #aaaaaa 0%, #cccccc 50%, #eeeeee 100%);
background: -webkit-linear-gradient(-45deg, #aaaaaa 0%, #cccccc 50%, #eeeeee 100%);
background: linear-gradient(135deg, #aaaaaa 0%, #cccccc 50%, #eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#eeeeee', GradientType=1);
}
/* 본문 중간 수동 링크 (마크3) 끝*/이 내용을 관리자 > 꾸미기 > 스킨편집 > HTML 편집 > CSS 탭으로 가셔서 빈 줄을 적당히 확보 후 그대로 붙여넣기를 하시면 됩니다.
이런 식으로 삽입해 두시면 됩니다. 그리고 오른쪽 상단의 적용 버튼을 눌러서 환경을 저장 합니다. 여기까지 다 하셨다면 세팅은 끝 입니다. 이제 사용 방법 입니다.
HTML 사용법
본문 중간에 관련글 혹은 텍스트를 블록 지정하여 URL 링크를 걸어주는 방법은 생략하겠습니다. 그냥 기존 링크글 입력하는 방법과 차이가 없습니다. 아래에 예시를 하나 만들어 보겠습니다.
아직 본문에서 소개하는 메트로 스타일의 버튼으로 둔갑하기 전 상태 입니다. 친효스킨에서는 링크글에 대해서 기본적으로 위와 같이 스타일이 적용 됩니다. 이제 옷을 바꿔 입혀 주겠습니다. 위의 코드 상태는 다음과 같습니다.
<p><a href="https://rgy0409.tistory.com/3656" target="_blank" rel="noopener">친효애드온 : 본문 중간 수동 링크 (마크2) 모듈</a></p>이제 이 링크 태그를 div로 감싸줍니다. 그리고 클래스명을 rgyLink3 으로만 지정해주면 완료 입니다. 최종적으로는 아래의 형태가 될 겁니다.
<div class="rgyLink3">
<p><a href="https://rgy0409.tistory.com/3656" target="_blank" rel="noopener">친효애드온 : 본문 중간 수동 링크 (마크2) 모듈</a></p>
</div>어떤 차이인지 보이시나요? 코드가 길지 않기 때문에 금방 어느 부분이 다른지 그 차이점을 파악할 수 있을 겁니다. 그렇습니다. HTML 수동 모드로 변경 후, rgyLink3 클래스명이 담긴 div 태그로 감싸주는게 핵심 입니다. 이렇게해서 완성된 본문 중간 수동 링크 마크3 모듈이 아래에 있습니다.
그렇습니다. 이렇게 완성 되었습니다. 그러면 적절히 한번 이용해 보시기 바랍니다. 끝.
