목차
1.필요한 요소
2. label태그로 체크박스 모양 만들기
3. label 체크박스를 원형으로 만들기
4. 원형 체크박스 안에 v표시할 가상요소를 추가
5. 가상요소 각도 기울기 바꾸기
6. V자 위치 조정하기
7. Input의 체크박스
우리는 웹사이트를 이용하다보면 checkbox가 ihtml을 배우다가 알게된input태그의 checkbox와 모양이 다른 경우를 볼 수 있다.
아래의 경우를 보면 왼쪽은 input의 체크박스, 오른쪽은 카카오톡의 체크박스이다.
똑같이 만들려면 단순히 모서리를 둥글게 깎는다면 원하는 모양이 나올까?원형 체크박스를 만들기 위해 모서리를 둥글게 해주는 속성인 border-radius속성을 사용해보았다
결과는 변하지 않았다. 왜 그럴까?
웹 브라우저가 checkbox 요소를 브라우저의 기본 스타일과 동작에 따라 자동으로 표시하기 때문에 개발자가 임의로 바꿀 수 없다.
그렇다면 무조건 바꿀 수 없는 건가? 카카오톡은 어떻게 만들 수 있었을까?
카카오톡에서는 어떻게 만들었는지 정확히 알 수 없겠지만 바꾸는 방법이 있다.
그 방법을 알아보자.
1. 필요한 요소
1) 타입이 checkbox인 input 요소
- <input type=‘checkbox’ id=‘체크박스ID’>
- 실제 체크이벤트가 발생되는 체크박스
2) 실제 체크박스를 대신하여 원형 체크박스가 될 label
- <label for=‘체크박스ID’></label>
- 체크박스로 사용할 것이기 때문에 텍스트는 작성하지 않는다.
- input 체크박스가 체크되는 이벤트에 맞춰 같이 체크되는 표시하기 위해 id로 매칭
3) 해당 체크박스가 무슨 용도인지 나타낼 label
- <label for=‘체크박스ID’>체크박스</label>
2. label태그로 체크박스 모양 만들기
원형으로 만들기 위해서는 가로와 세로의 길이를 지정할 수 있어야 한다.
그러나 label태그는 인라인 속성이므로 각 길이를 지정하여도 무시된다. 그래서 블록형으로 만들어야한다. 하지만 display를 block속성으로 바꾸면 다음에 오는 라벨이 체크박스 아래로 내려가 원하는 모양이 나오지 않는다.
따라서 블록이지만 자신이 차지하는만큼 영역이 잡히는 inline-block으로 바꿔준 후 길이를 지정해준다.
아직은 모양만 만들어서 그런지 체크 이벤트에도 반응이 없다. 이벤트에 따라 체크가 되는지 표시하게 만들어보자.
실제 체크박스에 체크 이벤트가 발생했을 때 label 체크박스에 색상이 변하도록 했다.
3. label 체크박스를 원형으로 만들기
기존에 지정했던 스타일에 모서리를 깎는 border-radius속성을 추가했다. 슬슬 원하는 모양이 나오는 것 같다. 사실 이대로 끝내도 체크가 되는 것이 확인되기 때문에 상관은 없지만 좀 더 확실히 하기 위해 원 안에 v표시를 넣고 싶다. 가상요소를 통해 원 안에 v표시를 하도록 한다.
4. 원형 체크박스 안에 v표시할 가상요소를 추가
원형 체크박스가 체크가 됐을 때 v표시가 보여주기 위해 체크 이벤트가 발생했을 때 가상요소를 추가하도록 한다. 가상요소는 v표시를 위해 길이를 지정하면서 두선이 좌우로 나란히 있어야하기 때문에 inline-block으로 지정하고 길이는 설정한다.
가상요소를 추가하니 왼쪽 상단에 왠 이상한 선이 생겼다. 이제 저 선들의 모양을 바꿔 v표시로 만들겠다.
5. 가상요소 각도 기울기 바꾸기
rotate를 통해 체크박스 안의 선의 모양을 v의 반으로 만들었다. 원안의 선을 자세히 보면 하나인 줄 알았던 선이 두개였음을 확인할 수 있다. 나머지 하나의 선의 각도를 반대로 돌려 v자를 만들 수 있다
6. V자 위치 조정하기
왼쪽 하단에 만들어진 체크박스를 position을 사용하여 중앙쯤에 위치시켜 잘 보이도록 한다.
두개 선을 같은 위치로 옮기니 모양이 이상해졌다. 그래서 나머지 하나의 선을 더 움직여 v자 모양으로 다시 만들어준다.
7. Input의 체크박스 숨겨주기
이제 원형 체크박스가 완성됐다. 만들어진 원형 체크박스를 사용할 예정이니 기존 input 체크박스는 숨겨주도록 한다.
이제 원형 체크박스를 사용하여 값을 전달받을 수 있을 것이다.
V의 스타일이 마음에 들지 않는다면 길이와 위치를 다시 조정하여 수정할 수 있다.
물론 이외에도 원형 체크박스를 만드는 방법은 있겠지만 css만으로 만드는 방법 중 하나를 소개하였다. 이 정보를 가지고 다른 요소도 원하는대로 바꿔서 사용할 수 있을 것이다.