회원가입 과제 질문
* {
justify-content: center;
align-items: center;
}
.hr {
width: 470px;
height: 0.998px;
flex-shrink: 0;
background: #e6e6e6;
}
.bak {
width: 670px;
height: 960px;
border-radius: 20px;
border: 1px solid #aacdff;
background: #fff;
box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25);
}
.h2 {
width: 466px;
color: #0068ff;
font-family: Noto Sans CJK KR;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.email {
width: 158px;
height: 23.649px;
flex-shrink: 0;
color: #797979;
font-family: Noto Sans CJK KR;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.name {
width: 158px;
height: 23.649px;
}
.pw {
width: 158px;
height: 23.649px;
}
.pw {
border: 1px solid blue;
}
.button {
border-radius: 10px;
border: 1px solid #0068ff;
background: #fff;
width: 470px;
height: 75px;
flex-shrink: 0;
}
.check {
color: #000;
font-family: Noto Sans CJK KR;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link href="./02-signup.css" rel="stylesheet" />
</head>
<body>
<div class="bak">
<h2 class="h2">회원 가입을 위해<br>정보를 입력해주세요</h2>
<input class="email" type="text" placeholder="이메일" /><br /><br />
<input class="name" type="text" placeholder="이름" /><br /><br />
<input class="pw" type="password" placeholder="비밀번호" /><br /><br />
<input class="pw" type="password" placeholder="비밀번호 확인" /><br /><br />
<select>
<option disabled="true" selected="true">지역을 선택하세요</option>
<option>서울</option>
<option>경기</option>
<option>인천</option>
</select>
<br /><br />
<input class="radio" type="radio" name="gender" />여성
<input class="radio" type="radio" name="gender" />남성 <br /><br />
<input class="check" type="checkbox" /> 이용약관 개인정보 수집 및 동의
<hr class="hr">
<br>
<br>
<button class="button">가입하기</button>
<!-- <input type="button" value="가입하기" /> -->
</body>
</div>
</html>
코드 작성한 게 저렇게 화면이 보여지는데 가운데 정렬을 하려면 어떻게 해야될까여..... flex랑 just로 시작하는 속성을 넣으면 이상하게 되더라구요 너무 어렵네요 ㅠㅠ
답변 1
0
안녕하세요! 서연님!
아직 정렬에 대한 개념이해가 더 필요할 것 같아요!
우리가 학습하는 모든 수업의 중요도가 동일하지 않아요!
flex의 경우, 다른 파트보다 10배는 더 중요하므로 조급하게 생각하지 마시고 다시 돌아가서 flex부분은 3번 이상 반복해보시길 추천드립니다!
현재 모든 태그(*) 부분에 justify-content, align-items 등의 특성을 주셨는데, 이 녀석들은 내가 정렬하고자 하는것들을 묶은 부모박스에서 주셔야하는 특성들이랍니다!
따라서, 원리를 다시 학습해주시고, 바로 가입하기 화면을 만들기보단 배운 원리를 안보고 빈 화면에 네모칸을 정렬하는 연습을 먼저 진행해 주세요!
싸이월드3
0
78
2
싸이월드2 관련 질문 드립니
0
93
3
과제 모범답안 유무
0
89
2
과제 연습 질문
0
72
2
<style> 에 *와 div 차이
0
87
2
과제 profile 부분 질문
0
114
2
과제 Profile 부분 질문
0
86
2
left_body_header의 자식border-top인데
0
80
2
정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.
0
127
1
태그 궁금한 점
0
162
2
HTML 회원가입
0
193
2
문법관련 질문입니다
0
253
2
윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.
0
650
2
26분50초에 세로줄 어떻게 해요 ..? ㅎㅎㅎ
0
251
2
피그마에서 css 코드가 안보여요..
1
3219
2
주석기능을 하고 싶은데 컨트롤+느낌표가 안됩니다 ㅠㅠ
0
325
2
언어 설정 -> 한글
0
289
1
2024년 html
0
226
1
피그마 유료화
0
1670
1
Fiama 링크 찾기
0
240
2
Figma는 어디에 있나요?
0
251
1
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
0
357
2
git 질문입니다
0
216
1
아무리 찾아봐도 피그마 링크가 보이질 않습니다.
0
312
1