스택 폼(Stacked Form)은 라벨과 입력 필드가 수직으로 위아래로 쌓이는 형태의 폼입니다. 각 요소가 전체 너비를 차지하기 때문에 모바일 등 좁은 화면에서도 가독성이 뛰어나며, 회원가입·로그인 페이지에서 널리 활용됩니다. CSS만으로도 손쉽게 구현할 수 있는데, 핵심은 입력 요소에 width: 100%를 지정하는 것입니다.
완전한 예제 코드
다음은 CSS를 활용해 스택 폼을 만드는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
h1{
text-align: center;
}
* {
box-sizing: border-box;
}
label{
font-size: 18px;
}
form {
padding: 16px;
max-width: 800px;
margin-left: 20%;
background-color: rgb(255, 254, 195);
}
input[type=text], input[type=password] {
width: 100%;
font-size: 20px;
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>Stacked 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>
핵심 코드 분석
1. 입력 필드를 세로로 쌓기
input[type=text]와 input[type=password] 선택자에 width: 100%와 display: inline-block을 적용했습니다. 덕분에 이메일, 비밀번호, 비밀번호 확인 필드가 부모 컨테이너의 전체 너비를 차지하며 자연스럽게 수직으로 배치됩니다.
2. 포커스 효과 추가
:focus 가상 클래스를 사용하면 사용자가 입력 필드를 클릭했을 때 배경색이 변하면서 시각적인 피드백을 줄 수 있습니다. 이는 폼의 사용성을 크게 향상시키는 디테일입니다.
3. 반응형 처리
@media (max-width: 800px) 미디어 쿼리를 통해 화면 너비가 800px 이하일 때는 폼이 여백 없이 전체 너비를 차지하도록 설정했습니다. 덕분에 스마트폰에서도 폼이 잘리지 않고 깔끔하게 표시됩니다.
4. 버튼과 링크 스타일링
등록 버튼(.registerbtn) 역시 width: 100%를 적용해 입력 필드와 폭을 맞췄으며, 마우스를 올렸을 때 opacity가 변하는 호버 효과를 추가했습니다.
실행 결과
위 코드를 브라우저에서 실행하면 라벨과 입력 필드, 버튼이 수직으로 정렬된 스택 형태의 회원가입 폼이 나타납니다.
