티스토리 스킨 만들기! 친효스킨2 (아트북) 개발 일지 - 본문 공유하기 + 관련글 완성
2023. 2. 3. 00:04
안녕하세요. 친절한효자손입니다. 친효스킨2(아트북) 반응형 스킨의 본문 하단 부분을 꾸미는 중입니다. 본문 하단은 기존 친효스킨과 같은 구조입니다. CSS 부분만 편집해서 스타일을 바꾸는 중입니다. 초반에도 말씀드렸듯 스킨에 사용되는 소스를 왕창 줄여버리려고 공유하기 버튼에 사용되었던 아이콘 이미지도 아예 사용하지 않고 모두 텍스트로 처리했습니다.
미리보기
공유하기와 관련글 영역도 모두 반응형으로 대응합니다. flex 정렬을 사용했기 때문에 각 버튼이 브라우저의 가로 사이즈에 즉각 대응해 이쁘게 배치가 되고있는 모습입니다.
마우스를 올렸을 때 발행하는 이벤트도 역시 빼놓지 않고 적용시켰습니다. 이것만큼은 절대 빠뜨릴 수 없죠. 사실 이거 구현하려고 스킨을 만드는 것이라고 해도 과언이 아닐 정도거든요. (껄껄)
우선 사이드바 영역은 이렇게 4영역입니다. 사이드바1이 본문 하단 부분입니다. 이것은 친효스킨과 같은 위치죠. 나머지 사이드바2,3,4는 먼저 소개해드렸던 왼쪽의 책갈피 사이드바 영역이구요. 사이드바1인 본문 하단 영역은 본문 태그, 공유, 관련글 모듈이 배치되어 있으며 순서를 바꾸서 적용시켜도 상관 없습니다.
HTML 구조
<s_sidebar>
<s_sidebar_element>
<!--본문 태그-->
<s_tag_label>
<div class="tagTrail">
<span class="tagText">태그 : </span>
</div>
</s_tag_label>
</s_sidebar_element>
<s_sidebar_element>
<!--본문 공유-->
<div class="articleShare">
<h3>공유하기</h3>
<div class="articleShareInner">
<a href="#" target="_blank" onclick="javascript:window.open( 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent( document.URL )+'&t=' + encodeURIComponent( document.title ), 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=600, height=600' ); return false;" title="페이스북">FACEBOOK</a>
<a href="#" target="_blank" onclick="javascript:window.open( 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( document.title ) + '%20(' + encodeURIComponent( document.URL ) + ')', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=600, height=600' ); return false;" title="트위터">TWITTER</a>
<a href="#" target="_blank" onclick="javascript:window.open( 'https://share.naver.com/web/shareView.nhn?url=' + encodeURIComponent( document.URL ) + '&title=' + encodeURIComponent( document.title ), 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=600, height=600' ); return false;" title="네이버">NAVER</a>
<a href="#" target="_blank" onclick="javascript:window.open( 'https://band.us/plugin/share?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title), 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=600, width=600' ); return false;" title="밴드">BAND</a>
<a href="#" target="_blank" onclick="javascript:window.open( 'https://story.kakao.com/share?url=' + encodeURIComponent( document.URL ), 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=600, height=600' ); return false;" title="카카오스토리">KAKAOSTORY</a>
<a href="javascript:ShareKakaoTalk()" title="카카오톡">KAKAOTALK</a>
</div>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!--본문 관련글-->
<s_article_related>
<div class="area_related">
<h3 class="tit_related">'블로그/친효스킨2' 의 관련글</h3>
<ul class="list_related">
<s_article_related_rep>
<li class="">
<a href="" class="link_related">
<div class="link-related-top">
<s_article_related_rep_thumbnail>
<div class="thumb_related" style="background-image: url('');">
</div>
</s_article_related_rep_thumbnail>
</div>
<div class="link-related-bottom">
<p class="txt_related"></p>
<p class="date_related"></p>
</div>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
</s_sidebar_element>
</s_sidebar>HTML 구조는 기존 친효스킨의 스타일을 99% 계승했습니다. 공유하기 모듈에서 img 요소와 <i> 태그를 모두 삭제했고 나머지 구조는 똑같습니다. 그리고 일부 요소의 클래스명이 조금 변경되었습니다. 관련글 부분인데 친효스킨의 경우에는 세로로 차곡차곡 쌓이는 구조였다면 이번 친효스킨2 아트북은 가로로 배치되는 구조입니다. 친효스킨 커버 중 그리드 스타일과 유사합니다.
CSS 스타일시트
/* 본문 공유 */
#contents .articleShare {
overflow: hidden;
margin: 20px 0;
border-radius: 0;
border-radius: var(--borderRadius);
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#contents .articleShare h3 {
padding: 10px 0;
margin: 0 10px;
border-bottom: 1px solid #E5E5E5;
font-size: 13px;
font-weight: normal;
color: #555;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#contents .articleShare .articleShareInner {
padding: 10px;
text-align: center;
}
#contents .articleShare .articleShareInner {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 10px;
}
#contents .articleShare .articleShareInner > a {
display: flex;
justify-content: center;
align-items: center;
flex: 1 100px;
height: 50px;
padding: 5px 10px;
border-radius: 10px;
margin: 10px 20px;
font-size: 13px;
color: #fff;
background-color: #3c3c3c;
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
#contents .articleShare .articleShareInner > a:hover {
background-color: #f54;
}
/* 본문 관련글 */
#contents .area_related {
padding: 10px;
margin: 20px 0;
border-radius: 0;
}
#contents .area_related .tit_related {
display: block;
padding-bottom: 10px;
border-bottom: 1px solid #E5E5E5;
font-size: 13px;
font-weight: normal;
color: #555;
}
#contents .area_related .list_related {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 10px;
}
#contents .area_related .list_related li {
flex: 1 200px;
}
#contents .area_related .list_related li a.link_related {
display: block;
margin: 10px;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 5px 1px #ddd;
transition: all .2s;
}
#contents .area_related .list_related li a.link_related:hover {
box-shadow: 0 0 7px 3px #aaa;
}
#contents .area_related .list_related li a.link_related .link-related-top .thumb_related {
height: 80px;
outline: 1px solid #E5E5E5;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#contents .area_related .list_related li a.link_related .link-related-bottom {
position: relative;
padding-top: 10px;
}
#contents .area_related .list_related li a.link_related .link-related-bottom .txt_related {
font-size: 12px;
color: #333;
}
#contents .area_related .list_related li a.link_related .link-related-bottom .date_related {
padding-top: 10px;
font-size: 10px;
color: #aaa;
text-align: right;
}CSS 스타일 코드도 기존 친효스킨과 크게 다르지 않습니다. 일부 클래스명이 바뀌면서 CSS 코드 또한 변경된 구간은 .list_related 부분입니다. 블록 요소의 가로 배치를 위해서 display: flex; 가 적용되어 있습니다.
앞으로 만들어야 할 것들
이제 본문 부분에서는 댓글 관련 스타일만 세팅해주면 됩니다. 그리고 방명록을 작업하고 마지막으로 커버 기능을 넣으려고 합니다. 커버 기능은 업데이트 때 넣을지 미리 하나 정도는 만들고 배포를 할지를 고민하고 있습니다. 3월까지 끝내는 것을 목표로 작업 중입니다. 그럼 새롭게 선보이게 될 이번 친효스킨2 아트북도 많은 관심과 사랑을 부탁드립니다. 끝.
