[CSS] 스크롤바 커스텀 하기

wnsxk2·2024년 12월 10일

💡개요

스크롤바 커스텀 작업 중 스크롤바와 콘텐츠 영역 사이에 여백을 추가하고 싶어 방법을 찾아보았다. 다양한 방법을 시도했으나 여백이 적용되지 않아 시간을 많이 소모했다. 이 과정에서 겪은 문제와 해결 방법을 기록하여 공유한다.

🛠️스크롤바 디자인 적용

스크롤바 디자인을 커스텀하려면 아래 3가지 기본 선택자를 알아야 한다.

::-webkit-scrollbar : 스크롤바의 전체 영역
::-webkit-scrollbar-thumb : 스크롤바의 움직이는 막대 부분
::-webkit-scrollbar-track : 스크롤 막대의 외부 트랙(경로)

위 3가지 선택자를 사용해 아래와 같이 스타일을 적용할 수 있다.

/* 스크롤바의 너비를 15px로 설정 */
*::-webkit-scrollbar {
    width: 15px;
}

/* 스크롤바의 외부 트랙을 투명하게 설정 */
*::-webkit-scrollbar-track {
    background: transparent;
}

/* 스크롤바 막대의 색상과 모양을 설정 */
*::-webkit-scrollbar-thumb {
    background: rgb(255, 0, 0);
    border-radius: 8px;
}

이 기본 스타일을 통해 스크롤바의 색상, 너비 및 외형을 변경할 수 있다.

🎯목표: 스크롤과 콘텐츠 영역 사이에 여백 추가하기

원하는 스타일은 아래 그림처럼 스크롤 막대와 콘텐츠 사이에 여백을 추가하는 것이다.

🔍문제 발생 및 원인 분석

구글링을 통해 여백을 추가하는 방법을 찾았고, background-clip과 border 속성을 조합하면 된다고 했다.

*::-webkit-scrollbar-thumb {
    background-clip: padding-box; /* 내부 패딩 영역만 그리기 */
    background: rgb(255, 0, 0);
    border: 3px solid transparent; /* 투명한 border로 여백을 추가 */
    border-radius: 8px;
}

하지만 위 코드를 적용해도 스크롤에 여백이 추가되지 않는 문제가 발생했다.

📌원인

background 속성은 단축 속성(Shorthand Property)이다.
background: rgb(255, 0, 0);로 스타일을 설정할 때, background-clip의 기본값인 border-box가 다시 적용되어 background-clip: padding-box; 설정이 무시되었다.

즉, background-clip: padding-box;가 적용된 이후, background 단축 속성이 다시 덮어써버리는 문제가 발생한 것이다.

💡해결 방법

이 문제를 해결하기 위해 단축 속성의 사용을 피하거나 속성 순서를 조정해야 한다. 아래 3가지 방법으로 문제를 해결할 수 있다.

1. 속성 순서 변경하기

해결 방법: background-clip 속성을 background 속성보다 나중에 선언한다.

*::-webkit-scrollbar-thumb { 
    background: rgb(255, 0, 0);
    background-clip: padding-box;
    border: 3px solid transparent;
}

이유: background 속성이 먼저 적용된 후, background-clip 속성이 덮어쓰기 되기 때문에 정상 작동한다.

2. 단축 속성 대신 개별 속성 사용하기

해결 방법: background-color와 같은 개별 속성을 사용해 단축 속성의 덮어쓰기 문제를 회피한다.

*::-webkit-scrollbar-thumb { 
    background-color: rgb(255, 0, 0);
    background-clip: padding-box;
    border: 3px solid transparent;
}

이유: background-color는 background-clip과 별도로 적용되기 때문에 덮어쓰기 문제가 발생하지 않는다.

3. 단축 속성을 한 줄로 작성하기

해결 방법: 단축 속성을 한 줄로 작성하면서 background-clip을 함께 정의한다.

*::-webkit-scrollbar-thumb {
    background: rgb(255, 0, 0) padding-box;
    border: 3px solid transparent;
}

이유: background 속성의 단축 문법을 활용해 background-clip과 background-color를 한 번에 설정할 수 있다.

📘스크롤 커스텀 스타일 최종 코드

*::-webkit-scrollbar {
    width: 15px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgb(255, 0, 0) padding-box; /* 단축 속성을 활용해 여백 추가 */
    border: 3px solid transparent; 
    border-radius: 8px;
}

이 스타일은 스크롤과 콘텐츠 영역 사이에 여백이 추가된 최종 코드이다.

🪄 결론

이번 문제는 단축 속성(Shorthand Property)과 개별 속성의 우선순위에 대한 이해 부족으로 발생한 것이다.
앞으로는 단축 속성(Shorthand Property)과 개별 속성의 관계를 명확히 이해하고 사용하고, 단축 속성을 사용한 후 우선순위에 주의하자.