CSS / 체크박스 꾸미는 방법

체크박스 꾸미는 방법

체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다.

체크박스 만들기

빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
  </head>
  <body>
    <h3>Checkbox</h3>
    <input type="checkbox" id="cb1">
    <label for="cb1"></label>
  </body>
</html>

라벨 꾸미기

라벨을 원하는 모양으로 꾸밉니다.

input[id="cb1"] + label {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #bcbcbc;
	cursor: pointer;
}

라벨을 클릭했을 때의 모양을 만듭니다.

input[id="cb1"]:checked + label {
	background-color: #666666;
}

체크박스 숨기기

체크박스를 보이지 않게 합니다.

input[id="cb1"] {
	display: none;
}

전체 코드

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
		<style>
			input[id="cb1"] + label {
				display: inline-block;
				width: 20px;
				height: 20px;
				border: 2px solid #bcbcbc;
				cursor: pointer;
			}
			input[id="cb1"]:checked + label {
				background-color: #666666;
			}
			input[id="cb1"] {
				display: none;
			}
		</style>
  </head>
  <body>
    <h3>Checkbox</h3>
    <input type="checkbox" id="cb1">
    <label for="cb1"></label>
  </body>
</html>
같은 카테고리의 다른 글
CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / Flex / display

CSS / Flex / display

display: flex Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가한다. 아래와 같은 문서에... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { padding: 10px; ...

CSS / accent-color / input, progress에서 강조할 색을 지정하는 속성

CSS / accent-color / input, progress에서 강조할 색을 지정하는 속성

개요 accent-color는 강조할 색을 지정하는 속성이다. 아래 요소에 적용할 수 있다. <input type="checkbox"> <input type="radio"> <input type="range"> <progress> 문법 accent-color: auto | color | initial | inherit auto : 기본값으로, 브라우저가 색을 정한다. color : 색을 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 - input checkbox 체크박스를 선택하면 녹색이 된다. <!doctype html> <html lang="ko"> <head> ...

CSS / 이미지 가운데 정렬하는 방법

CSS / 이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 설정한다. 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈이다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 된다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다. 계산 순서 왼쪽에서 오른쪽으로 계산한다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 한다. 괄호가 있으면 ...

CSS / 표(table) 꾸미기 / 배경색 만들기

CSS / 표(table) 꾸미기 / 배경색 만들기

배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / color / 글자 색 정하는 속성

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / border-width / 테두리 두께 정하는 속성

CSS / border-width / 테두리 두께 정하는 속성

개요 border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-width border-right-width border-bottom-width border-left-width 문법 border-width: medium | thin | thick | length | initial | inherit; initial : 기본값으로 설정한다. 기본값은 medium이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 테두리의 두께를 xx로 만든다. border-width: xx 다음은 위쪽과 아래쪽 테두리의 두께는 xx로, 왼쪽와 오른쪽의 두께는 yy로 ...

CSS / 표(table) 꾸미기 / 반응형 표 만들기

CSS / 표(table) 꾸미기 / 반응형 표 만들기

데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...

CSS / 변수 사용하기

CSS / 변수 사용하기

CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다. 변수 사용 property: var( --variable-name ) 예제 기본 변수 --my-color-1을 red로 설정하고 사용합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root ...