CSS로 폼 입력 요소 안에 아이콘 넣는 방법

CSS를 활용하면 폼(form)의 입력 요소(input) 안에 아이콘을 간단하게 배치할 수 있습니다. 이 기법은 로그인 폼이나 회원가입 폼에서 사용자 경험을 높이는 데 자주 활용됩니다. 핵심은 아이콘을 감싸는 컨테이너에 상대 위치(relative)를 지정하고, 아이콘 자체에는 절대 위치(absolute)를 적용한 뒤, 입력 필드에 패딩을 추가해 아이콘이 들어갈 공간을 확보하는 것입니다.

예제 코드

아래 예제는 Font Awesome 아이콘 라이브러리를 사용해 사용자명, 이메일, 비밀번호 입력 필드 안에 각각 아이콘을 표시하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css" />
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
form {
    max-width: 450px;
    margin: auto;
}
.inputContainer {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}
.inputContainer i {
    position: absolute;
}
.icon {
    padding: 15px;
    color: rgb(49, 0, 128);
    width: 70px;
    text-align: left;
}
.Field {
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}
</style>
</head>
<body>
<h1 style="text-align: center;">입력 요소 안에 아이콘 넣기 예제</h1>
<form>
<div class="inputContainer">
<i class="fa fa-user icon"> </i>
<input class="Field" type="text" placeholder="Username" />
</div>
<div class="inputContainer">
<i class="fa fa-envelope icon"> </i>
<input class="Field" type="text" placeholder="Email" />
</div>
<div class="inputContainer">
<i class="fa fa-key icon"> </i>
<input class="Field" type="password" placeholder="Password" />
</div>
</form>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

CSS로 폼 입력 요소 안에 아이콘 넣는 방법

코드 동작 원리

.inputContainer: 각 입력 필드와 아이콘을 하나로 묶는 컨테이너입니다. position: relative를 지정해야 내부의 절대 위치 요소가 컨테이너를 기준으로 배치됩니다.
i 태그(position: absolute): Font Awesome 아이콘을 입력 필드 위에 겹쳐 배치합니다.
.icon: 아이콘의 크기, 색상, 정렬 등 시각적 스타일을 담당합니다.
.Field: 입력 필드의 너비, 글자 크기, 굵기 등을 설정합니다.

이처럼 상대 위치와 절대 위치를 조합하면 별도의 이미지 파일 없이도 폼 디자인을 한층 세련되게 만들 수 있습니다.