웹 개발을 시작할 때 가장 먼저 접하게 되는 작업 중 하나가 바로 회원가입 폼(Sign Up Form) 제작입니다. 이 글에서는 HTML과 CSS만을 사용하여 실무에서 바로 활용할 수 있는 깔끔하고 사용자 친화적인 가입 양식을 만드는 방법을 예제 코드와 함께 소개합니다.
완성된 코드 예제
아래 코드를 그대로 복사하여 .html 파일로 저장한 뒤 브라우저에서 열면, 완성된 회원가입 폼을 바로 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {box-sizing: border-box}
input[type=text], input[type=password] {
width: 100%;
font-size: 28px;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
label{
font-size: 15px;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
button {
font-size: 18px;
font-weight: bold;
background-color: rgb(10, 119, 13);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
.cancel {
padding: 14px 20px;
background-color: #ff3d2f;
}
.formContainer {
padding: 16px;
}
.formContainer p{
font-size: 28px;
}
</style>
</head>
<body>
<form>
<div class="formContainer">
<h1>Sign Up Form</h1>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<label for="repeatPassword"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="repeatPassword" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom: 15px"> Remember me
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a></p>
<div>
<button type="button" class="cancel">Cancel</button>
<button type="submit" class="signup">Sign Up</button>
</div>
</div>
</form>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 회원가입 폼이 화면에 출력됩니다.
코드 핵심 포인트 살펴보기
1. 입력 필드 스타일링
input[type=text]와 input[type=password] 선택자를 사용해 텍스트 및 비밀번호 입력창의 너비를 100%로 설정하고, 폰트 크기(28px), 여백, 연회색 배경(#f1f1f1), 테두리 제거 등을 지정했습니다. 덕분에 입력창이 모던하고 심플한 느낌을 줍니다.
2. 포커스(Focus) 효과
:focus 가상 클래스를 활용하면 사용자가 입력 필드를 클릭하는 순간 배경색이 #ddd로 변경됩니다. 현재 입력 중인 필드를 시각적으로 강조해 주는 대표적인 UX 향상 기법입니다.
3. 버튼 디자인과 호버 효과
가입(Sign Up) 버튼은 진한 녹색(rgb(10, 119, 13)) 배경에 흰색 굵은 텍스트를 적용했고, 취소(Cancel) 버튼은 붉은색(#ff3d2f)으로 구분했습니다. 마우스를 올리면 opacity가 0.9에서 1로 변하며 자연스러운 반응 효과가 나타납니다.
4. box-sizing: border-box의 역할
전체 선택자(*)에 box-sizing: border-box를 적용하면 padding과 border가 요소의 전체 너비에 포함됩니다. 이렇게 하면 입력창과 버튼의 크기가 어긋나지 않고 레이아웃이 일관되게 유지됩니다.
마무리
이처럼 HTML과 CSS만으로도 충분히 완성도 높은 회원가입 폼을 만들 수 있습니다. 위 예제를 응용해 필드를 추가하거나 색상·폰트를 변경하면서 자신만의 스타일로 발전시켜 보세요. 이후 JavaScript를 더하면 유효성 검사 같은 동적 기능도 손쉽게 확장할 수 있습니다.