1. 필요성
html 에서 <input type="checkbox">를 생성하면, 아래 그림과 같은 가장 기본적인 checkbox만 만들어진다.
해당 checkbox는 background color와 check-mark의 색깔 및 크기, text와의 위치 배열 등이 모두 정해져 있기 때문에,
각종 웹서비스에서 활용하기에 제한이 많다.
그래서 customizing을 해야하는데, customizing에 들어가는 요소들이 html/css 초보가 알기에는 어려운 요소들이 많아서 각 요소들을 하나하나 분해해서 공부해보고자 한다.
2. 구성요소
2-1. Label tag
label tag는 input 과 관련된 checkbox, radio 등 사용자가 선택하여 입력을 넣는 요소가 있을 경우,
그 요소에 내용을 달아주고, 요소 뿐만 아니라 요소에 달린 내용을 클릭해도 요소가 클릭되도록 해주는 tag이다.
위 그림에서 볼 수 있듯이,
<div> tag로 감싸진 checkbox는 글자 클릭이 불가능한 반면에(클릭이 안되서 's'에 드래그 표시만 됨),
<label> tag로 감싸진 radio는 글자를 클릭하여도 radio에 check가 된다.
※ checkbox는 해제가 가능한 반면, radio는 선택 후 다시 클릭해도 해제가 안된다.
만약, 하나의 label tag안에 여러 개의 input 요소들을 넣어주면, 글자의 어떤 부분을 클릭하더라도 첫번째 선택 요소에만 check가 된다.
2-2. Input type="checkbox"
check box의 Syntax는 다음과 같다.
<input type="checkbox" name="apple" value="red" checked>
type은 input tag에서 checkbox의 형태로 지정하겠다는 것.
name과 value는 checkbox가 선택되고, Submit을 통해 제출되었을 때 반환될 이름과 값(서버로 제출되었을 때)
checked는 처음 페이지를 로드했을 때 checkbox가 check된 채로 표시되게 해주는 속성이다.
3. Code 작성 내용
code는 아래와 같이 작성할 수 있다.
핵심 개념은, 체크박스를 그려주는 기존의 박스형태를 삭제하고, 새로운 네모 박스 및 체크 표시를 입힌다는 것이다.
<html>
|
1
2
3
4
5
6
7
8
9
10
|
<body>
<label class="container">
<input type="checkbox" checked="checked">
This is a checkbox!
<span class="checkmark"></span>
</label>
<!-- <script src="testscript.js"></script> -->
</body>
|
cs |
<CSS>
Ref. code : w3school - https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 18px;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a "red" background */
.container input:checked ~ .checkmark {
background-color: #e91b00;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
/* -webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); */
}
|
cs |
하나씩 뜯어서 살펴보자.
1. .container
<label> tag의 부분으로, 글씨(This is a checkbox!)가 적힌 부분이다.
이 부분의 position을 relative로 설정하여 기준점으로 삼고, 실제 체크박스 부분은 position: absolute로 하여 상대적으로 위치하게 한다.
cursor: pointer 설정은 마우스를 갖다댔을 때, 화살표 모양이 아니라 손가락 모양이 되도록 해준다.
2. .container input
체크 박스 부분으로, opacity : 0, height : 0, width: 0 으로 설정하여 기존에 있던 <input type="checkbox">를 삭제한다.
3. .checkmark
HTML 코드 상에 추가로 넣어준 <span class = "checkmark"> 부분으로, 이 부분이 새로운 checkbox의 배경 부분이 된다.
체크가 풀렸을 때, 연한 회색(#eee)의 배경이 되도록 한다.
4. .container:hover input ~ .checkmark
.container에 마우스가 hover 되면( 마우스가 올려지면), 원래 checkbox가 있던 .input 부분과 그 형제요소인 .checkmark 부분이 모두 배경이 회색(#ccc)이 되도록 한다.
(~은 일반 형제 결합자)
5. .container input:checked ~ .checkmark
원래 input의 checkbox가 체크되면, 그 부분과 새로 만든 checkmark 부분의 색깔이 빨간색이 되도록 한다.
6. .checkmar:after, .container input:checked ~ .checkmark:after
input이 check 됬을 때만 checkmark가 표시되도록 하기 위해서, checkmark 뒤에 ':'을 붙여서 가상요소(pseudo-element)를 생성한다.
check 되지 않았을 떄는 display:none; 으로 숨겼다가, check 되면 결합자 ~를 통해 input의 checked와 함께 display:block 형태로 나타나도록 한다.
7. .container .checkmark:after
가상 요소(새로 만든 checkmark)의 디자인을 정의한다.
아래 그림과 같이 우선 width: 5px, heigth: 10px, border-width : 0 3px 3px, 0 (우, 하단쪽으로만 border-width 적용) 하여 도형을 그린다.
-- transform: rotate(45deg)를 추가하여 시계방향으로 45도 회전시켜서, check 모양으로 만들어준다.
여기서 -webkit은 chrome, safari, opera browser에서 transform이 적용되도록 해주는 접두어이고, -ms는 인터넷 익스플로러에서 적용되도록 해주는 접두어이다.
(webkit이 chrome과 safari가 채택한 웹 브라우저 엔진의 이름임)
'Programming-[Frontend] > HTML,CSS' 카테고리의 다른 글
| CSS / Combinators (연결자 또는 결합자) (0) | 2020.08.31 |
|---|---|
| Checkbox, Radio (0) | 2020.08.12 |
| HTML,CSS / Cursor Style, inherit, input Tag (0) | 2020.07.07 |
| CSS / Transition, Transform, Animation, Media Query (0) | 2020.07.03 |
| CSS / Flexbox, Selector(Pseudo-selector), States (0) | 2020.07.02 |
