꿀팁: 편한 CSS3 체크박스와 라디오버튼

() translation by (you can also view the original English article)

자바스크립트 없이 어떻게 체크박스와 라디오 버튼에 스타일을 적용할지 궁금한 적이 있나요?

폼 UI 요소로 사용할 이미지를 찾는다면 Envato 요소에서 사용할 수 있는 UI 키트를 한번 봐 보세요.

1. 과정 이해하기

CSS를 다루는 능력에 자신감은 차 있는데 좀 더 알고 싶어 하는 분들을 위해 이 튜토리얼에 있는 CSS 코드 중에 가장 중요한 부분이 여기에 있습니다.

1	input[type="checkbox"]:checked + label {
2
3	}

잘 모르겠다고 생각하시는 분들, 걱정하지 마세요. 계속 이어서 읽어보세요!

그럼, 주제로 돌아가겠습니다. 우리가 무엇을 할까요? CSS3에 있는 멋지고 작은 :checked 가상 선택자 덕분에 체크된(혹은 체크되지 않음) 상태가 된 요소를 대상으로 할 수 있습니다. 그다음, CSS2.1에 있는 인접 형제 선택자인 +를 이용해서 체크박스나 라디오에 바로 인접해 있는 요소를 대상으로 삼을 수 있습니다. 그 요소는 label입니다.

2. HTML 작성하기

(스타일 코드 다루는 작업을 더 선호하겠지만) HTML과 CSS 파일을 작성하는 것부터 시작해서 본격적으로 진행하겠습니다. 여러분이 작업 방식을 알 거로 생각하므로 넘어가겠습니다.

스스로 터득하게 할 목적으로 저는 이 방법을 체크박스에만 적용해 보여드리겠습니다. 라디오 버튼에 적용하는 방식도 같으며 소스 코드에 들어 있습니다.

좋습니다. 그러면 정말로 시작해 볼까요? checkbox input과 인접한 label을 제작하는 것에서 출발하겠습니다.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

<label> 요소에 대해 모르는 분을 위해 설명하면, label을 통해 input과 상호작용하기 위해서는 input과 label이 서로 연결되어야 합니다. for=""과 input의 ID를 사용하면 연결됩니다.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

저는 label 안에 <span>을 넣습니다. 다른 이유보다 취향에 가깝지만, 그 이유는 3단계에서 명확해집니다.

3. 여기 있는 이유: CSS

이제부터 재미있어집니다. 이 튜토리얼 전체에서 기본이 되는 작업이자 우리가 할 첫 번째 작업은 실제 체크박스를 숨기는 것입니다.

1	input[type="checkbox"] {
2	display:none;
3	}

체크박스를 보이지 않게 했으니까 label에 스타일을 적용하면 됩니다. label 안에 위치한 span이 더 정확하지요. 저는 체크박스 위치를 정확하게 제어하기 위해 이 방법을 씁니다. span을 쓰지 않으면 label에 직접 배경 이미지를 적용할 텐데요. 그렇게 하면 위치 잡는 일이 어려울 수 있습니다.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

위의 코드를 간단하게 설명하겠습니다. 먼저, background에 주목하세요. 여기 배경에 사용할 작은 스프라이트 이미지가 저에게 있습니다. 그러니까 저는 이 공간에 background 위치를 잡으면 됩니다. "스프라이트"마다 정확한 너비와 높이가 있습니다. 각각의 상태를 정의하기가 쉽습니다.

제 스타일을 돋보일 나머지 CSS가 여기에 있습니다. 이 스타일은 순전히 미적인 용도이며 제 감각이나 디자인에 맞춰져 있습니다.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. 제대로 작동하기

남은 작업이 많지 않습니다. 마무리해 보지요. 마지막으로 input이 체크되었을 때 요소의 상태를 보여줍니다. hover 상태도 마찬가지입니다. 너무 간단하니, 그저 보기만 하세요!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

스프라이트 이미지를 써서 background 위치를 바꿨다는 점에 유의하세요. 또한, 체크박스/라디오 버튼을 "체크"했을 때 해당 레이블에 스타일을 적용하려고 CSS3 :checked 가상 선택자를 사용했다는 점도 알아두세요.

브라우저 지원에 대한 메모

모든 브라우저에서 가상 선택자를 잘 지원하고 있습니다. 하지만 그렇지 않은 브라우저도 있는데, 그에 대한 적절한 대비책이 있습니다.

Can I use data for pseudo selectors — 전반적인 가상 선택자에 관한 Can I Use 자료

IE9 on Windows 7 — 브라우저 대비책: 윈도우즈7에서의 IE9

초창기 모바일 브라우저에서도 :checked 지원이 확실하지 않기 때문에 문제가 됩니다. 가령, 모바일 사파리 pre iOS6는 이 가상 선택자를 지원하지 않습니다.

결론

끝났습니다. 맞죠? 다시 한번 확인해 볼게요. 먼저, HTML입니다.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

여러분이 작업한 코드와 똑같지요? <span> 넣는 것을 기억하세요! 본인이 직접 테스트한다면, 이 부분에서 새롭거나 다양한 방법을 찾아볼 것을 권해드립니다. 여러분이 찾아낸 더 효율적인 코드를 보고 싶거든요. 이제는 CSS입니다.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

코드가 전부 있나요? 완벽하네요. 이 코드 중에 다수가 여기 데모 파일 용도로 제가 제작한 스타일에 맞춰 있다는 점을 유념하세요. 여러분이 직접 작성해보고 위치와 디자인을 바꿔가며 테스트해 보세요.

마지막으로, 이 튜토리얼에서 배울 가장 중요한 부분은 제가 맨 위에 적은 CSS의 맨 첫 줄입니다.

1	input[type="checkbox"]:checked + label {
2
3	}

그 코드를 이용해서 전혀 다른 체크박스/라디오 버튼을 만들 수 있습니다. :checked는 폼에서 체크박스와 라디오 외에도 쓰일 수 있습니다. 하지만 저는 여러분이 직접 이 선택자를 테스트해 보면 좋겠습니다. 아래 항목을 테스트해 보세요.

레티나 화면용으로 2x 스프라이트 이미지 추가하기
비트맵 말고 SVG 사용하기

이 글을 즐겨 봤으면 좋겠습니다. 그리고 여기서 배운 것을 자신의 것으로 만들고 더 발전하기를 바랍니다!