체크박스 기본 적용방법
| <input type="checkbox" name="chk_info" value="HTML">HTML <input type="checkbox" name="chk_info" value="CSS">CSS <input type="checkbox" name="chk_info" value="웹디자인">웹디자인 |
http://www.homejjang.com/05/CheckBox.php
체크박스(Check Box) - HTML 고급 강좌
www.homejjang.com
기본적용방법은 간단합니다!! 다만, 적용했을때 보면 아래와 같이 basic한 느낌이 강합니다.
HTML
CSS
웹디자인
체크박스 꾸미는 방법
https://www.codingfactory.net/10710
CSS / 체크박스 꾸미는 방법
체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 [...]
www.codingfactory.net
자세하게 설명이 나와있고, 전체코드가 나와있으니 참고 바랍니다.
근데..! 적용할려고 보니 id=cb1에 엮어서 첫번째 체크박스에만 계속 클릭이 됩니다.
체크박스 여러개에 스타일 적용하는 방법
매번 style에 cb1, cb2, cb3.. 이렇게 추가해야하나 걱정 했는데, 조금의 수정으로 해결이 되었습니다.
이런식으로 id가 아닌 checkbox type으로 주면 모든 체크박스에 style이 적용 되면서 각각 따로 따로 체크가 됩니다.
https://ichbintaeeun.tistory.com/16
CSS를 이용해서 checkbox 크기 조정하고 이미지처럼 꾸미기
모바일, 태블릿 프로젝트를 하다보니, 변수가 이만저만이 아니다. 안드로이드, IOS 디바이스마다 맞춰주는 것이 여간 피곤한게 아니다. 이럴때보면 오히려 크로스브라우징이 그나마 나은 거구나 하는 생각이 들 정..
ichbintaeeun.tistory.com
단, 각 id는 다르게 지정을 해주셔야 합니다.
CSS로 각 라벨/체크박스 사이에 간격을 주었습니다.
margin-left 옵션을 이용하여 각 체크박스마다 간격을 유지하였습니다.
CSS 주요 옵션 종류는 아래 사이트에서 확인이 가능합니다.
https://zetawiki.com/wiki/CSS_주요_스타일_속성
CSS 주요 스타일 속성 - 제타위키
다음 문자열 포함...
zetawiki.com