bskyvision RSS 태그 관리 글쓰기 방명록
2021-01-06 18:05:41
728x90

기본 스크롤바는 다음과 같이 생겼습니다. 

 

 

스크롤바를 좀 더 이쁘게 꾸미고 싶다면, ::-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

 

 

웹사이트의 디자인에 따라 어울리는 스크롤바의 모습은 꽤 다를 수 있으니, 이상의 내용을 참고해서 꾸며주시면 될 것 같습니다. 

 

 

 

댓글

방문해주신 모든 분들을 환영합니다.

* 글을 읽던 중에 궁금했던 부분은 질문해주세요.

* 칭찬, 지적, 의문, 격려, 감사표현 등을 남겨주세요.

* 최대한 답변 드리도록 노력하겠습니다.

* 욕설과 광고를 담은 댓글은 가차없이 삭제합니다.


guest@이름 ~$
guest@패스워드 ~$
guest@홈페이지주소작성 ~$

guest@댓글작성 ~$




bskyvision. Designed by bskyvision.