오늘 코딩테스트 보고 왔는데
문제 파일이 줄코딩으로 되어 있어서 1차 당황
자동완성 기능 안되어 있어서 2차 당황
결국 무조건 아는 쉬운 문제 하나 제대로 구현 못해서 속상 ;-;
그래서 집에서 복기중 ~
같은 실수는?
반복하지 말자^0^
서론이 길었다.
input 태그를 쓰다보면 커스텀해서 써야하는 경우가 대부분인데(원래 input 너무 못생김)
label과 연동해서 css로 디자인 짜는 방법도 있지만 간단하게 이미지로도 교체 가능!
<section class="inputTest">
<input type="checkbox" class="checkBtn" id="check_01">
<label for="check_01" class="checkBtn"></label>
<input type="radio" class="radioBtn" id="radio_01" name="radioBtn">
<label for="radio_01" class="radioBtn"></label>
<input type="radio" class="radioBtn" id="radio_02" name="radioBtn">
<label for="radio_02" class="radioBtn"></label>
</section>
이렇게 간단하게 html 작성해줬다.
input과 id와 label for 값을 맞춰주어 연동시켜준 뒤
radio태그는 둘 중 하나만 선택되어야 하니까 name으로 한 번 더 묶어줌
.inputTest input{
display: none;
}
.inputTest label{
display: inline-block;
width: 30px;
height: 30px;
margin-left: 20px;
}
.inputTest .checkBtn{
background: url(/images/check-mark.png) no-repeat center center;
background-size: cover;
}
.inputTest .radioBtn{
background: url(/images/radio-button.png) no-repeat center center;
background-size: cover;
}
.inputTest input[type="checkbox"]:checked ~ label[for="check_01"]{
background: url(/images/checked.png) no-repeat center center;
background-size: cover;
}
.inputTest input[type="radio"]:checked + label.radioBtn{
background: url(/images/radio.png) no-repeat center center;
background-size: cover;
}
css 작성해줬다
원래 있던 못생긴 input은 숨겨주고
label은 inline 요소이기 때문에 수치를 정할 수 있는 block or inline-block으로 바꿔줘야 함
label에 체크 안되었을 때의 배경 이미지를 넣어주고
input요소가 :checked 되면 label 이미지를 변경해주면 되는데
이 때 radio 버튼 같은 경우 두개이기 때문에 ' + ' 를 사용해 인접선택자로 선택해주어야 제대로 적용!!
구현 영상
집에서 짜니까 5분도 안걸렸다 힝 ~