스크롤바를 커스터마이징하는 6가지 예제를 제공하겠습니다. 각 예제에는 CSS와 HTML 코드가 포함되어 있습니다.
예제 1: 기본 스크롤바 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스크롤바 스타일 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #888;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* 내용 영역 스타일 */
.content {
height: 400px;
overflow-y: scroll;
}
</style>
<title>기본 스크롤바 스타일</title>
</head>
<body>
<div class="content">
<!-- 스크롤 가능한 내용 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>
</body>
</html>
이 예제는 기본 스크롤바 스타일을 보여줍니다. ::-webkit-scrollbar와 관련된 CSS 속성을 사용하여 스크롤바의 모양을 조절하고, .content 클래스를 사용하여 내용 영역에 스크롤이 적용되도록 합니다.
예제 2: 커스텀 색상 스크롤바
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 커스텀 색상 스크롤바 스타일 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #3498db;
}
::-webkit-scrollbar-thumb:hover {
background-color: #2980b9;
}
/* 내용 영역 스타일 */
.content {
height: 400px;
overflow-y: scroll;
}
</style>
<title>커스텀 색상 스크롤바</title>
</head>
<body>
<div class="content">
<!-- 스크롤 가능한 내용 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>
</body>
</html>
이 예제는 커스텀 색상의 스크롤바를 만드는 방법을 보여줍니다. ::-webkit-scrollbar-thumb와 ::-webkit-scrollbar-thumb:hover를 사용하여 스크롤바의 색상을 지정합니다.
예제 3: 스크롤바 숨기기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 스크롤바 숨기기 */
::-webkit-scrollbar {
width: 0;
}
/* 내용 영역 스타일 */
.content {
height: 400px;
overflow-y: scroll;
}
</style>
<title>스크롤바 숨기기</title>
</head>
<body>
<div class="content">
<!-- 스크롤 가능한 내용 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>
</body>
</html>
이 예제는 스크롤바를 숨기는 방법을 보여줍니다. ::-webkit-scrollbar의 너비를 0으로 설정하여 스크롤바를 숨깁니다.
예제 4: 원형 스크롤바
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 원형 스크롤바 스타일 */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #e74c3c;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #c0392b;
}
/* 내용 영역 스타일 */
.content {
height: 400px;
overflow-y: scroll;
}
</style>
<title>원형 스크롤바</title>
</head>
<body>
<div class="content">
<!-- 스크롤 가능한 내용 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>
</body>
</html>
이 예제는 원형 스크롤바를 만드는 방법을 보여줍니다. border-radius 속성을 사용하여 스크롤바를 원형으로 만듭니다.
예제 5: 그래디언트 스크롤바
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 그래디언트 스크롤바 스타일 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: linear-gradient(to right, #3498db, #e74c3c);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(to right, #e74c3c, #3498db);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to right, #3498db, #e74c3c);
}
/* 내용 영역 스타일 */
.content {
height: 400px;
overflow-y: scroll;
}
</style>
<title>그래디언트 스크롤바</title>
</head>
<body>
<div class="content">
<!-- 스크롤 가능한 내용 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>
</body>
</html>
이 예제는 그래디언트 배경을 가진 스크롤바를 만드는 방법을 보여줍니다. linear-gradient를 사용하여 스크롤바의 배경을 그래디언트로 지정합니다.
예제 6: 이미지 스크롤바
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 이미지 스크롤바 스타일 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-image: url('scrollbar-thumb.png');
background-size: cover;
}
/* 내용 영역 스타일 */
.content {
height: 400px;
overflow-y: scroll;
}
</style>
<title>이미지 스크롤바</title>
</head>
<body>
<div class="content">
<!-- 스크롤 가능한 내용 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 모바일 네비게이션: 모바일 화면용 네비게이션 디자인. (0) | 2023.12.23 |
|---|---|
| 투명 버튼: 투명한 배경을 가진 버튼 디자인. (0) | 2023.12.23 |
| 다중 열 텍스트: 다중 열 텍스트 레이아웃 구현. (0) | 2023.12.23 |
| 타이포그래피 스타일링: 텍스트 타이포그래피 스타일 조절. (0) | 2023.12.23 |
| 비디오 배경: 비디오 배경 설정. (0) | 2023.12.23 |
