Programming/HTML & CSS
[HTML & CSS] 토글 스위치 버튼 만들기 #Toggle #Checkbox
dOuOb
2024. 7. 12. 11:23
# 토글스위치
토글스위치는 움직임이 있어 만들기 복잡할 거 같지만 CSS만으로도 간단하게 만들 수 있습니다.
1. HTML 작성
토글스위치는 checkbox와 label을 이용해 만들어줍니다.
<div class="toggle-switch">
<input type="checkbox" class="toggle-input" id="toggle" />
<label class="toggle-label" for="toggle"> </label>
</div>
더보기
💡 <label> 요소는 다른 요소의 이름표 역할을 합니다.
for 속성을 사용하여 다른 요소의 id 값을 지정함으로써 두 요소를 결합시킬 수 있습니다.
예를 들어, <label for="input_id">라벨</label> 과 <input id="input_id">가 있을 때
라벨을 클릭하면 해당 입력란이 선택되거나 동작할 수 있습니다.
→ checkbox와 함께 사용하면 라벨 클릭 시 체크박스가 on/off 되겠죠!
아무 스타일이 적용되지 않았을 땐 체크박스 부분만 달랑 나오게 됩니다.
2. CSS 작성
2.1 ) 기존의 checkbox 버튼 숨기기
.toggle-input {
display: none;
}
2.2 ) 토글스위치 바탕 만들기
라벨 스타일을 변경하여 토글스위치 모양을 만들어 줍니다.
.toggle-label {
position: relative;
display: block;
width: 40px;
height: 24px;
background-color: #ccc;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
}
- width : 토글 스위치 넓이
- height : 토글 스위치 높이
- background-color : 배경색
- transition : 토글 on / off 하면 배경색이 변경되는데 부드럽게 변하게 하기 위해 설정
2.3 ) 원 만들기
before속성을 사용하여 바탕 위에 원을 만들어줍니다
.toggle-label::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s ease;
}
원 만들 때 주의해야 하는 점은 바탕의 높이에 맞게 스타일을 설정해야 합니다!
- width , height : 원 넓이, 높이 (바탕의 높이보다 작게 설정)
- border-radius : 이 설정을 작게 하면 원 말고 사각형의 버튼 모양을 만들어 줄 수 있습니다
이렇게 까지 설정하면 거의 다 완성이지만 클릭했을 때 아무 반응이 없습니다!
2.4 ) 토글스위치 ON 스타일 만들기
/* 토글 ON 스타일 지정*/
.toggle-input:checked + .toggle-label {
background-color: #4caf50;
}
토글이 켜지면 변경할 배경색을 설정해 주고
/* 토글 ON인 경우에 버튼 위치 지정 */
.toggle-input:checked + .toggle-label::before {
transform: translateX(16px);
}
토글 버튼의 위치를 설정해 줍니다. (토글스위치의 width가 커지면 16px보다 더 크게)
3. 전체 코드
css와 html 파일을 나눠서 작성해도 되지만 저는 한 번에 보여드리기 위해 style태그를 사용했습니다
💡 토글 여러 개 사용할 땐 input의 id를 다르게 설정해 주세요!
<!DOCTYPE html>
<html>
<head>
<title>toggle</title>
<style>
/* 토글 */
.container{
margin:20px;
display:flex;
flex-direction: column;
}
/* 기존의 checkbox 버튼 숨기기 */
.toggle-input {
display: none;
}
/* 토글 스타일 지정*/
.toggle-label {
position: relative;
display: block;
width: 40px;
height: 24px;
background-color: #ccc;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 토글 버튼 스타일 지정 */
.toggle-label::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s ease;
}
/* 토글 ON 스타일 지정*/
.toggle-input:checked + .toggle-label {
background-color: #4caf50; /* 배경색 변경 */
}
/* 토글 ON인 경우에 버튼 위치 지정 */
.toggle-input:checked + .toggle-label::before {
transform: translateX(16px);
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" class="toggle-input" id="toggle" />
<label class="toggle-label" for="toggle"></label>
</div>
</body>
</html>