| flex를 이용한 회원가입 양식 정렬하기 |
| 1. content-box에서 border-box로 넘어가는 것이 css의 기본 원칙이다. 내용 제외한 모든 것의 변화에서 기본 웹 페이지 제외한 모든 것의 변화로 양식 조정하기. 2. flex는 반드시 부모 태그가 필요하다. 또한 대각선으로 이동 불가하니, 가로 또는 세로로만 이동해야 한다. 3. 상위 태그부터 천천히 정렬시켜주기. 나는 가장 상위 태그인 body부터 정렬해주었다. 4. flex 사용 시에 자식 태그들의 정렬에 따라서 가로, 세로의 방향이 달라질 수 있음을 유의하자. |
완성된 회원가입 양식
+ 입력이 필요한 부분을 div 태그로 설정하면 입력이 되지 않는다. 입력에서 사용하는 태그를 이용하자. 경계를 없애고 싶은 경우에는 border에서 고쳐주면 된다.
1. html 코드
<!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 class="user-info-email">
<div>* 이메일</div>
<input type="email" />
</div>
<div class="user-info-name">
<div>* 이름</div>
<input type="text" />
</div>
<div class="user-info-pw">
<div>* 비밀번호</div>
<input type="password" />
</div>
<div class="user-info-pw-check">
<div>* 비밀번호 확인</div>
<input type="password" />
</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>2. css 코드
* {
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 {
margin-top: 39px;
}
.user-info div {
margin-top: 21px;
}
.user-info input {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #797979;
border: none;
border-bottom: 1px solid #cfcfcf;
width: 466px;
margin-top: 21px;
}
.user-info-email input {
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;
}flex를 이용하여 html을 정렬하는 경우에 꼬이지 않게 상위 태그부터 천천히 정렬해주자.
'web > html css' 카테고리의 다른 글
| [html css] 싸이월드 만들기 (1) (0) | 2023.02.24 |
|---|---|
| [css] css란 무엇일까? (0) | 2023.02.23 |
| [html] 회원가입 양식 만들기 (0) | 2023.02.22 |
| [html] html이란 무엇일까? (0) | 2023.02.22 |
| [web] 기본 지식 (0) | 2023.02.22 |