반응형
css만 사용해서 체크 박스로 토글 버튼을 만드는 방법입니다.
<body>
<div class="content_wrap">
<input type="checkbox" class="toggle_check" id="toggle">
<label class="toggle_item" for="toggle">
<div class="toggle_bar">
<div class="toggle_btn">
</div>
</div>
</label>
</div>
</body>html 코드입니다.
input 태그를 checkbox 타입으로 만들어주고 id를 입력해줍니다.
label 태그를 만들고 for에 input에 사용한 id를 입력합니다.
label 태그 안에 토글 버튼에 사용할 부분을 만들어 줍니다.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.toggle_bar {
width: 120px;
height: 60px;
background-color: #ff4d4d;
border-radius: 60px;
position: relative;
top: 0;
left: 0;
transition: all ease 0.3s;
}
.toggle_btn {
width: 52px;
height: 52px;
background-color: #ffffff;
border-radius: 60px;
position: absolute;
top: 4px;
left: 4px;
transition: all ease 0.3s;
}css로 스타일을 작성해줍니다.
스타일을 작성하면 위의 이미지처럼 스타일이 적용됩니다.
아직 스타일을 작성하지 않아 체크 박스를 체크해도 변경 사항이 없습니다.
.toggle_check:checked ~ .toggle_item > .toggle_bar {
background-color: #4dff91;
transition: all ease 0.3s;
}
.toggle_check:checked ~ .toggle_item .toggle_btn {
left: 64px;
transition: all ease 0.3s;
}체크 박스가 체크되어 있을 경우의 스타일을 작성해주겠습니다.
형제 선택자를 사용해 체크 박스가 체크되었을 때 스타일이 변하도록 만들어줍니다.
이제 체크 박스가 체크되면 스타일이 변경되어 토글 버튼이 만들어집니다.
<input type="checkbox" class="toggle_check" id="toggle" hidden>마지막으로 체크 박스에 hidden 넣어서 체크 박스가 보이지 않도록 만들어 주면 토글 버튼이 완성됩니다.
깃허브 코드입니다.
https://github.com/Sungwoon95/front_css/tree/main/checkbox_toggle
GitHub - Sungwoon95/front_css
Contribute to Sungwoon95/front_css development by creating an account on GitHub.
github.com
반응형
'코딩 > CSS' 카테고리의 다른 글
| [CSS] 글자에 테두리 넣는 방법 텍스트에 스트로크 넣는 방법 (0) | 2025.04.14 |
|---|---|
| 반응형 웹 사이트를 구현하는 방법 (0) | 2024.01.10 |
| [CSS3]가상 요소 선택자 (pseudo-element) 정리 (0) | 2021.12.07 |
| [CSS] CSS 인접 선택자 정리 (0) | 2021.11.23 |
댓글