-
[인프런x코드캠프 과제1 : CSS] 회원가입 form 만들기프로젝트/고농축 백엔드 코스 2023. 5. 30. 14:21
1. 요구사항(피그마로 올라와있다)
2. 결과
3. 코드
a. signup.html
<!DOCTYPE html> <hr lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <h1>회원가입을 위해 <br> 정보를 입력해주세요</h1> <p>* 이메일</p> <input type="text" class="mi"><br><br> <p>* 이름</p> <input type="text" class="mi" placeholder="이름을 입력해주세요"><br><br> <p>* 비밀번호</p> <input class="pw mi" type="password" placeholder="비밀번호를 입력해주세요"><br><br> <p>* 비밀번호 확인</p> <input class="pw mi" type="password" class="mi" placeholder="비밀번호를 다시 입력해주세요"><br><br> <div class="gender"> <div class="gender_btn"> <input type="radio" name="gender">여성 </div> <div class="gender_btn"> <input type="radio" name="gender">남성 </div> </div> <br> <br><br> <input type="checkbox">이용약관에 동의합니다 <hr> <button>가입하기</button> </body> </html>b. singup.css
* { box-sizing: border-box; } .wrapper { border: 1px solid #aacdff; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); margin-left: 600px; margin-right: 600px; margin-top: 100px; margin-bottom: 100px; padding: 100px; } h1 { color: #aacdff; } .gender { display: flex; flex-direction: row; align-items: center; justify-content: center; } .gender_btn { width: 70px; text-align: center; } button { box-sizing: border-box; width: 100%; height: 35px; border: 1px solid #0068ff; background: #ffffff; border-radius: 10px; } .mi { width: 100%; border: none; border-bottom: 1px solid black; background-color: transparent; }* input의 박스 형태를 제거하고 싶다면
border:none background-color:transparent*radiobutton 중앙정렬
부모에게 flex를 주고, 그 아래 버튼이 들어가있는 div 의 범위를 다시 정해준다.
버튼 각각 div처리를 해줘야하고 해당 div를 감싸는 부모가 있어야한다.
.gender { display: flex; flex-direction: row; align-items: center; justify-content: center; } .gender_btn { width: 70px; text-align: center; }반응형'프로젝트 > 고농축 백엔드 코스' 카테고리의 다른 글
[고농축 백엔드 코스Quiz4]Node.js로 회원 목록 조회 API 만들기 (0) 2023.07.26 [고농축 백엔드 코스Quiz2] 자바스크립트 날짜와 시간 포매팅 (0) 2023.07.26 [고농축 백엔드 코스Quiz1]주민번호 마스킹 (0) 2023.07.26 [고농축 백엔드 코스Quiz3] 2. GRAPHQL 연습하기 Lv.2 (0) 2023.07.26 [인프런x코드캠프 과제2 : 싸이월드] 프론트 메인화면 wrapper 왼편 완성하기 (0) 2023.05.30