자주 사용하는 체크박스 스타일을 커스텀하는 방법에 대해서 알아보도록 하겠습니다.
그전에 먼저 input과 label의 관계에 대해 알아보도록 하겠습니다.
💁🏻 input태그 - label태그
첫번째 방법 - input, label 분리
<input type="checkbox" id="chk">
<label for="chk">뷰 공부하기</label>input에 부여한 id값을 label에 for와 동일하게 적용하면 체크박스를 클릭할 때 뿐만 아니라, 라벨요소를 클릭할 때도 체크박스 동작이 됩니다.
두번째 방법 - label안에 input이 있는 형태
또한 id값 없이 사용하고 있을 때는 아래와 같이 label태그안에 input태그를 넣으면 됩니다.
<label>
<input type="checkbox">
</label>이제 진짜 체크박스를 커스텀 하는 방법에 대해서 알아보도록 하겠습니다.
1️⃣ 배경 이미지 사용
커머스 웹사이트에서 가져온 sprite이미지 입니다.
다양한 이미지들이 한 파일에 있어 아래 노란색으로 표시한 부분 사용하도록 하겠습니다.
개념은 아래와 같습니다.
✅ input 태그를 숨김처리합니다.
✅ label 태그안에 위의 이미지를 노출할 태그에 background와 position을 사용하여 디폴트 이미지를 노출합니다.
✅ input태그에 checked되었을 때 체크가 된 이미지의 position값으로 바꿉니다.
// input 태그를 숨김처리
input[id="list"] {
display: none;
}
// 체크박스 디폴트 이미지 적용
.checkbox_img {
display: inline-block;
width: 20px;
height: 20px;
background: url('https://s.wemep.co.kr/ui/v2.8.307/dist/pc/css/spr/common.png') 0 -438px no-repeat;
vertical-align: top;
}
// 체크되었을 때 background-position 변경
input[id="list"]:checked + label span {
background-position: -75px -438px;
}위와 같이 스타일 작업을 하면 아래와 같은 결과물을 확인할 수 있습니다.
2️⃣ 가상요소 사용
가상요소를 사용하여 체크하는 부분에 약간의 애니메이션을 주는 방법에 대해 알아보도록 하겠습니다.
개념은 아래와 같습니다.
✅ label안에 input과 text를 포함합니다.
✅ 체크전/후에 대해 위치를 잡고 크기 변화를 줍니다.
✅ 체크박스의 네모난 테두리는 span태그를 사용하고 안에 체크형태는 가상요소를 만들어줍니다.
✅ 체크형태에 처음 직선은 ::before로 만들고 두번째 직선은 ::after로 만들어줍니다.
(즉, 가상요소에 애니메이션 속성인 transition을 적용합니다.)
작업을 하기전 position과 transition에 대해 짚고 넘어가도록 하겠습니다.
🌟 position
체크박스 테두리에는 relatvie속성을 주고, 체크요소에는 테두리 기준으로 원하는 위치에
absolute를 통해 위치를 잡습니다.
🌟 transition
변화되는 속성값을 자연스러운 애니메이션으로 보여줄 수 있는 속성입니다.
icon이 될 영역에 체크전과 후에 회전과 위치값을 설정합니다.
먼저, html 코드부터 보겠습니다.
label태그가 그룹의 형태로 input,span등을 감싸고 있습니다.
<label class="checkbox">
<input type="checkbox">
<span class="checkbox_icon"></span>
<span class="checkbox_text"></span>
</label>css 코드입니다.
비교적 복잡하긴하지만 차근차근 알아보겠습니다.
// 체크박스 인풋은 숨김처리
.checkbox input {
display: none;
}
// 체크박스 테두리
.checkbox_icon {
display: inline-block;
width: 20px;
height: 20px;
background-color: transparent;
border: 1px solid red;
position: relative;
cursor: pointer;
}
// 체크박스 가상요소
.checkbox_icon::before, .checkbox_icon::after {
content: ''; // 가상요소 필수값
display: inline-block; // 크기 지정
width: 1px;
height: 0; // 체크박스가 체크가 되면 변화값으로 커지게 하기 위해 (일단 화면에는 나타나지 않음)
background-color: red;
position: absolute; // 체크박스 테두리 기준으로 위치조정 가능
transform-origin: left top; // 기울기 지정, 기준점을 왼쪽 상단 모서리로 (기본값은 중심임)
}
// 가상요소 before
.checkbox_icon::before {
top: 9px; // 위치값 top
left: 2px; // 위치값 left
transform: rotate(-45deg); // 회전값
}
// 가상요소 after
.checkbox_icon::after {
top: 16px; // 위치값 top
left: 9px; // 위치값 left
transform: rotate(-135deg); // 회전값
}
// 체크되었을 때 테투리 설정
.checkbox input:checked + .checkbox_icon {
border-color: red;
}
// 체크되었을 때 가상요소 before
.checkbox input:checked + .checkbox_icon::before {
height: 10px; // 높이값 지정
transition: all 0.15s ease; // 0.15초 변화시간 줌
}
// 체크되었을 때 가상요소 after
.checkbox input:checked + .checkbox_icon::after {
height: 20px; // 높이값 지정
transition: all 0.15s ease 0.15s; // 0.15초 변화시간 + 딜레이 시간 줌
}아래와 같은 결과물을 확인 할 수 있습니다.
gif로 녹화된 파일을 변환하면서 체크박스 애니메이션이 느리게 동작하는거 같은데, 실제 코드 동작하면 자연스러운 애니메이션을 확인할 수 있습니다!!
