📝
CSS 폼 디자인 가이드
입력 필드, 버튼, 레이아웃까지 — 사용자가 편하게 쓸 수 있는 폼을 만드는 방법을 배워보세요.
1입력 필드 스타일링
HTML input 태그는 기본 스타일이 투박합니다. border, border-radius, padding을 사용해서 깔끔하게 만들어보세요.
미리보기HTMLCSS
HTML
<input type="text" class="input" placeholder="이름을 입력하세요" />CSS
.input {
width: 300px;
padding: 12px 16px;
font-size: 15px;
font-family: 'Inter', sans-serif;
border: 1px solid #d1d5db;
border-radius: 8px;
outline: none;
transition: border-color 0.2s;
}
.input:focus {
border-color: #0066ff;
box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}outline: none을 넣고 대신 border-color와 box-shadow로 포커스 상태를 꾸며주세요.
2레이블과 입력 필드 조합
폼 필드에는 항상 label을 함께 사용합니다. 접근성도 좋아지고, 클릭 영역도 넓어집니다.
미리보기HTMLCSS
HTML
<div class="form-group">
<label class="label" for="email">이메일</label>
<input type="email" id="email" class="input" placeholder="example@email.com" />
</div>CSS
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
width: 320px;
}
.label {
font-size: 14px;
font-weight: 600;
color: #374151;
}
.input {
padding: 12px 16px;
font-size: 15px;
border: 1px solid #d1d5db;
border-radius: 8px;
outline: none;
font-family: inherit;
}
.input:focus { border-color: #0066ff; }for 속성과 id를 연결하면 label을 클릭해도 input에 포커스가 갑니다.
3완성된 로그인 폼
위에서 배운 것들을 조합해서 실제 로그인 폼을 만들어봅시다.
미리보기HTMLCSS
HTML
<form class="login-form">
<h2>로그인</h2>
<div class="field">
<label for="id">아이디</label>
<input type="text" id="id" placeholder="아이디 입력" />
</div>
<div class="field">
<label for="pw">비밀번호</label>
<input type="password" id="pw" placeholder="비밀번호 입력" />
</div>
<button type="submit">로그인</button>
</form>CSS
.login-form {
width: 360px; padding: 32px;
background: white; border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.login-form h2 { margin: 0 0 24px; font-size: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; color: #374151; }
.field input {
padding: 12px 16px; font-size: 15px;
border: 1px solid #d1d5db; border-radius: 8px;
outline: none; font-family: inherit;
}
.field input:focus { border-color: #0066ff; }
.login-form button {
width: 100%; padding: 14px; margin-top: 8px;
background: #111; color: white; font-size: 16px;
border: none; border-radius: 10px; cursor: pointer;
font-weight: 600; transition: background 0.2s;
}
.login-form button:hover { background: #333; }form에 action 없이 button type="submit"을 쓰면 페이지 새로고침이 됩니다. JS에서 preventDefault()를 쓰세요.