Css 체크박스 동그라미 - css chekeubagseu dong-geulami

Question

코드

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid #999;
    appearance: none;
    cursor: pointer;
    transition: background 0.2s;
  }

  input[type="checkbox"]:checked {
    background: #32e732;
    border: none;
  }

코드 풀이

해당 코드의 핵심은 appearance 속성입니다.

그냥 border-radius 속성을 적용할 시 checkbox 타입을 가진 input은 모양이 바뀌지 않습니다.

위 속성은 네이티브로 지원되는 모양들을 해제하거나 추가할 때 이용할 수 있으며 라디오처럼 둥글게 만들거나 커스텀 시킬 때 사용합니다.

지금은 네이티브로 지정된 모양(checkbox)을 해제하기 위해 사용했습니다.

하지만 위 속성을 사용할 시 체크가 되었을 때의 모양도 사라지기에 체크가 되었을 때의 속성을 지정해 줘야 합니다.

** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.

https://www.youtube.com/watch?v=zaW5D-h6eP4

이번 강좌에서는 체크박스 모양변경을 하도록 하겠습니다.

원래 체크박스는 크기만 변경되고 모양이 변경되지 않습니다.

출처 : https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com

하지만 사이트들을 보면, 체크박스 모양이 다채롭습니다.

이것은 CSS Trick을 사용한 것입니다. 그래서 같이 보도록 하겠습니다.

1. 체크박스 모양변경 - CSS 특수문자 사용

## HTML 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>체크박스 모양변경</title>
        <style>
            
        </style>
    </head>
    <body>
        <form action="#">
            <!--label태그는 체크박스를 누르지 않아도 연결된 체크박스를 체크해줌-->
            <label for="chk">
                <input type="checkbox" id="chk">
                <!--실제로는 글자를 기울이는 태그, 퍼블리셔들이 아이콘담을 때 많이 사용-->
                <i class="circle"></i>
                <span class="text">아이디 저장하기</span>
            </label>
        </form>
    </body>
</html>

- <form> 태그 내부에 작성했습니다.

- <label> 태그는 <input> 태그와 이어져 <label> 내부에 있는 모든 요소를 클릭하면 <input> 도 체크됩니다.

- 그리고 <i> 태그는 원래 글자를 기울이는 태그인데, 개발자들이 아이콘이나 기호를 담을 때도 많이 씁니다.

icon의 i자와 같아서 그런 것 같습니다.

## CSS코드

form{ padding: 10px; }
.circle{
    display: inline-block; /* 영역적용가능해짐 */
    width: 20px; height: 20px;
    border: 2px solid #333;
    box-sizing: border-box;
    border-radius: 10px; /* 모서리둥글게 처리 */
    position: relative; top: 4px;
    cursor: pointer; /* 마우스 올렸을때 손모양 처리 */
}
.circle:after{
    content: '\2714'; /* 체크박스 특수문자 */
    font-size: 24px; color: #333;
    position: absolute; top: -14px; left: 0;

    opacity: 0; /* 처음엔 안보이게 처리 */
    transition: 0.2s; /* CSS변화에 시간차 처리 */
}

/* input이 체크되면 특수문자 보이게 처리 */
#chk:checked + .circle:after{ opacity: 1; }

/* 체크박스는 display:none;을 주면 데이터 처리가 안됨 */
#chk{ position: absolute; left: -999em; }

- .circle 클래스를 체크박스를 담는 박스로 처리를 합니다.

영역이 들어가도록 display: inline-block; 으로 변경하였습니다.

- .circle:after 선택자에 CSS특수문자로 체크박스를 처리했습니다. 그리고 안보이게 처리합니다.

처음부터 보이면 안되기 때문입니다.

- #chk:checked + .circle:after{ opacity: 1; } 를 처리해서 체크박스가 체크되면 체크모양이 보이게 처리합니다.

- 그리고 체크박스는 화면에서 보이지 않도록 화면 밖으로 날려줍니다.

2. 체크박스 모양변경 - 배경이미지

check_gray.png

0.00MB

check_white.png

0.00MB

출처 : https://icon-icons.com/icon/check-checklist-complete-done-mark/113406

## HTML 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>체크박스 모양변경</title>
        <style>
            
        </style>
    </head>
    <body>
        <form action="#">
            <!--label태그는 체크박스를 누르지 않아도 연결된 체크박스를 체크해줌-->
            <label for="chk">
                <input type="checkbox" id="chk">
                <!--실제로는 글자를 기울이는 태그, 퍼블리셔들이 아이콘담을 때 많이 사용-->
                <i class="circle"></i>
                <span class="text">아이디 저장하기</span>
            </label>
        </form>
    </body>
</html>

- html코드는 위코드와 같습니다.

## CSS코드

form{ padding: 10px; }
.circle{
    display: inline-block; /* 영역적용가능해짐 */
    width: 20px; height: 20px;
    border: 2px solid #666;
    box-sizing: border-box;
    border-radius: 10px; /* 모서리둥글게 처리 */
    position: relative; top: 4px;
    cursor: pointer; /* 마우스 올렸을때 손모양 처리 */

    background-image: url(check_gray.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}

#chk:checked + .circle{
    background-color: navy;
    border-color: navy;
    background-image: url(check_white.png);
}


/* 체크박스는 display:none;을 주면 데이터 처리가 안됨 */
#chk{ position: absolute; left: -999em; }

- .circle:after 는 없습니다. 배경이미지로 처리할것이기 때문에 .circle 에 처리합니다.

- 배경이미지로 처리하고 CSS적 설정을 맞춰줍니다.

- 그리고 #chk:checked + .circle{ } 체크됐을 때 변하는 것도 .circle 입니다.