친효애드온 관련글 마크1 업데이트 - 소제목 넣기 기능 추가
친효애드온 중에서 관련글 마크1에 대한 업데이트 소식 입니다. 한 개의 글에 여러개의 관련글 스타일을 연달아 입력할 때 좀 더 구분이 쉽게 될 수 있도록 소제목을 넣을 수 있는 기능을 추가했습니다. 결과물에 대한 예시를 아래에 바로 출력해 보겠습니다.
보시는 것 처럼 "관련글 소제목" 이라고 되어 있는 부분처럼 관련글 모듈을 여러개 사용할 때 구별이 쉽게 되도록 이렇게 소제목을 입력할 수 있습니다. 먼저 세팅 방법입니다.
CSS
아래의 첨부파일을 다운로드 받으셔서 기존 친효애드온 첨부파일 마크1 CSS 스타일에 추가해 놓으시면 됩니다. 아직 첨부파일 마크1을 적용하시기 전 이라면, 먼저 적용부터 진행해 주시기 바랍니다.
친효애드온 - 관련글 마크1 업데이트 CSS.txt사용 방법은 관련글 사용 방법과 거의 동일합니다.
HTML
관련글 내에서 소제목을 입력하기 위해서 아래의 태그를 추가 해주시면 됩니다. 먼저 기본 HTML 코딩 상태는 다음과 같습니다.
<div class="rgyTextBox">
<span>관련글 소제목</span>
<p><a href="링크주소" target="_blank">링크제목</a></p>
</div>
현재 노란색으로 표시된 span 태그를 수동으로 추가 입력하셔서 관련글 소제목으로 사용할 수 있습니다. '관련글 소제목' 이라는 글씨를 지우고 원하는 텍스트를 입력해서 사용하면 됩니다. 본문의 맨 위에 있는 예시도 이렇게 사용해서 완성된 결과물 입니다. 더 자세한 사용 방법은 아래의 관련글을 읽어 주시기 바랍니다.
다른 관련글 모듈에도 적용하는 방법
간단합니다. 하나 예시를 보여 드리겠습니다. 관련글 마크1 뿐만 아니라, 마크2, 마크3에도 이 방법을 적용하고 싶다면 아래와 같이 수정하시면 됩니다.
/* 관련글 소제목 마크1 */
.rgyTextBox > span,
.rgyTextBox2 > span,
.rgyTextBox3 > span {
display: block;
padding-left: 5px;
margin-bottom: 10px;
color: #888;
}
.rgyTextBox > span::before,
.rgyTextBox2 > span::before,
.rgyTextBox3 > span::before {
margin-right: 7px;
content: "\f055";
font-family: "FontAwesome";
font-weight: normal;
font-size: 20px;
color: #888;
vertical-align: middle;
}
먼저 주황색 부분처럼 쉼표로 스타일 태그를 구별해 줍니다. CSS에서 쉼표의 역할은 해당 선택자 외에 다른 선택자를 더 추가한다는 뜻 입니다. 주의사항으로는 마지막 선택자 부분은 쉼표를 입력하지 않습니다. 그리고나서 노란색 부분처럼 선택자를 추가해 주면 됩니다. 앞으로 마크4, 마크5의 관련글 모듈을 제작하고 배포하게 된다면 이와 같은 방법으로 선택자를 추가해서 소제목으로 활용이 가능합니다.
주의사항
너무 과다사용 하시지 않기 바랍니다. 과한건 안 한 것 보다 못 합니다. 음식도 과하게 먹으면 체하는 법 이니까요. 적당히 보기 좋게 사용하셨으면 좋겠습니다. 딱 적당한게 눈에 잘 들어오고 그만큼 가독성도 좋습니다. 가독성이 좋아야 문장이 눈에 들어오고, 문장이 머릿속에 들어와야 방문자들은 관련글을 관심있게 읽을 것 입니다. 끝.
"친절한효자손 취미생활" 을 검색!
