Dev/HTML, CSS
[css] 스크롤바 예쁘게 꾸미기
bskyvision.com
2021. 1. 6. 18:05
기본 스크롤바는 다음과 같이 생겼습니다.
스크롤바를 좀 더 이쁘게 꾸미고 싶다면, ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-track 등의 의사요소(또는 가상요소)를 다뤄야 합니다.
스크롤바의 너비를 5px로, 스크롤바의 색은 검정으로, 스크롤바의 트랙 색상은 노란색으로 해보겠습니다. 코드는 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#test {
width: 200px;
height: 400px;
overflow: auto;
}
#test::-webkit-scrollbar {
width: 5px; /*스크롤바의 너비*/
}
#test::-webkit-scrollbar-thumb {
background-color: black; /*스크롤바의 색상*/
}
#test::-webkit-scrollbar-track {
background-color: yellow; /*스크롤바 트랙 색상*/
}
</style>
</head>
<body>
<div id="test">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto labore magni architecto provident adipisci assumenda, neque voluptas ut expedita deleniti delectus quae magnam dolores itaque, fugiat id quia omnis ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ab debitis, harum voluptatibus officiis modi tempora eligendi minus vel facilis ratione hic commodi, atque quos doloribus id quo nobis optio? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto labore magni architecto provident adipisci assumenda, neque voluptas ut expedita deleniti delectus quae magnam dolores itaque, fugiat id quia omnis ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ab debitis, harum voluptatibus officiis modi tempora eligendi minus vel facilis ratione hic commodi, atque quos doloribus id quo nobis optio? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto labore magni architecto provident adipisci assumenda, neque voluptas ut expedita deleniti delectus quae magnam dolores itaque, fugiat id quia omnis ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ab debitis, harum voluptatibus officiis modi tempora eligendi minus vel facilis ratione hic commodi, atque quos doloribus id quo nobis optio? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto labore magni architecto provident adipisci assumenda, neque voluptas ut expedita deleniti delectus quae magnam dolores itaque, fugiat id quia omnis ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ab debitis, harum voluptatibus officiis modi tempora eligendi minus vel facilis ratione hic commodi, atque quos doloribus id quo nobis optio?
</div>
</body>
</html>
|
cs |
위 코드로 만들어진 스크롤바는 다음과 같습니다.
이번에는 저 나름대로 좀 더 예쁘게 꾸며보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#test {
width: 200px;
height: 400px;
overflow: auto;
background-color: #1E1E1E;
color: white;
padding: 5px;
}
#test::-webkit-scrollbar {
width: 20px; /*스크롤바의 너비*/
}
#test::-webkit-scrollbar-thumb {
background-color: yellow; /*스크롤바의 색상*/
background-clip: padding-box;
border: 4px solid transparent;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#test::-webkit-scrollbar-track {
background-color: grey; /*스크롤바 트랙 색상*/
}
</style>
</head>
<body>
<div id="test">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto labore magni architecto provident adipisci assumenda, neque voluptas ut expedita deleniti delectus quae magnam dolores itaque, fugiat id quia omnis ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ab debitis, harum voluptatibus officiis modi tempora eligendi minus vel facilis ratione hic commodi, atque quos doloribus id quo nobis optio? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto labore magni architecto provident adipisci assumenda, neque voluptas ut expedita deleniti delectus quae magnam dolores itaque, fugiat id quia omnis ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ab debitis, harum voluptatibus officiis modi tempora eligendi minus vel facilis ratione hic commodi, atque quos doloribus id quo nobis optio? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto labore magni architecto provident adipisci assumenda, neque voluptas ut expedita deleniti delectus quae magnam dolores itaque, fugiat id quia omnis ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ab debitis, harum voluptatibus officiis modi tempora eligendi minus vel facilis ratione hic commodi, atque quos doloribus id quo nobis optio? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto labore magni architecto provident adipisci assumenda, neque voluptas ut expedita deleniti delectus quae magnam dolores itaque, fugiat id quia omnis ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ab debitis, harum voluptatibus officiis modi tempora eligendi minus vel facilis ratione hic commodi, atque quos doloribus id quo nobis optio?
</div>
</body>
</html>
|
cs |
웹사이트의 디자인에 따라 어울리는 스크롤바의 모습은 꽤 다를 수 있으니, 이상의 내용을 참고해서 꾸며주시면 될 것 같습니다.