버튼 사이즈 조절하는 방법

버튼 사이즈 조절하는 방법

기본 네모 박스에 CSS를 추가하여 사이즈를 조절할 수 있습니다.
몇 가지 방법에 대해서 알아보겠습니다.

<h3>Checkbox</h3>
<input type="checkbox" id="cb">
<label for="cb"></label>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

방법 1 - transform: scale

<h3>transform: scale(2.0)</h3>
<input type="checkbox" id="cb1">
<label for="cb1"></label>

input[type="checkbox"] {
  -webkit-transform: scale(2.0); 
  -moz-transform: scale(2.0); 
  -ms-transform: scale(2.0); 
  -o-transform: scale(2.0);
  transform: scale(2.0);
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

방법 2 - width, height 직접 지정

<h3>width: 36px height: 36px</h3>
<input type="checkbox" id="cb2">
<label for="cb2"></label>

input[type="checkbox"] {
  width: 36px;
  height: 36px;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

방법 3 - zoom

<h3>zoom: 3.0</h3>
<input type="checkbox" id="cb3">
<label for="cb3"></label>

input[type="checkbox"] {
  zoom: 3.0;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

방법 4 - 인라인(inline) 스타일

<input style="zoom: 4.0;" type="checkbox" id="cb">
<label for="cb"></label>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.