CSS를 활용하면 디자인이 깔끔하고 반응형까지 지원되는 회원가입 폼(Register Form)을 손쉽게 만들 수 있습니다. 아래 예제는 이메일 입력 필드, 비밀번호 및 비밀번호 확인 필드, 약관 동의 문구, 등록 버튼으로 구성된 완전한 등록 양식을 HTML과 CSS만으로 구현한 것입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1{
text-align: center;
}
* {
box-sizing: border-box;
}
form {
padding: 16px;
max-width: 800px;
margin-left: 20%;
background-color: rgb(255, 254, 195);
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
text-decoration: none;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
@media (max-width: 800px) {
form {
width: 100%;
margin-left: 0px;
}
}
</style>
</head>
<body>
<h1>Registration Form Example</h1>
<form>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
<div class="signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>핵심 스타일 포인트
이 예제에서 주목할 만한 CSS 기법들은 다음과 같습니다.
1. 박스 크기 계산 통일
* { box-sizing: border-box; }를 적용하면 패딩과 테두리가 요소의 전체 너비에 포함되므로, 입력 필드와 버튼의 크기를 일관되게 유지할 수 있습니다.
2. 입력 필드 포커스 효과
:focus 가상 클래스를 사용해 사용자가 입력 필드를 클릭하면 배경색이 자연스럽게 변경됩니다. 이는 사용자가 현재 어느 항목을 작성 중인지 직관적으로 알 수 있게 해줍니다.
3. 버튼 호버 인터랙션
등록 버튼은 기본 상태에서 opacity: 0.9, 마우스를 올리면 opacity: 1로 변경되어 미묘하지만 효과적인 클릭 유도 효과를 냅니다.
4. 반응형 처리
@media (max-width: 800px) 미디어 쿼리를 통해 화면 너비가 800px 이하인 모바일 환경에서는 폼이 좌우 여백 없이 전체 너비를 차지하도록 설정했습니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 회원가입 폼이 출력됩니다.
