회원가입 양식 과제
안녕하세요 과제를 해봤는데 예쁘게 잘 되긴 하였습니다.
혹시 여기서 더 고쳐야 되는 부분이 있을까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link rel="stylesheet" href="02-signup.css" />
</head>
<body>
<div class="container">
<div class="member-container">
<div class="header">
<div>회원 가입을 위해</div>
<div>정보를 입력해주세요</div>
</div>
<div class="user-info">
<div id="email">* 이메일</div>
<div>* 이름</div>
<div>* 비밀번호</div>
<div>* 비밀번호 확인</div>
</div>
<div class="gender">
<input type="radio" name="gender" />
<label for="women">여성</label>
<input type="radio" name="gender" />
<label for="men">남성</label>
</div>
<div class="agree-check">
<input type="checkbox" /> 이용약관 개인정보 수집 및 이용, 마케팅 활용
선택에 모두 동의합니다.
</div>
<div class="btn">
<button>가입하기</button>
</div>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
font-family: "Noto Sans CJK KR";
font-style: normal;
}
body {
display: flex;
flex-direction: row;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 670px;
height: 960px;
margin-top: 60px;
margin-bottom: 60px;
background: #ffffff;
border: 1px solid #aacdff;
box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25);
border-radius: 20px;
}
.member-container {
display: flex;
flex-direction: column;
align-items: center;
width: 470px;
height: 818px;
margin-top: 72px;
margin-bottom: 70px;
}
.header {
width: 466px;
height: 94px;
font-weight: 700;
font-size: 32px;
line-height: 47px;
color: #0068ff;
}
.user-info div {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #797979;
border-bottom: 1px solid #cfcfcf;
width: 466px;
height: 80px;
margin-top: 21px;
}
.user-info #email {
border-bottom: 1px solid #0068ff;
}
.gender {
display: flex;
align-items: center;
justify-content: space-between;
width: 140px;
height: 23.94px;
margin-top: 50px;
}
.gender input {
width: 20px;
height: 19.95px;
background: #ebebeb;
border: 1px solid #d2d2d2;
}
.gender label {
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.agree-check {
width: 454px;
height: 21.06px;
margin-top: 52.05px;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #000000;
}
.btn {
display: flex;
flex-direction: column;
margin-top: 60px;
width: 470px;
height: 106px;
border-top: 1px solid #e6e6e6;
}
button {
margin-top: 30px;
width: 470px;
height: 75px;
font-weight: 400;
font-size: 18px;
line-height: 27px;
text-align: center;
color: #0068ff;
background: #ffffff;
border: 1px solid #0068ff;
border-radius: 10px;
}잘 듣고 있습니다. 제가 들어본 강의 중에서 최고로 안 헷갈리게 가르쳐주셔서 좋습니다.
답변 1
1
안녕하세요 ajouunihospitalrn 님!
우선 CSS 적용은 너무 예쁘게 잘 해주셨고, 잘 따라와 주신 것 같습니다.
다만, 이메일과 이름, 비밀번호 등 입력이 필요한 부분은 태그가 div이면 입력이 안됩니다!
따라서 div 대신, input을 주셔야 합니다!
CSS는 input 태그에border:none 을 먼저 주시고, border-bottom을 조작해주시면 됩니다.
감사합니다.😁
싸이월드3
0
79
2
싸이월드2 관련 질문 드립니
0
95
3
과제 모범답안 유무
0
93
2
과제 연습 질문
0
75
2
<style> 에 *와 div 차이
0
87
2
과제 profile 부분 질문
0
116
2
과제 Profile 부분 질문
0
88
2
left_body_header의 자식border-top인데
0
81
2
정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.
0
129
1
태그 궁금한 점
0
164
2
HTML 회원가입
0
195
2
문법관련 질문입니다
0
254
2
윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.
0
654
2
26분50초에 세로줄 어떻게 해요 ..? ㅎㅎㅎ
0
254
2
피그마에서 css 코드가 안보여요..
1
3222
2
주석기능을 하고 싶은데 컨트롤+느낌표가 안됩니다 ㅠㅠ
0
327
2
언어 설정 -> 한글
0
292
1
2024년 html
0
229
1
피그마 유료화
0
1673
1
Fiama 링크 찾기
0
243
2
Figma는 어디에 있나요?
0
253
1
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
0
358
2
git 질문입니다
0
218
1
아무리 찾아봐도 피그마 링크가 보이질 않습니다.
0
314
1