CSS실습
기존 html로 구현했던 회원가입 파일을 CSS를 통해 보강해보았습니다.
CSS의 기본적인 기능인 색, 크기, 정렬을 사용했으며
CSS파일을 분리하여 <link> 태그를 사용했습니다.
CSS파일
.wrapper {
width: 460px;
height: 550px;
border: 2px solid black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px;
}
.pw {
width: 380px;
height: 8px;
border: 1px solid black;
padding: 18px;
}
.pw::placeholder {
color: gray;
font-size: 15px;
}
.gender__wrapper {
width: 380px;
height: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.gender {
width: 460px;
height: 141px;
}HTML파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link href="02-signup.css" rel="stylesheet" />
</head>
<body>
<class class="wrapper">
<h2>회원가입 </h2>
<input class="pw" type="text" placeholder="이메일을 입력해주세요"><br><br>
<input class="pw" type="text" placeholder="이름을 입력해주세요 "><br><br>
<input class="pw" type="password" placeholder="비밀번호를 입력해주세요"><br><br>
<input class="pw" type="password" placeholder="비밀번호를 다시 입력해주세요"><br><br>
<div class="gender wrapper">
<div class="gender">
<input type="radio" name="gender" class="gender__radio"/> 남성
</div>
<div class="gender">
<input type="radio" name="gender" class="gender__radio"/> 여성
</div>
<br><br>
<div class="check">
<input type="checkbox" > 이용약관 개인정보 수집 및 활용, 마케팅 활용 선택에 모두 동의합니다.
<hr>
<button>가입하기</button>
</div>
</div>
</class>
</div>
</div>
</body>
</html>