웹 폼(web form)은 수많은 웹사이트에서 빠질 수 없는 핵심 요소입니다. 웹 폼을 활용하면 사이트 운영자가 방문자로부터 정보를 받을 수 있습니다. 예를 들어, 뉴스레터 구독을 원하는 사용자의 이메일 주소를 받는 용도로 웹 폼이 활용됩니다.
CSS를 사용하면 웹 페이지의 폼 입력 필드에 원하는 스타일을 자유롭게 적용할 수 있으며, 이를 통해 디자인적으로 매력적이면서도 실용적인 폼을 만들 수 있습니다.
이 글에서는 예제와 함께 HTML 입력 필드의 기본 개념과 CSS로 입력 필드를 꾸미는 다양한 방법을 단계별로 살펴보겠습니다. 마지막에는 전문가처럼 입력 필드를 스타일링할 수 있는 역량을 갖추게 될 것입니다.
HTML과 CSS를 이용한 입력 필드 구성
웹 페이지에 폼을 정의하려면 먼저 HTML을 사용해야 합니다. HTML은 어떤 폼 필드가 어디에 배치될지 등 폼의 구조를 정의하는 역할을 담당하고, 이후 CSS로 각 요소에 세련된 스타일을 입히면 됩니다.
HTML에서 <input> 태그는 폼 안에서 사용자의 입력값을 받아올 때 사용됩니다. 기본 문법은 아래와 같습니다.
<input type="typeOfInput">
HTML 입력 태그에 대해 더 알고 싶다면 HTML input 입문 가이드를 참고해 보세요. 사용자의 이름을 받는 기본적인 폼 필드 예제입니다.
<label for="userName">이름</label> <input type="text" name="userName">
위 코드의 입력 필드는 <input> 태그의 기본 HTML 스타일을 그대로 사용하고 있어 다소 밋밋합니다. 여기에 <label> 태그로 라벨을 추가했으며, 이제 CSS를 통해 디자인을 입혀 보겠습니다.
CSS 입력 필드 스타일링 예제
CSS로 폼 요소를 스타일링하는 몇 가지 대표적인 예제를 하나씩 살펴보겠습니다.
1. 입력 필드 너비 지정하기
예를 들어, 우표 동호회 회원 명단을 수집하는 폼 필드를 만든다고 가정해 봅시다. 이 폼이 웹 페이지 전체 너비의 50%를 차지하도록 만들려면 다음과 같은 코드를 사용할 수 있습니다.
<html>
<label for="userName">이름</label>
<input type="text" name="userName">
<style>
input {
width: 50%;
}이 예제에서는 페이지 너비의 절반 크기를 가지는 폼 필드를 만들었습니다. HTML 코드에서는 <label> 태그로 '이름'이라는 라벨을 추가하고 <input> 태그로 폼을 정의했습니다. 그리고 CSS 코드에서 모든 <input> 태그의 너비를 부모 컨테이너의 50%로 설정했습니다. 여기서 부모 컨테이너는 웹 페이지 자체이므로, 입력 필드가 화면 너비의 절반을 차지하게 됩니다.
2. 테두리(border) 추가하기
시애틀 우표 클럽(Seattle Stamp Club)에서는 클럽의 상징색인 연한 파란색(lightblue)으로 각 폼 필드에 테두리를 추가해 달라고 요청했습니다. 테두리 두께는 3px이어야 합니다. 이때 border 속성을 사용하면 됩니다.
<html>
<label for="userName">이름</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightblue;
}코드에서 border 스타일을 사용해 입력 필드 주변에 두께 3px의 테두리를 추가했습니다. 실행 결과, 폼 필드에 연한 파란색 테두리가 둘러진 것을 확인할 수 있습니다.
CSS 테두리에 대해 더 자세히 알고 싶다면 CSS border 완벽 가이드를 참고하세요.
3. 하단 테두리만 추가하기
테두리를 특정 방향에만 적용할 수도 있습니다. 예를 들어 필드 하단에만 선을 표시하고 싶다면 border-bottom 속성을 사용하면 됩니다.
<html>
<label for="userName">이름</label>
<input type="text" name="userName">
<style>
input {
border-bottom: 3px solid lightblue;
}이 코드에서는 border-bottom 속성으로 입력 필드의 아래쪽에만 테두리를 추가했습니다.
4. 패딩(padding)으로 여백 만들기
폼 내부 콘텐츠, 즉 사용자가 정보를 입력하는 공간과 테두리 사이에 여백을 두고 싶을 때가 있습니다.
클럽에서는 위아래 경계선과 콘텐츠 사이에 10px, 좌우 경계선과 콘텐츠 사이에 15px의 여백을 원합니다. 다음 코드로 이를 구현할 수 있습니다.
<html>
<label for="userName">이름</label>
<input type="text" name="userName">
<style>
input {
padding: 10px 15px;
box-sizing: border-box;
}여기서 padding 스타일은 폼 필드의 콘텐츠와 테두리 사이의 여백을 담당합니다. 첫 번째 값(10px)은 위아래 여백을, 두 번째 값(15px)은 좌우 여백을 설정합니다.
또한 box-sizing 속성을 border-box로 설정했습니다. 이렇게 하면 패딩이 요소의 전체 너비 계산에 포함되어, 의도치 않은 크기 변형을 방지할 수 있습니다.
padding 속성에 대해 더 알고 싶다면 CSS padding 가이드를 확인해 보세요.
5. 포커스(focus) 시 스타일 변경하기
대부분의 브라우저에서는 폼 필드를 클릭하면 파란색 외곽선(outline)이 나타나 현재 선택된 필드를 강조합니다.
하지만 CSS의 :focus 선택자를 사용하면 이 동작을 원하는 대로 바꿀 수 있습니다. 사용자가 폼을 클릭했을 때 하단에 연한 회색 테두리가 생기도록 만들어 보겠습니다.
<html>
<label for="userName">이름</label>
<input type="text" name="userName">
<style>
input:focus {
outline: none;
border-bottom: 3px solid lightgray;
}처음에는 기본 HTML 스타일로 폼이 표시되지만, 폼을 클릭하면 하단에 두께 3px의 연한 회색 실선 테두리가 나타납니다.
이는 :focus 선택자 덕분입니다. :focus 선택자는 사용자가 입력 필드를 클릭했을 때 특정 스타일을 적용해 줍니다. 또한 outline: none 규칙을 함께 사용하여 기본 파란색 외곽선이 나타나지 않도록 했습니다.
:focus 선택자에 대해 더 학습하고 싶다면 CSS :focus 선택자 가이드를 읽어 보세요.
6. 둥근 모서리(rounded corners) 만들기
입력 필드의 네 방향 모두에 연한 회색 테두리를 두르고, 모서리를 부드럽게 둥글게 처리해야 하는 경우도 있습니다. 이때 border-radius 속성을 사용하면 CSS에서 손쉽게 둥근 모서리 효과를 만들 수 있습니다.
<html>
<label for="userName">이름</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightgray;
border-radius: 10px;
}이 예제에서는 먼저 입력 필드 주변에 두께 3px의 연한 회색 실선 테두리를 정의한 뒤, border-radius 속성으로 모서리를 둥글게 만들었습니다.
웹 요소에 둥근 모서리를 적용하는 방법이 더 궁금하다면 CSS rounded corners 관련 가이드를 참고하세요.
7. 배경색(background color) 지정하기
마지막으로, 두께 3px의 연한 회색 테두리와 연한 파란색 배경을 동시에 갖는 폼 필드를 만들어 보겠습니다.
<html>
<label for="userName">이름</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightgray;
background-color: lightblue;
}코드에서는 border 속성으로 입력 필드 주변에 두께 3px의 연한 회색 실선 테두리를 정의하고, background-color 속성으로 폼 필드의 배경색을 연한 파란색으로 설정했습니다.
특정 입력 필드에만 스타일 적용하기
지금까지는 모든 <input> 필드에 일괄적으로 스타일을 적용했습니다. 하지만 특정 유형의 입력 필드에만 스타일을 적용하고 싶을 때도 있습니다.
이럴 때 필요한 것이 속성 선택자(attribute selector)입니다. 스타일에서 단순히 input이라고 작성하는 대신, 아래와 같은 선택자를 사용하면 원하는 필드만 골라서 스타일링할 수 있습니다.
- input[type=text]: 모든 텍스트(text) 필드에 스타일을 적용합니다.
- input[type=email]: 모든 이메일(email) 필드에 스타일을 적용합니다.
- input[type=password]: 모든 비밀번호(password) 필드에 스타일을 적용합니다.
- input[id=userName]: ID가
userName인 요소에만 스타일을 적용합니다.
속성 선택자의 동작 방식이 더 궁금하다면 CSS attribute selectors 가이드를 참고해 보세요.
마무리
CSS를 활용하면 미관상 아름답고 기능적인 커스텀 웹 폼을 만들 수 있습니다. 먼저 HTML로 폼의 구조를 설계한 뒤, CSS 스타일로 원하는 디자인을 입히면 됩니다.
이 글에서는 예제를 통해 HTML 입력 필드의 기본 개념과 CSS로 입력 필드를 스타일링하는 다양한 방법을 살펴보았습니다. 이제 여러분도 CSS를 활용해 전문가처럼 입력 필드를 디자인할 준비가 되었습니다!