티스토리 스킨 만들기! 친효스킨2 (아트북) 개발 일지

안녕하세요! 친절한효자손입니다. 점점 스킨의 윤곽이 잡혀가고 있습니다. 친효스킨 아트북 반응형 스킨의 댓글과 방명록에 대한 스타일 세팅이 완료되었습니다. 이제 진짜 얼마 남지 않았습니다. 커버 기능 하나만 남았군요. 완성이 코 앞입니다. 어서 완성하여 배포할 날을 학수고대하고 있습니다.

미리보기

먼저 댓글 리스트입니다. 기존 친효스킨의 말풍선 스타일이 너무 마음에 들기에 스타일을 대체로 유지하되 답글에 대한 스타일만 변경했습니다. 답글은 좀 더 직관적으로 보이게 하고 싶어서 답글 프로필의 왼쪽 상단에 뱃지를 달았습니다. 반응형으로 동작합니다. 모바일같은 가로가 좁은 화면에서는 안쪽 여백이 줄어들고 프로필 사진도 작아집니다. 폰트 크기는 변하지 않습니다.

방명록 스타일은 댓글 스타일과 동일합니다. 굳이 다른 스타일을 만들 필요는 없을 것 같았습니다. 반응형으로 동작하고 댓글 CSS를 그대로 계승하므로 반응형으로 변하는 구간도 동일하게 동작합니다.

HTML 구조

<s_rp_container>
    <ol class="rgy-reply">
        <s_rp_rep>
            <li id="">
                <div class="rgy-rewrite-window">
                    <div class="">
                        <div class="rgy-rewrite-window-left" style="background-image: url()"></div>
                        <div class="rgy-rewrite-window-right">
                            <div class="rgy-rewrite-window-right-top">
                                <span class="re-name"></span>
                                <span class="re-date"></span>
                                <span class="re-btn">
                                    <a href="#" onclick="" class="modify" title="수정/삭제">수정/삭제</a>
                                    <a href="#" onclick="" class="write" title="답글">답글쓰기</a>
                                </span>
                            </div>
                            <div class="rgy-rewrite-window-right-bottom">
                                <p class="re-chatwindow"></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 댓글에 대한 답글 -->
                <s_rp2_container>
                    <ul>
                        <s_rp2_rep>
                            <li id="">
                                <div class="rgy-rewrite-window rgy-rewrite-window2">
                                    <div class="">
                                        <div class="rgy-rewrite-window-left" style="background-image: url()"></div>
                                        <div class="rgy-rewrite-window-right">
                                            <div class="rgy-rewrite-window-right-top">
                                                <span class="re-name"></span>
                                                <span class="re-date"></span>
                                                <span class="re-btn">
                                                    <a href="#" onclick="" class="modify" title="수정/삭제">수정/삭제</a>
                                                </span>
                                            </div>
                                            <div class="rgy-rewrite-window-right-bottom">
                                                <p class="re-chatwindow"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </s_rp2_rep>
                    </ul>
                </s_rp2_container>
            </li>
        </s_rp_rep>
    </ol>
</s_rp_container>

친효스킨 HTML 구조와 크게 다르지 않습니다. 위의 코드는 댓글과 방명록 모두 똑같습니다. 다만 방명록에는 클래스명이 하나 더 추가가 되어 있을 뿐입니다. 댓글에 사용했던 클래스명이 방명록 HTML에 추가가 되어 있지요.

CSS 스타일시트

/* ============= 댓글 / 방명록 시작 ============= */
#contents .comment {
    display: block;
    padding: 10px;
    border-radius: 0;
}

#contents .comment .comment-top {
    padding: 5px 0;
}

#contents .comment .comment-top h3 {
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E5E5;
    font-size: 13px;
    font-weight: normal;
    color: #555;
}

#contents .comment .comment-top h3 > span {
    color: #ff5544;
}

#contents .comment .commentWrite {
    padding: 30px 0;
}

#contents .comment .commentWrite .re3-options p {
    margin-bottom: 5px;
}

#contents .comment .commentWrite .re3-options p input {
    padding: 5px;
    border: 1px solid #777;
    border-radius: 5px;
    color: #777;
}

#contents .comment .commentWrite .re3-options p input:focus {
    outline: none;
}

#contents .comment .commentWrite .CommentSecretWrap {
    padding-bottom: 10px;
}

#contents .comment .commentWrite .CommentSecretWrap input {
    vertical-align: middle;
    color: #555;
}

#contents .comment .commentWrite .CommentSecretWrap label {
    font-size: 13px;
    color: #555;
}

#contents .comment .commentWrite textarea {
    padding: 10px;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    border-color: #aaa;
}

#contents .comment .commentWrite textarea::placeholder {
    color: #aaa;
}

#contents .comment .commentWrite .reBtn {
    display: block;
    padding: 10px;
    border: none;
    border-radius: 10px;
    margin-left: auto;
    color: #fff;
    background-color: #555;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

#contents .comment .commentWrite textarea:focus,
#contents .comment .commentWrite .reBtn:focus {
    outline: none;
}

#contents .comment .commentWrite .reBtn:hover {
    color: #fff;
    background-color: #FF5544;
}

