버튼 사이즈 조절하는 방법

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

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

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="320"
data-pen-title="CSS 체크박스 사이즈 조절 예제"
data-slug-hash="pobzGeQ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

async=""
src="https://cpwebassets.codepen.io/assets/embed/ei.js"
>

방법 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);
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="320"
data-pen-title="CSS 체크박스 사이즈 조절 예제1"
data-slug-hash="yLJLOEw"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

방법 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;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="320"
data-pen-title="CSS 체크박스 사이즈 조절 예제2"
data-slug-hash="BazaKPr"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

방법 3 - zoom

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

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

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="320"
data-pen-title="CSS 체크박스 사이즈 조절 예제3"
data-slug-hash="qBNBZMZ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

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

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

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="320"
data-pen-title="CSS 체크박스 사이즈 조절 예제4"
data-slug-hash="oNLNxPz"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

버튼 사이즈 조절하는 방법

버튼 사이즈 조절하는 방법