** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
https://www.youtube.com/watch?v=zaW5D-h6eP4
이번 강좌에서는 체크박스 모양변경을 하도록 하겠습니다.
원래 체크박스는 크기만 변경되고 모양이 변경되지 않습니다.
하지만 사이트들을 보면, 체크박스 모양이 다채롭습니다.
이것은 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. 체크박스 모양변경 - 배경이미지
출처 : 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 입니다.
'웹언어 > 웹컨텐츠제작꿀팁-HTMLCSS중급편' 카테고리의 다른 글
| [웹컨텐츠제작꿀팁] 6강 Board Preview 이렇게 써라! (0) | 2022.02.02 |
|---|---|
| [웹컨텐츠제작꿀팁] 5강 Hover Effect(마우스오버효과) 이렇게 써라! (0) | 2021.10.30 |
| [웹컨텐츠제작꿀팁] 4강 로그인창 이렇게 써라! (2) | 2021.10.19 |
| [웹컨텐츠제작꿀팁] 2강 텍스트네비게이션 이렇게 써라! (0) | 2021.10.11 |
| [웹컨텐츠제작꿀팁] 1강 Table 코딩 이렇게 써라! (0) | 2021.10.02 |
