CSS - 스크롤바: 초보자 가이드

안녕하세요, 미래의 웹 디자인 마법사 여러분! 오늘 우리는 CSS 스크롤바의 마법의 세계로 뛰어들어 보겠습니다. 코드를 한 줄도 적어본 적이 없으신 분들도 걱정 마세요 - 이 여정에서 여러분의 친절한 안내자가 되어드리겠습니다. 마침내, 여러분은 프로처럼 스크롤바를 스타일링할 수 있을 것입니다!

CSS - Scrollbars

스크롤바 소개

자세한 내용에 들어가기 전에 스크롤바에 대해 이야기해 보겠습니다. 여러분은 매일 인터넷을 브라우징할 때 보게 되는 작은 바들입니다 - 웹 페이지의 측면이나 하단에 있는 그 것들이, 화면에 동시에 맞지 않는 많은 콘텐츠가 있을 때 위아래로, 왼쪽오른쪽으로 스크롤할 수 있게 해줍니다.

이제 여러분이 마법의 지팡이를 흔들어 이러한 스크롤바의 모습을 바꿀 수 있다고 상상해 보세요. 오늘 우리는 CSS로 바로 그렇게 할 방법을 배울 것입니다!

스크롤바 스타일링 방법

CSS로 스크롤바를 스타일링하는 것은 여러분의 웹 페이지를 리فة예似的로 변신시키는 것입니다. 사이트를 돋보이게 하고 독특한 사용자 경험을 제공하는 방법입니다. 간단한 예제로 시작해 보겠습니다:

/* 이는 여러분의 웹 페이지 전체에 적용됩니다 */
body::-webkit-scrollbar {
width: 12px;               /* 스크롤바 전체의 너비 */
}

body::-webkit-scrollbar-track {
background: orange;        /* 트랙 영역의 색상 */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* 스크롤 썸의 색상 */
border-radius: 20px;       /* 스크롤 썸의 둥글기 */
border: 3px solid orange;  /* 스크롤 썸 주위의 패딩 생성 */
}

이 예제에서 우리는 브라우저에게 다음을 지시하고 있습니다:

스크롤바를 12픽셀 너비로 만들기
트랙 영역(썸이 움직이는 영역)을 주황색으로 만들기
썸(스크롤을 잡아 움직이는 부분)을 파란색으로 만들기
썸의 모서리를 둥글게 만들기
썸 주위에 주황색 테두리 추가

꽤 멋지죠? 하지만 기다려, 더 있답니다!

스크롤바 선택자

스크롤바를 스타일링하기 위해 특별한 선택자를 사용합니다. 이 것들을 마법의 말로 생각해 보세요. CSS가 스크롤바의 어떤 부분을 변경할지 알려줍니다. 주요 선택자는 다음과 같습니다:

선택자	설명
::-webkit-scrollbar	전체 스크롤바를 스타일링합니다
::-webkit-scrollbar-button	스크롤바의 버튼(위쪽과 아래쪽을 가리키는 화살표)을 스타일링합니다
::-webkit-scrollbar-track	트랙(프로그레스 바)을 스타일링합니다
::-webkit-scrollbar-track-piece	트랙(프로그레스 바)의 썸이 덮이지 않은 부분을 스타일링합니다
::-webkit-scrollbar-thumb	드래그 가능한 스크롤 핸들을 스타일링합니다
::-webkit-scrollbar-corner	수직 및 수평 스크롤바가 만나는 스크롤바의 하단 모서리를 스타일링합니다
::-webkit-resizer	일부 요소의 하단 모서리에 나타나는 드래그 가능한 조정 핸들을 스타일링합니다

커스텀 스크롤바 만들기

이제 우리는 마법의 말(선택자)을 알고 있습니다. 이제 재미있는 커스텀 스크롤바를 만들어 보겠습니다:

/* 뉴온 테마의 스크롤바를 만들어 보겠습니다! */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

이 예제에서 우리는 사이버펑크 영화에 속할 것 같은 스크롤바를 만들었습니다! 트랙은 검정색이고 미세한 내그림자가 있으며, 썸은 그라디언트가 있고 마우스를 올리면 그라디언트가 바뀝니다. 이 클래스를 오버플로우가 있는 모든 요소에 적용하면 마법이 일어납니다!

CSS 스크롤바 스타일링

스크롤바 스타일링 과정을 단계별로 나누어 설명하겠습니다:

목표 선택: 전체 페이지( body 사용) 또는 특정 요소(클래스나 ID 사용)의 스크롤바를 스타일링할지 결정합니다.
너비 설정: ::-webkit-scrollbar 선택자를 사용하여 스크롤바 전체의 너비를 설정합니다.
트랙 스타일링: ::-webkit-scrollbar-track 선택자를 사용하여 트랙의 배경, 그림자 등을 설정합니다.
썸 디자인: ::-webkit-scrollbar-thumb 선택자를 사용하여 드래그 가능한 부분의 색상, 그라디언트, 모서리 둥글기를 설정합니다.
인터랙티브 추가: :hover이나 :active와 같은 조건부 선택자를 사용하여 사용자와의 상호작용 시 스크롤바의 외관을 변경합니다.

다음은 모든 것을 통합한 예제입니다:

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

이렇게 하면 cool-scroll 클래스가 있는 모든 요소에 슬릭하고 현대적인 스크롤바가 생성됩니다. 스크롤바는 기본보다 약간 더 두껍고, 둥근 모서리를 가지고 있으며, 호버할 때 어둡게 변합니다.

CSS 스크롤바 관련 속성

우리는 WebKit 브라우저(Chrome와 Safari와 같은)에 대해 집중해 왔지만, 다른 브라우저에서도 작동하는 표준 CSS 속성이 있습니다. 다음은 이 속성들의 표입니다:

속성	설명
scrollbar-width	스크롤바의 너비를 설정합니다 (Firefox 전용)
scrollbar-color	스크롤바의 색상을 설정합니다 (Firefox 전용)
overflow	콘텐츠가 요소의 상자를 넘칠 때 어떻게 처리할지 지정합니다
overflow-x	콘텐츠가 요소의 콘텐츠 영역의 왼쪽/오른쪽 가장자리를 넘칠 때 어떻게 처리할지 지정합니다
overflow-y	콘텐츠가 요소의 콘텐츠 영역의 상단/하단 가장자리를 넘칠 때 어떻게 처리할지 지정합니다

다음은 이러한 속성을 사용하는 예제입니다:

/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* 다른 브라우저 */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

이 코드는 다양한 브라우저에서 일관된 스크롤바 스타일을 설정합니다. 얇고, 트랙은 연한 색상이고 썸은 어두운 색상입니다.

그렇게 해서 여러분은 CSS 기술을 레벨 업시키고 스크롤바를 스타일링하는 법을 배웠습니다. 강력한 힘을 가지게 되었으니, 이 기술을 사용하여 사용자 경험을 향상시키는 데 신중하게 사용하세요. 과도하게 사용하면 사용자를 방해하거나 인터페이스를 사용하기 어렵게 만들 수 있습니다.

계속 실험하고, 배우고, 가장 중요한 것은 즐기세요! 누가 알겠는가, 다음 큰 웹 디자인 트렌드는 여러분의 독특한 스타일링된 스크롤바일 수 있습니다. 행복하게 코딩하세요!

Credits: Image by storyset