2018/2/2 티스토리 스킨 개발 일지

*. 해결해야할 문제) 인덱스 페이지에서 종종 썸네일 이미지가 깨진다. 아무리 확인해봐도 내가 해결할 수 있는 문제가 아니고 서버문제 같긴 하다만, 해결 방안을 모색할 필요는 있어 보인다.

보통의 경우 article을 감싸고 있는 container를 건드리면 발생하는 문제같다.

1. '태그'등 body의 길이가 짧은 페이지에서 네비바를 불러올 만한 스크롤 양이 나오질 않아, 한 번만 스크롤 하면 네비바가 나오도록 했다.

2. 카테고리 다른 글

너무 뻔한 디자인인가 싶긴 하지만, 독창성보단 편하게 볼 수 있는 게 중요하다 생각하여 이렇게 디자인했다.

컴퓨터에선 hover 해야 제목과 날짜가 뜬다.

배경이 하야면 보이지 않는 문제를 위해 그림자를 넣었다.

전부터 쓰던 방법인데, 조금 집중을 해야 보이는 것 같아 수정해야겠다고 생각한다.

분명 이미지 크기를 알아서 조절하는 플러그인을 적용했는데, 계속 원본 이미지를 불러와서 해결 방안을 찾아보니

//i1.daumcdn.net/thumb/C200x200/?fname=

를 앞에 붙여주면 끝나는 간단한 문제였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<s_article_related>
    <div class="tit_related">[프론트엔드/제작 일지] 카테고리 다른 글</div>
    <div class="area_related">
        <s_article_related_rep>
            <div class="related_list">
                <div class="">
                    <a href="" class="link_related">
                        <div class="thumb_related">
                            <s_article_related_rep_thumbnail><img src="//i1.daumcdn.net/thumb/C200x200/?fname=" class="img_related">
                            </s_article_related_rep_thumbnail>
                            <div class="txt_related"></div>
                            <div class="date_related"></div>
                        </div>
                    </a>
                </div>
            </div>
        </s_article_related_rep>
    </div>
</s_article_related>
 
Colored by Color Scripter
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
.area_related {
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.related_list{
    position: relative;
    display: inline-block;
}

.thumb_related{
    position: relative;
    display: inline-block;
}

.img_related {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 3px;
}

.txt_related{
    position: absolute;
    width: 200px;
    top: 80px;
    color:#fff;
    visibility: hidden;
    text-align: center;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    font-size: 1.2rem;
    text-shadow: 0 0 5px #000;
    -moz-text-shadow: 0 0 5px #000;
    -webkit-text-shadow: 0 0 5px #000;
    pointer-events: none;
}

.date_related{
    position: absolute;
    width: 200px;
    top: 170px;
    color:#fff;
    visibility: hidden;
    text-align: center;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    font-size: 1.2rem;
    text-shadow: 0 0 5px #000;
    -moz-text-shadow: 0 0 5px #000;
    -webkit-text-shadow: 0 0 5px #000;
    pointer-events: none;
}

.thumb_related:hover .date_related{
    visibility: visible;
    opacity: 1;
}

.thumb_related:hover .txt_related{
    visibility: visible;
    opacity: 1;
}

.tit_related{padding:.3rem}

@media only screen and (max-width: 980px) {
.img_related {
    width: 150px;
    height: 150px;
}
    
.txt_related {
    width: 150px;
    top: 50px;
    font-size: 0.8rem;
    visibility: visible;
    opacity: 1;
}
.date_related {
    width: 150px;
    top: 120px;
    font-size: 0.8rem;
    visibility: visible;
    opacity: 1;
}
}
Colored by Color Scripter
cs

팝업창입니다.

까꿍

팝업창을 넣었다.

아직은 쓸 일이 크게 없지만, 이게 없으면 꼭 필요할 일이 생겨서 미리 해놨다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function dialog() {
    var dialogBox = $('.dialog'),
        //  dialogBox = $('.dialog2'),
        dialogTrigger = $('.dialog__trigger'),
        dialogClose = $('.dialog__close'),
        dialogTitle = $('.dialog__title'),
        //  dialogTitle = $('.dialog__title2'),
        dialogContent = $('.dialog__content'),
        //  dialogContent = $('.dialog__content2'),
        dialogAction = $('.dialog__action');
    for (var i = 0; i < dialogTrigger.length; i++) {
        $(dialogTrigger[i]).on('click', i, function (e) {
            $(dialogBox[e.data]).toggleClass('dialog--active');
            e.stopPropagation()
        });
        $(dialogClose[i]).on('click', i, function (e) {
            $(dialogBox[e.data]).removeClass('dialog--active');
        });
    }
    $(document).keyup(function (e) {
        if (e.keyCode === 27) {
            dialogBox.removeClass('dialog--active');
        }
    });
};
$(function () {
    dialog();
});
 
Colored by Color Scripter
cs

1
2
3
4
5
6
7
<button class="dialog__trigger">more</button>
<div class="dialog">
    <span class="dialog__close">&#x2715;</span>
    <h2 class="dialog__title">제목</h2>
    <p class="dialog__content">내용
    </p>
</div>
Colored by Color Scripter
cs

해야 할 일

1. 공감/공유/신고 창 정리하고 새로 만들기

팝업창입니다.

티스토리툴바