체크박스를 활용하는 회원가입 폼을 만들어 보려합니다.
네이버 회원가입 폼을 보고 만들어서 네이버의 회원가입 폼과 아주 유사한 디자인을 가지고 있어요.
특징은!
1. 첫번째 체크박스(모두동의하기)를 누르면 나머지 체크박스들이 모두 체크된다.
2. 모두 체크된 상태에서 하나만 체크를 풀면 모두 동의하기 박스의 체크도 없어진다.
3. 체크박스를 안누르고, 동의하기를 누를 시 경고창이 뜬다.
이 사항들을 모두 만족하는 회원가입 폼을 만들거예요.
완성된 모습입니다.
체크박스를 클릭해보세용( pc에서 해보세요! )
먼저 html 부터 만들어 보겠습니다.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <form action="" id="joinForm"> <ul class="join_box"> <li class="checkBox check01"> <ul class="clearfix"> <li>이용약관, 개인정보 수집 및 이용, 위치정보 이용약관(선택), 프로모션 안내 메일 수신(선택)에 모두 동의합니다.</li> <li class="checkAllBtn"> <input type="checkbox" name="chkAll" id="chk" class="chkAll"> </li> </ul> </li> <li class="checkBox check02"> <ul class="clearfix"> <li>이용약관 동의(필수)</li> <li class="checkBtn"> <input type="checkbox" name="chk"> </li> </ul> <textarea name="" id="">여러분을 환영합니다. 네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다. </textarea> </li> <li class="checkBox check03"> <ul class="clearfix"> <li>개인정보 수집 및 이용에 대한 안내(필수)</li> <li class="checkBtn"> <input type="checkbox" name="chk"> </li> </ul> <textarea name="" id="">여러분을 환영합니다. 네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다. </textarea> </li> <li class="checkBox check03"> <ul class="clearfix"> <li>위치정보 이용약관 동의(선택)</li> <li class="checkBtn"> <input type="checkbox" name="chk"> </li> </ul> <textarea name="" id="">여러분을 환영합니다. 네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다. </textarea> </li> <li class="checkBox check04"> <ul class="clearfix"> <li>이벤트 등 프로모션 알림 메일 수신(선택</li> <li class="checkBtn"> <input type="checkbox" name="chk"> </li> </ul> </li> </ul> <ul class="footBtwrap clearfix"> <li><button class="fpmgBt1">비동의</button></li> <li><button class="fpmgBt2">동의</button></li> </ul> </form> | cs |
ul태그를 사용해서 체크리스트를 구분했고, li안에 이중리스트로 텍스트와 버튼을 구분했어요.
html이 길어서 잘 안보이니까 구조를 좀 더 이해하기 쉽게 이미지로 만들어 봤어요.
'ul >li >ul >li ' 이렇게 이중 리스트로 되어 있어요.
HTML 구조가 한눈에 보였으면 좋겠어서 색으로 구분되도록 이미지로 만들어봤어요.
이제 거기에 맞게 css를 짜줍니다.
CSS
1 2 3 4 5 | *{margin: 0;padding: 0;box-sizing: border-box} body{background-color: #f7f7f7;} ul>li{list-style: none} a{text-decoration: none;} .clearfix::after{content: "";display: block;clear: both;} | cs |
먼저 리셋css를 만들었어요.꼭 필요할 것 같은 요소들만 적었어요.
1 2 3 4 5 6 7 8 9 10 11 12 13 | #joinForm{width: 460px;margin: 0 auto;} ul.join_box{border: 1px solid #ddd;background-color: #fff;} .checkBox,.checkBox>ul{position: relative;} .checkBox>ul>li{float: left;} .checkBox>ul>li:first-child{width: 85%;padding: 15px;font-weight: 600;color: #888;} .checkBox>ul>li:nth-child(2){position: absolute;top: 50%;right: 30px;margin-top: -12px;} .checkBox textarea{width: 96%;height: 90px; margin: 0 2%;background-color: #f7f7f7;color: #888; border: none;} .footBtwrap{margin-top: 15px;} .footBtwrap>li{float: left;width: 50%;height: 60px;} .footBtwrap>li>button{display: block; width: 100%;height: 100%; font-size: 20px;text-align: center;line-height: 60px;} .fpmgBt1{background-color: #fff;color:#888} .fpmgBt2{background-color: lightsalmon;color: #fff} | cs |
그리고 위에 캡쳐본처럼 만들기 위해 css를 짜보았어요.
반복되는 구조이기 때문에 2세트만 만들면 밑에는 자동으로 완성!
이렇게 css까지 적용하니 눈으로 보기에는 문제 없어보입니다.
그럼 이제 제이쿼리를 적용하여 체크박스가 잘 눌리도록(사실은 이미지) 만들어 보려고 합니다.
그런데 너무 길어지다니보니 제이쿼리는 다음장에 쓰도록 할께요.
다음글 -> [제이쿼리]모두 동의/모두 해지 체크박스 만들기
'퍼블리싱 > HTML&CSS' 카테고리의 다른 글
| 구글 웹폰트 CDN 사용법 (0) | 2020.03.13 |
|---|---|
| [css]div 가로 중앙 정렬 하는 방법 (0) | 2019.03.06 |
| [CSS]float 이해하기 & clear하는 방법 (0) | 2019.02.26 |
| [css]div 세로 가운데 정렬하는 방법 (0) | 2018.05.15 |
| height:100%를 적용시킬 방법 (0) | 2018.05.11 |
