CSS를 활용한 폼 입력 필드(input) 스타일링 완벽 가이드

웹 페이지에서 폼(form)은 사용자와 상호작용하는 핵심 요소입니다. 기본 상태의 입력 필드는 디자인이 투박할 수 있기 때문에, CSS를 활용하면 입력 필드의 너비, 여백, 테두리 등을 자유롭게 꾸밀 수 있습니다.

CSS로 input 요소 스타일 지정하기

가장 기본적인 방법은 CSS 선택자를 사용해 <input> 태그를 직접 선택하는 것입니다. 아래 예제에서는 모든 입력 필드의 너비를 부모 요소의 100%로 설정하여 화면 전체를 채우도록 만들었습니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         input {
            width: 100%;
         }
      </style>
   </head>
   <body>
      <p>아래 양식을 작성해 주세요.</p>
      <form>
         <label for = "subject">과목</label>
         <input type = "text" id = "subject" name = "sub">
         <label for = "student">학생</label>
         <input type = "text" id = "student" name = "stu">
      </form>
   </body>
</html>

코드 설명

width: 100%; — 입력 필드가 컨테이너의 전체 너비를 차지하도록 설정합니다.
<label> 태그 — for 속성을 통해 각 입력 필드와 연결되어 접근성을 높입니다.

더 다양한 스타일 옵션

실무에서는 단순히 너비만 조절하지 않고, 아래와 같은 속성들을 함께 사용해 더 세련된 입력 필드를 만듭니다.

input {
   width: 100%;
   padding: 12px 15px;
   margin: 8px 0;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
}

padding — 입력 필드 내부 여백을 추가해 텍스트가 답답해 보이지 않게 합니다.
border / border-radius — 테두리 색상과 둥근 모서리를 적용해 부드러운 느낌을 줍니다.
box-sizing: border-box — 패딩과 테두리를 포함한 전체 크기를 유지해 레이아웃이 깨지는 것을 방지합니다.

이처럼 CSS만으로도 폼 입력 필드를 원하는 디자인으로 손쉽게 커스터마이징할 수 있습니다. 위 예제를 직접 실행해 보며 다양한 속성을 응용해 보세요.