🎚️ Your Score : 슬라이더와 카운터 연습

 

요약

• 📙 프로젝트명 : Your Score
• ⚙️ 주요 기능 : 슬라이더와 숫자를 조정가능한 카운터가 있음
• 🚩 목적 : 슬라이더와 카운터 연습, 뉴모피즘 스타일
• 📆 제작 기한 : 2023년 1월 18일 ~ 1월 20일 (3일간)
• 🛠️ 사용 툴 : HTML, CSS, JavaScript 
• 🔗 GitHub 링크 : https://github.com/dobbyjang0/javascript-mini-project/tree/main/your-score

 

기능설명

위쪽의 슬라이더는 Thumb를 움직일 경우 위에 버블이 생겨 값을 알려준다. 동작이 끊나고 다른 요소를 건드리면 해당 버블은 사라진다.

 

아래쪽의 카운터는 왼쪽 버튼을 누르면 숫자가 내려가고, 오른쪽 버튼을 누르면 숫자가 올라간다.

 

반응형

 

어려웠던 점 / 배웠던 점

슬라이더(Slider)

슬라이더에 스타일을 주는 부분에서 시간도 걸리고 많이 애를 먹었다. 특히 위에 숫자 나오는 버블 부분에서 애를 먹었다. 이래서 사람들이 플러그인이나 라이브러리를 쓰나 싶었다. 주로 참고한 자료는 다음과 같다.

 

• https://youtu.be/3Eb6FtjkZ_k
• https://codepen.io/lavary/pen/OJbQPXe

 

숫자 나오는 버블이 Thumb와 어긋났던 문제

$sliderInput.addEventListener("input", () => {
    let value = $sliderInput.value;
    $sliderNumber.style.left = `${value}%`;
});

위와 같이 버블의 위치를 값만큼으로 설정했을 때, Thumb를 이동하면 위에 있는 버블과 어긋나는 문제가 있었다. 이는 Thumb 자체 크기 때문이었다. 슬라이더의 값이 0%일 때는 Thumb의 좌측 끝이 슬라이더의 좌측과 맞붙게 된다. 하지만 슬라이더의 값이 100%일 때는 Thumb의 우측 끝이 슬라이더의 우측과 맞붙게 된다. 따라서 0%부터 100%까지 슬라이더가 이동한 거리는 실질적으로 (슬라이더의 길이) - (Thumb의 길이)로 슬라이더의 길이보다 짧게된다. 이를 그림으로 표현하면 다음과 같다.

버블과 Thumb가 이동한 길이가 다르다

 

.slider__wrapper {
    width: calc(100% - 35px);
}

.slider__input {
    width: calc(100% + 35px);
}

.slider__input::-webkit-slider-thumb {
    width: 35px;
}

이를 해결하기 위해 슬라이더와 버블을 감싸고 있는 wrapper의 길이를 thumb 길이만큼 짧게 해준 다음, 다시 슬라이더는 thumb 길이만큼 늘리는 방식으로 해결하였다. 수정시 복잡해지는 문제가 예상되지만, 자바스크립트에서 계속 계산해주는 것보다는 낫다고 생각하였다. 나중에 sass에서 변수로 정해두면 될 듯 하다. 위 해결방법을 그림으로 표현하면 다음과 같다.

 

버블과 Thumb가 이동한 길이가 같아졌다.

노란색의 wrapper 부분이 짧아짐으로써 이동길이가 같아진 것을 확인할 수 있다.

 

슬라이더 이동 값만큼 색칠하기

$sliderInput.style.background = `linear-gradient(to right, #a899fe ${value}%, #e0e0e0 ${value}%)`;

아예 요소를 따로 만들어줘서 overflow:hidden으로 가리는 방법도 생각해보았지만, 그냥 그라데이션을 이용하는 방법이 더 쉬워 이렇게 하였다.

 

뉴모피즘

https://neumorphism.io/#e0e0e0

 

슬라이더 이미지를 구경하다 뉴모피즘스러운게 보기 좋아보여서 뉴모피즘을 시도해보았다. css스타일은 위 사이트에서 도움을 많이 받았다. 만들고 싶었던 이미지들은 아래와 같다. 아래처럼 이쁘게는 안 만들어져서 슬프다.

 

 

BEM 명명규칙

BEM 명명규칙이란 block__element--modifier형태로 클래스 이름을 짓는 것을 뜻한다. modifier는 boolean type(disabled)나 key-value type(color-red)으로 표시한다. 정확히 지키지는 못 했지만 지키려고 노력해보았다.

 

추후에 추가하고픈 내용

버블의 글자 정렬해놓기

버블의 모양은 45도 rotate해서 만들어둔건데, 이 transform을 하면 글자도 돌아가 애를 먹었다. 참고한 동영상에서 나온 :after를 이용한 편법으로 어찌 만들었지만, 글자를 정렬하기는 힘들었다. 나중에는 걍 글자와 모양을 따로 만들어놔야겠다.

 

입력받은 내용으로 새로운 요소 만들기

원래는 입력받은 내용으로 영수증같이 만들려 하였지만, 슬라이더에 너무 힘을 쏟아 지쳐서 그만두었다.