2018.1.31 티스토 스킨 제작 일지

오늘도 자기 전 짤막하게 수정을 해본다.

들어가기 전에, 항상 고민인 건데 2018.1.31일 새벽이면 일지에 1월 30일이라 적어야 할지, 1월 31일이라 적어야 할지 항상 고민었는데, 앞으론 포스팅을 쓰는 시점으로 하기로 했다.

가장 먼저, 어제 만들었던 인스타그램 피드 이미지 세로 간격을 손보고, 불러오는 이미지의 수를 4개에서 6개로 늘렸다.

투박하던 페이지 박스를 디자인했다.

중간에 도트 3개자리 박스만 없었어도 숫자를 없애는게 훨씬 미관상 좋았지 싶은데, 어쩔 수 없이 숫자를 살려뒀다.

색 조합은 블그에 쭉 무채색만 사용해왔는데, 처음 컬러를 넣었다.

분위기를 해친다 싶으면 진한 회색 배경으로 변경할 예정이다.

.paging_wrapper{
    display: flex;
    justify-content: center;
}


.paging {
    background-color: #ffcccc;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 40px;
    text-align: center;
    margin-bottom:50px;
}


.paging span {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid transparent;
}


.paging .selected {
    background: #ff00ff;
    position: relative;
    transform: scale(2.5);
    margin: 0 8px;
    border-color: #ffcccc;
}


.paging_a {
    display: inline-block;
    text-decoration:none;
    color:black;
}

인스타그램 피드를 불러오며  z-index를 설정해서 슬라이더 이미지 영역에 nav bar가 올라와서, 스크롤이 어느정도 내려가면 nav bar가 나타나도록 하였다.

$(function () {
    var vi = 100;
    $(window).scroll(function () {
        var num = $(window).scrollTop();
 
        if (num > vi) {
            $(".nav_bar").fadeIn();
        } else {
            $(".nav_bar").fadeOut();
        }
    });
});
 

이미지 슬라이더에 새로운 이미지들을 넣었다.

사실 아래 이미지는 블로그와 아무 연관이 없지만 테스트 때 부터 쭉 들어와 있던 분이라 없으면 허전해서 넣었다.

https://tistory3.daumcdn.net/tistory/2837190/skin/images/about.html

About 페이지의 이미지들을 손봤다.

압축되어있지 않던 이미지들을 압축하고, 임시로 넣어놨던 사진들을 연관있는 사진으로 대체했다.

포토샵도 얼른 배워서 손봐야 할 듯하다.