토글 스위치를 디자인 커스터마이징하는 6가지 예제를 제시하겠습니다. 각 예제는 HTML 및 CSS 코드와 함께 주석으로 설명되어 있습니다.
예제 1: 기본 토글 스위치
<!DOCTYPE html>
<html>
<head>
<style>
/* 기본 토글 스위치 스타일 */
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
border-radius: 15px;
transition: 0.4s;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .toggle-switch .slider {
transform: translateX(30px);
}
</style>
</head>
<body>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
이 예제는 기본 토글 스위치를 만듭니다. HTML과 CSS를 사용하여 스위치를 디자인하고, 체크됐을 때 슬라이더를 이동시킵니다.
예제 2: 컬러 토글 스위치
<!DOCTYPE html>
<html>
<head>
<style>
/* 컬러 토글 스위치 스타일 */
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
background-color: #3498db;
border-radius: 15px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
border-radius: 15px;
transition: 0.4s;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .toggle-switch .slider {
transform: translateX(30px);
}
</style>
</head>
<body>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
이 예제는 컬러 토글 스위치를 만듭니다. 배경 색상을 변경하여 스위치를 디자인하고, 체크됐을 때 슬라이더를 이동시킵니다.
예제 3: 큰 토글 스위치
<!DOCTYPE html>
<html>
<head>
<style>
/* 큰 토글 스위치 스타일 */
.toggle-switch {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
background-color: #ccc;
border-radius: 25px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
border-radius: 25px;
transition: 0.4s;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .toggle-switch .slider {
transform: translateX(50px);
}
</style>
</head>
<body>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
이 예제는 큰 토글 스위치를 만듭니다. 넓은 스위치와 슬라이더를 만들고, 체크됐을 때 슬라이더를 이동시킵니다.
예제 4: 원형 토글 스위치
<!DOCTYPE html>
<html>
<head>
<style>
/* 원형 토글 스위치 스타일 */
.toggle-switch {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
background-color: #ccc;
border-radius: 50%;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
border-radius: 50%;
transition: 0.4s;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .toggle-switch .slider {
transform: translateX(20px);
}
</style>
</head>
<body>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
이 예제는 원형 토글 스위치를 만듭니다. 원형 모양의 스위치와 슬라이더를 만들고, 체크됐을 때 슬라이더를 이동시킵니다.
예제 5: 그림자 토글 스위치
<!DOCTYPE html>
<html>
<head>
<style>
/* 그림자 토글 스위치 스타일 */
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
border-radius: 15px;
transition: 0.4s;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .toggle-switch .slider {
transform: translateX(30px);
}
</style>
</head>
<body>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
이 예제는 그림자가 있는 토글 스위치를 만듭니다. box-shadow 속성을 사용하여 그림자를 추가하고, 체크됐을 때 슬라이더를 이동시킵니다.
예제 6: 커스텀 아이콘 토글 스위치
<!DOCTYPE html>
<html>
<head>
<style>
/* 커스텀 아이콘 토글 스위치 스타일 */
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3498db;
border-radius: 15px;
transition: 0.4s;
}
.slider::before {
content: "\f00d"; /* Font Awesome 아이콘 코드 */
font-family: FontAwesome;
font-size: 16px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .toggle-switch .slider {
background-color: #27ae60;
}
input[type="checkbox"]:checked + .toggle-switch .slider::before {
content: "\f00c"; /* Font Awesome 아이콘 코드 */
color: white;
}
</style>
</head>
<body>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
이 예제는 커스텀 아이콘을 가진 토글 스위치를 만듭니다. Font Awesome 아이콘을 사용하여 슬라이더 위에 아이콘을 표시하고, 체크됐을 때 아이콘과 슬라이더 색상을 변경합니다.
'CSS' 카테고리의 다른 글
| 풀 페이지 스크롤: 풀 페이지 스크롤 디자인. (0) | 2023.12.23 |
|---|---|
| 드롭다운 메뉴 스타일링: 드롭다운 메뉴 디자인. (0) | 2023.12.23 |
| 오버레이 효과: 요소에 오버레이(뒷 배경 불투명도) 효과 추가. (0) | 2023.12.23 |
| 푸터 고정: 푸터를 페이지 하단에 고정. (0) | 2023.12.23 |
| 슬라이더 스타일링: 이미지 슬라이더 스타일링. (0) | 2023.12.23 |