3) 캘린더 구현 - 클릭시 div 노출, 스크롤바 디자인

코인 이름을 클릭하면 나오는 디테일 정보

이 사진은 기획안에 있던 사진으로, 코인 이름을 클릭하면 div가 노출되고, div 바깥을 클릭하면 다시 안보이게 되는 기능이다. 이를 구현하기 위해 먼저 body에 div 하나를 만들었다.

<div class="detail" style="display: none">detail</div>

display:none을 사용해 평소에는 보이지 않게 만들었고, JS에서 코인 이름 클릭 이벤트리스너를 이용해 보이게 만들었다.

	newdiv.addEventListener('click', function () {
            detail.innerHTML = "";
            let divEls = document.querySelectorAll('.detail > div');
            for (let i = 0; i < divEls.length; i++) {
                divEls[i].remove();
            }

            for (let i = 0; i < posts[0].coindict[key][key_2].length; i++) {
                (function (m) {
                    const dat = posts[0].coindict[key][key_2][m];
                    const coin_link = dat[0];
                    const coin_title = dat[1];

                    const link_text = document.createTextNode(coin_link);
                    const link_div = document.createElement('a');
                    link_div.setAttribute('href', coin_link);
                    link_div.setAttribute('target', "_blank");
                    link_div.appendChild(link_text);
                    link_div.setAttribute('class', 'coin_link');
                    detail.innerHTML += coin_title + '<br>';
                    detail.appendChild(link_div);
                    detail.innerHTML += '<br>' + '<br>';
                })(i);
            }
            detail.style.display = 'block';
 	})

 함수 안 마지막 줄에 있는 display:'block' 으로 인해 div가 노출되게 되고, div 내용은 함수 안에서 설정되게 된다.

첫 5줄은 div 내용을 초기화해주는 코드로, 코인 이름을 클릭할 때 마다 div 내용이 새로 작성되게 된다.

 

 그러고 나서 div를 제외한 부분을 클릭 시 div가 다시 안보이게 하는 코드를 html에서 작성했다.

<script>
    detail=document.querySelector('.detail');
    $('html').click(function(e) {
    if(!$(e.target).hasClass('detail') && !$(e.target).hasClass('coin_name') && !$(e.target).hasClass('coin_link')) {
        detail.style.display='none';
    }
    });
</script>

detail 클래스는 div 전체, coin_name과 coin_link 클래스는 안에 있는 내용을 가리킨다. 즉 div 안에 어떤 부분을 클릭하더라도 div는 유지되고, 바깥을 클릭한다면 display:none 이 작동하여 div가 안보이게 되는 형식이다.

 

 다음으로 캘린더의 전체적인 디자인을 바꿨는데, 이부분은 기본적인 부분이니 부가적인 설명은 스킵하고, 스크롤바 디자인에 관해서만 얘기를 하려 한다.

.calendar-body > div::-webkit-scrollbar {
    width: 10px;
}

.calendar-body > div::-webkit-scrollbar-thumb {
    background-color: royalblue;
    border-radius: 30px;
}

.calendar-body > div::-webkit-scrollbar-track {
    display: none;
}

스크롤바는 3가지로 구성이 되어 있는데, 스크롤바 전체를 의미하는 webkit-scrollbar, 잡고 이동하는 부분인 webkit-scrollbar-thumb, thumb를 제외한 부분인 webkit-scrollbar-track으로 나눠진다. 위에 있는 코드로 예시를 보여주면 

바꾼 스크롤바 디자인

이런 식으로 모양이 나온다. 디자인을 하며 스크롤바를 벽에서 떼어내고 싶어서 많은 시도를 해봤는데, 세로 스크롤바는 실패했지만, 가로 스크롤바는 약간의 편법을 찾을 수 있었다.

편법으로 바닥에서 떼어낸 스크롤바의 실제 모습

body 태그에 section과 같은 색을 적용하고 section의 height을 좀 올려주는 방법인데, 화면을 축소시키니 저런 모습이 나왔다. 사용자가 화면을 축소시켜보지 않기를 바랄수밖에 ㅎㅎ..

100%로 봤을때의 모습

 그래도 100%에서 보면 바닥에서 떼어져서 보기에는 좋다.