[CSS] 체크박스와 라디오버튼 디자인 기초
체크박스와 라디오버튼은 사용자가 선택할 수 있는 대상을 표현하는 폼 요소입니다.
선택적인 값을 표시하고, 선택된 값을 서버로 전송할 수 있는 단순한 기능을 하는 요소입니다. 그리고 이 선택된 값을 표시하는 상태를 "checked" 속성으로 표현을 합니다.
체크박스는 1개 이상의 선택된 항목을, 라디오버튼은 그룹에서 1개의 선택된 항목을 "checked" 속성으로 표현합니다.
중요한 것은 HTML 요소의 "checked" 속성을 CSS에서 접근할 수 있고, "checked" 상태 값에 따라 CSS 표현을 다르게 할 수 있는 점입니다.
사용자 선택에 의해 선택된 체크박스, 또는 라디오버튼은 상태가 달라지고 거기에 맞는 CSS를 개별적으로 적용할 수 있습니다. 작고, 파랑색으로만 선택되는 체크박스와 라디오버튼을 원하는 디자인으로 변경할 수도 있습니다.
1. 큰 체크박스 만들기
웹 브라우저에서 제공되는 체크박스와 라디오버튼은 크기가 다소 작습니다.
다음처럼 CSS를 적용하면 체크박스, 또는 라디오 박스의 체크 표시 영역 크기를 더 크게 만들 수 있습니다.
<div class="checkbox">
<input type="checkbox" name="check1" id="check1" value="1" class="checkbox1">
<label for="check1">큰체크박스</label>
<input type="radio" name="radio1" id="radio1" value="1" class="checkbox1">
<label for="radio1">큰라디오버튼</label>
</div>.checkbox input.checkbox1{
font-size: 1em;
width: 1.25em; /* 너비 설정 */
height: 1.25em; /* 높이 설정 */
vertical-align: middle;
}
.checkbox input.checkbox1 + label{ /* 라벨 텍스트 크기와 수직 정렬 맞춤 */
font-size: 1.125em;
vertical-align: middle;
}
2. 체크박스에 디자인 입히기
기본 체크박스와 라디오버튼은 검정색 테두리만 있는 기본 상태에서 선택되면 파랑색으로 영역이 채워지는 단조로운 형태를 가집니다.
CSS를 활용하면 다음처럼 예쁜 체크박스, 또는 라디오버튼으로 탈바꿈시킬 수 있습니다.
<div class="checkbox">
<input type="checkbox" name="check2" id="check2" value="2" class="checkbox2">
<label for="check2">디자인체크박스</label>
</div>.checkbox2 + label{
position: relative;
}
.checkbox input[type="checkbox"].checkbox2{
display: none;
}
.checkbox input[type="checkbox"].checkbox2 + label:before { /* 체크박스 배경 */
display: inline-block;
content: '';
width: 1.25em;
height: 1.25em;
border: 2px solid #a66;
background-color: #a00;
border-radius: 50%;
margin: 0 5px -6px 0;
}
.checkbox input[type="checkbox"].checkbox2 + label:after { /* 체크 마크 */
position: absolute;
left: 4px;
content: '✔'; /* 체크 마크 ASCii 문자 */
font-size: 1.5em;
line-height: 0.8;
color: #a88;
transition: all .3s;
}
[type="checkbox"].checkbox2 + label:after { /* 기본 상태 - 투명에 크기 0 */
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked.checkbox2 + label:after { /* 체크 상태 - 불투명에 크기 1 */
opacity: 1;
transform: scale(1);
}3. 스마트폰 스위치버튼 만들기
CSS 속성과 가상 요소를 활용하면 모바일 기기들의 환경 설정 화면에서 많이 사용하는 온/오프 스위치 디자인 모양을 한 체크박스, 또는 라디오버튼을 만들 수 있습니다.
<div class="toggle">
<input type="checkbox" name="toggle1" id="toggle1" value="1">
<label for="toggle1">스위치</label>
</div>.toggle {
position: relative;
display: inline-block;
}
.toggle input {
display: none;
}
.toggle label {
display: block;
width: 48px;
height: 24px;
text-indent: -250%; /* 라벨 텍스트 왼쪽으로 이동*/
user-select: none; /* 라벨 텍스트 선택 차단 */
}
.toggle label::before,
.toggle label::after {
content: "";
display: block;
position: absolute;
cursor: pointer;
}
.toggle label::before { /* 배경 */
width: 100%;
height: 100%;
background-color: #dedede;
border-radius: 1em;
-webkit-transition: background-color 0.25s ease;
transition: background-color 0.25s ease;/* 배경색 애니메이션*/
}
.toggle label::after { /* 스위치 */
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
-webkit-transition: left 0.25s ease;
transition: left 0.25s ease; /* 스위치 이동 애니메이션 */
}
.toggle input:checked + label::before {
background-color: skyblue; /* 켠 상태 배경색 */
}
.toggle input:checked + label::after { /* 켠 상태 스위치 위치 */
left: 24px;
}4. 이미지/아이콘 토글하기
체크박스, 또는 라디오버튼을 이용해 이미지, 아이콘을 변경하는 동작을 만들 수 있습니다.
앞서 만들었던 체크박스, 또는 라디오버튼 동작에 반응해 추가로 표시될 이미지/컨텐츠를 붙이면 반응형으로 컨텐츠를 표시할 수도 있습니다.
체크박스와 라디오버튼 UI를 만드는 기본 구조는 다음 HTML 구현처럼 "input + label + content" 3개로 만드는 것을 기본으로 합니다. "<input>" 태그 바로 뒤에 클릭할 텍스트를 표시하는 "<label>" 태그가 오고, 그 뒤에 붙어서 ".content" 클래스를 가진 "<div>" 블록 태그가 옵니다.
<div class="toggle2">
<input type="checkbox" id="toggle2">
<label for="toggle2">온/오프</label>
<div class="content"></div>
</div>.toggle2 input{
display: none;
}
.toggle2 label { /* 스위치 텍스트 버튼 */
background-color: #a00;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 1rem;
user-select: none;
cursor: pointer;
}
.toggle2 .content::after { /* 동작 기본 아이콘/이미지 */
content: "☀"; /* 온/오프 ASCii 아이콘 */
color: #e0e0e0;
font-size: 6em;
}
.toggle2 input:checked + label + .content::after { /* 체크 상태 이미지 */
content: "☀";
color: yellow;
}
체크박스나 라디오버튼을 이용해 구현하는 대부분의 반응형 UI는 "input + label + content" 구조를 기준으로 만들어집니다.
앞의 예처럼 "<input><label></label><div></div>" 구조로 한 덩어리로 묶어서 UI 1가지를 구현한다고 이해를 하면 쉽습니다.
- "<input>" 태그는 대부분의 디자인 UI 구현에서 감춤 처리되며, 아무런 기능을 하지 않습니다.
- 실제 클릭을 하는 동작을 위한 텍스트, 아이콘/이미지는 "<label>" 태그를 이용해 표현합니다. 텍스트 외에 라벨 태그 앞/뒤에 가상 요소(Pseudo Element - ::before/::after)를 추가해서 다양한 디자인을 구현할 수 있습니다.
- 라벨 태그를 클릭하면 별도로 표시할 이미지, 컨텐츠가 있을 경우 ".content" 클래스를 가진 요소에 담게됩니다.
앞서의 예에서는 표시할 컨텐츠용 이미지를 아스키 코드 문자를 가상 요소를 이용해 붙였지만 "background-image: url();" 속성이나, "content: url();" 속성을 이용해 텍스트 대신 이미지를 붙일 수도 있습니다.
5. 이미지 선택 목록 만들기
라디오버튼을 활용해 여러 개의 아이콘/이미지 목록에서 하나를 클릭하면 활성화되어 표시되는 선택 옵션을 만들 수 있습니다. 쇼핑몰 상품 옵션, 질문 유형, 프로필 정보 선택 사항, 환경설정 선택 사항 등 다양한 용도에 사용할 수 있습니다.
<div class="toggle3">
<input type="radio" id="toggle3-1" name="weather">
<label for="toggle3-1">☀</label>
<input type="radio" id="toggle3-2" name="weather">
<label for="toggle3-2">☁</label>
<input type="radio" id="toggle3-3" name="weather">
<label for="toggle3-3">☂</label>
<input type="radio" id="toggle3-4" name="weather">
<label for="toggle3-4">☃</label>
</div> .toggle3 input[type=radio]{
display: none;
}
.toggle3 input[type=radio] + label {
color: #e0e0e0;
font-size: 5em;
}
.toggle3 input[type=radio]:checked + label {
color: #000;
}사용된 예제는 다음 압축 파일을 다운로드 받아서 확인할 수 있습니다.