/* 댓글 / 방명록 리스트 */
#contents .commentList {
    margin-top: 10px;
    border-top: 1px solid #E5E5E5;
}

#contents .commentList .rgy-reply {
    display: flex;
    flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
}

#contents .commentList .rgy-reply > li {
    padding: 30px 0;
}

#contents .commentList .rgy-reply > li:not(:first-child) {
    border-bottom: 1px dashed #ccc;
}

#contents .commentList .rgy-rewrite-window {
    position: relative;
    padding: 20px 0;
}

#contents .commentList .rgy-rewrite-window > div {
    display: flex;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-left {
    flex: 0 0 50px;
    height: 50px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right {
    position: relative;
    width: 100%;
    margin-left: 10px;
    padding: 5px 15px;
    border-radius: 10px;
    background-color: #f5f5f5;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right::before {
    position: absolute;
    display: block;
    content: "◀";
    top: 12px;
    left: -12px;
    font-size: 18px;
    color: #f5f5f5;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top {
    position: relative;
    padding: 5px;
    font-size: 12px;
    border-bottom: 1px dashed #ccc;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top > span {
    display: inline-block;
    padding: 3px;
    font-size: 12px;
    color: #333;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-name a {
    color: #333;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-name a:hover {
    color: #f54;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-name img {
    display: none;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-name img,
#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-name a,
#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-name span {
    vertical-align: middle;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-date {
    color: #888;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-date a {
    margin-left: 5px;
    color: #f54;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-btn a {
    margin-right: 5px;
    color: #888;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-top .re-btn a:hover {
    color: #f54;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-bottom .re-chatwindow {
    position: relative;
    padding: 5px;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.2rem;
    word-break: break-all;
    -webkit-word-break: break-all;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-bottom .re-chatwindow > img {
    vertical-align: sub;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-bottom .re-date {
    margin-top: 3px;
    color: #ccc;
}

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-bottom .re-date a {
    margin-left: 5px;
    color: #FF5544;
}

/* 답글 남기기 */
#contents .commentList .rgy-rewrite-window2 {
    position: relative;
    margin-left: 30px;
}

#contents .commentList .rgy-rewrite-window2::before {
    position: absolute;
    top: 20px;
    left: -25px;
    content: "답글";
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    background-color: #f54;
}

#contents .commentList .rgy-rewrite-window2 .rgy-rewrite-window-right {
    background-color: #ddd;
}

#contents .commentList .rgy-rewrite-window2 .rgy-rewrite-window-right::before {
    color: #ddd;
}

#contents .commentList .rgy-rewrite-window2 .rgy-rewrite-window-right .rgy-rewrite-window-right-top {
    border-bottom: 1px dashed #aaa;
}

/* 이전 댓글 더 보기 */
#contents .commentList .tt_more_preview_comments_wrap {
    margin: 20px;
}

#contents .commentList .tt_more_preview_comments_wrap .tt_more_preview_comments_text {
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    background-color: #555;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

#contents .commentList .tt_more_preview_comments_wrap .tt_more_preview_comments_text:hover {
    background-color: #FF5544;
}

/* 방명록 */
#contents .guest {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #ccc;
}

#contents .guestList .rgy-reply {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
}

#contents .guestList .rgy-reply > li {
    border-bottom: 1px dashed #ccc;
}

#contents .guestList .rgy-reply > li:last-child {
    border-bottom: none;
}
/* ============= 댓글 / 방명록 끝 ============= */

댓글과 방명록의 스타일이 동일하니 확실히 CSS 코드도 간단해집니다. 다만 댓글과 방명록의 정렬 방식이 서로 반대라는걸 이번에 처음 알았습니다. 본문 댓글의 경우에는 기본값이 최신 댓글이 맨 하단으로 쌓이는 형태이며 방명록은 반대로 최신 글이 위로 쌓이는 형태입니다. 따라서 본문의 li 태그를 flex를 사용해 반전시킬 필요가 있었습니다. 그렇기 때문에 댓글에는 flex-direction: column-reverse;가 적용되었고 방명록과 동일하게 클래스명을 사용하기에 다시 방명록만 따로 마크업하여 정상으로 돌려놓았습니다. flex-direction에 대한 자세한 설명은 아래의 글을 참고하시기 바랍니다.

CSS flex-direction 자식요소 배치 순서 정하기

태그 블록 요소는 세로로 쌓이는 속성을 가지고 있습니다. 크기를 가지고 있기 때문이죠. 불과 얼마전까지만해도 flex를 사용할 수 없었던 시절에는 블록 요소를 가로로 정렬하기 위해 float 이라

rgy0409.tistory.com

앞으로 만들어야 할 것들

커다란 작업으로는 커버 기능만을 남겨두고 있습니다. 그 이후에는 페이징과 푸터 영역 정도구요. 커버만 끝나면 나머지는 스타일만 세팅하면 되는 부분이라 금방 끝날 것 같습니다. 커버는 생각해둔 스타일이 있는데 우선 한 개의 커버가 완성되면 친효스킨2 아트북을 배포할 생각입니다. 앞서 설명드렸듯 무료로 배포할 생각입니다. 정확한 일정은 아직 미정입니다. 우선 스킨이 완성되면 이후에 배포일정을 체크할 계획입니다. 끝.