웹 폼에 아이콘을 추가하면 사용자가 각 입력 필드의 용도를 한눈에 파악할 수 있어 사용자 경험이 크게 향상됩니다. 이 글에서는 Font Awesome 아이콘 라이브러리와 CSS Flexbox를 활용해 아이콘이 포함된 회원가입 폼을 만드는 방법을 예제 코드와 함께 살펴봅니다.
구현 원리
핵심 아이디어는 간단합니다. 각 입력 필드와 아이콘을 하나의 컨테이너(div.fieldContainer)로 묶고, display: flex를 적용해 아이콘과 입력창을 나란히 배치하는 것입니다.
- Font Awesome 로드: CDN 링크를 통해 아이콘 스타일시트를 불러옵니다.
- 아이콘 스타일링:
.icon클래스로 배경색, 패딩, 최소 너비를 지정해 입력창 왼쪽에 자연스럽게 붙도록 합니다. - 입력 필드:
.field클래스에width: 100%를 적용해 남은 공간을 모두 차지하게 합니다. - 포커스 효과:
:focus선택자를 사용해 입력 중인 필드에 파란색 테두리(dodgerblue)를 표시합니다.
전체 예제 코드
다음은 아이콘이 포함된 폼을 만드는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
form {
max-width: 500px;
margin: auto;
}
.fieldContainer {
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
font-size: 30px;
padding: 10px;
background: rgb(11, 9, 116);
color: white;
min-width: 50px;
text-align: center;
}
.field {
font-size: 20px;
width: 100%;
padding: 10px;
outline: none;
}
.field:focus {
border: 2px solid dodgerblue;
}
.btn {
font-size: 24px;
background-color: rgb(20, 60, 170);
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
border-radius: 8px;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<h1>Register Form Example</h1>
<form action="/action_page.php">
<div class="fieldContainer">
<i class="fa fa-user icon"></i>
<input class="field" type="text" placeholder="Username" name="usrnm" />
</div>
<div class="fieldContainer">
<i class="fa fa-envelope icon"></i>
<input class="field" type="text" placeholder="Email" name="email" />
</div>
<div class="fieldContainer">
<i class="fa fa-key icon"></i>
<input class="field" type="password" placeholder="Password" name="pass"/>
</div>
<div class="fieldContainer">
<i class="fa fa-birthday-cake icon" aria-hidden="true"></i>
<input class="field" type="text" placeholder="Date of Birth" name="dob"/>
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
주요 코드 설명
<i class="fa fa-user icon">— Font Awesome에서 제공하는 사용자 아이콘을 표시합니다. 마찬가지로fa-envelope(이메일),fa-key(비밀번호),fa-birthday-cake(생년월일) 아이콘을 활용했습니다..fieldContainer { display: flex; }— 아이콘과 입력창을 가로로 정렬하고,margin-bottom으로 필드 사이 간격을 유지합니다..btn:hover { opacity: 1; }— 버튼에 마우스를 올리면 불투명도가 100%가 되어 시각적인 반응을 줍니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 각 입력 필드 왼쪽에 진한 남색 배경의 아이콘이 배치되고, 필드를 클릭하면 파란색 테두리가 나타나는 것을 확인할 수 있습니다.
마무리
이처럼 Font Awesome과 Flexbox만 있으면 별도의 이미지 파일 없이도 깔끔하고 직관적인 아이콘 폼을 손쉽게 만들 수 있습니다. 필요에 따라 아이콘 색상, 크기, 배경색을 조절해 사이트 디자인에 맞게 커스터마이징해 보세요.