CSS INPUT 크기 - 체크박스 크기, 인풋박스 크기 조절 방법
페이지 정보
조회 674회 작성일 22-09-10 12:44
본문
INPUT 크기
체크박스 크기, 인풋박스 크기 조절 방법
게시판이나 방문자 체크에서 인풋박스를 사용하게 되는데, 개수가 너무 많거나 노인층을 대상으로 제작한다면 필요한 INPUT박스의 크기 조절 방법을 알아본다.
INPUT 크기 - 체크박스 크기, 인풋박스 크기 조절 방법
수십 개의 게시물을 삭제하거나 이동하게 할 수 있도록 왼쪽 끝에는 작은 네모박스가 제공된다. 또한 방문자의 결정을 묻기 위한 페이지에서도 체크박스라는 네모박스가 제공된다. 문제는 이 크기가 너무 작을 때 어떻게 해야 하는가이다.
체크박스, 즉 인풋박스 크기 조절 방법은 CSS파일에서 코드를 추가하는 것이다.
여기에는 두 가지 방법이 있다.
ZOOM을 사용하는 방법
css파일을 열어서 아래의 코드를 입력해 보자
[code]
input[type=checkbox] {
zoom: 1.5;
}
[/code]
여기에 zoom이 나오는데, 이것은 특정 요소를 확대하거나 축소하는 프로퍼티라는 것이다.
예를 들자면 아래처럼 사용하면 된다.
zoom:normal; - 기본 크기로 변경
zoom:2; - 두 배로 크기 변경
zoom:0.5; - 절반으로 크기 변경
그런데 그냥 이렇게 해버리면 홈페이지의 모든 인풋박스(체크박스) 크기를 변경하게 된다. 그러면 곤란해지니, 특정 부분에서만 바꾸려면 이렇게 한다.
예를 들어, 클래스가 tbl_wrap인 부분의 INPUT 박스 크기를 바꾸려면 아래처럼 하는 것이다.
[code]
<style type="text/css">
.tbl_wrap input[type=checkbox] {
zoom: 1.5;
}
</style>
[/code]
그런데 문제가 있다. 이 zoom은 아직 표준 CSS가 아니다. 다시 말해서 어떤 브라우저에서는 이것이 통하지 않는다. 그럴 때는 아래처럼 해야 한다.
키트를 사용하는 방법
파이어폭스 등 표준을 지키려는 브라우저에서도 되게 하려면 이렇게 kit를 사용한다.
[code]
<style type="text/css">
input[type=checkbox] {
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
}
</style>
[/code]
순서대로, 익스플로러, 파이어폭스, 사파리, 크롬, 오페라에 대응하는 키트다.
여기서 사용된 것은 scale(배율)이다. 이 부분이 각각의 체크박스(인풋박스) 크기를 변경하는 방법이 되겠다.
여기까지 본 것과 같이, 사용자의 편의성을 높이거나, 관리자 모드에서 많은 게시물을 동시에 다뤄야 할 때, 또는 특정 부분에서만 적용하고 싶을 때 사용하면 편하다.