CSS를 활용하면 간단한 마크업만으로도 깔끔하고 직관적인 문의 양식(Contact Form)을 손쉽게 만들 수 있습니다. 아래 예제에서는 이름, 이메일 입력 필드와 메시지 작성 영역, 제출 버튼으로 구성된 문의 양식을 스타일링하는 전체 과정을 살펴봅니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
label{
font-size: 15px;
}
input[type=text],textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
form {
border-radius: 5px;
background-color: #feffc6;
padding: 20px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Contact Form</h1>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Enter your firstname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Enter your surname">
<label for="email">Email Id</label>
<input type="text" id="email" name="Email" placeholder="Enter your emailId">
<label for="contact">Contact</label>
<textarea id="contact" name="contact" placeholder="Write your message here"
style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 문의 양식이 화면에 나타납니다.
핵심 CSS 포인트 정리
- box-sizing: border-box; — 패딩과 테두리를 포함해 요소의 실제 너비를 계산하므로 입력 필드 크기가 어긋나지 않고 레이아웃이 안정적으로 유지됩니다.
- 입력 필드 스타일링 — width: 100%로 입력 요소가 부모 컨테이너 전체 폭을 차지하게 하고, padding과 border-radius로 여유 있는 여백과 부드러운 모서리를 적용했습니다.
- 제출 버튼 — 녹색 계열 배경(#4CAF50)에 흰색 텍스트를 사용해 눈에 잘 띄게 했으며, :hover 가상 클래스로 마우스를 올릴 때 색이 진해지도록(#45a049) 처리해 사용자 피드백을 강화했습니다.
- 폼 컨테이너 — 연한 노란색(#feffc6) 배경과 패딩, 모서리 반경을 지정해 페이지와 구분되는 카드 형태의 디자인을 완성했습니다.
이처럼 몇 줄의 CSS만으로도 기본 HTML 폼을 시각적으로 완성도 높은 문의 양식으로 바꿀 수 있습니다. 필요에 따라 배경색, 폰트, 여백 값을 조절해 자신만의 스타일로 응용해 보세요.