Eveningstar

반응형 웹사이트를 만들면서, 기존의 디자인 체크박스를 웹접근성 심사에 통과시키기위해서 만들었던 방법을 처음과 완전히 다르게 고쳐야했다.ㅜㅜ 그래서 이 기회에 체크박스 디자인에 대해 정리해보려고한다. 디자인 체크박스를 만들기위해서는 브라우저별로 checkbox의 디자인이 다르기 때문에 똑같이 만들기위해서는 기본 checkbox에 디자인css를 다시 넣어주어야한다. 우선 브라우저별로 checkbox 디자인을 비교해보았다. 차례대로 포커싱 상태 , 체크된 상태, 기본상태이다. 크롬을 제외하고는 포커싱될때 점선으로 표시된다. checkbox와 포커싱 선의 간격을 조정하려면 padding값을 바꾸면 되는데, 보다시피 firefox가 기본적으로 padding이 있어서 나는 사용하지 않았다. 1) label로 che..