폼(form)을 제작할 때 우리는 고객에게 독특하고 매력적인 인상을 주고 싶어 합니다. 폼을 어떻게 표현하느냐에 따라 사용자 경험이 크게 달라지는 것도 사실입니다. 이를 위해 다양한 CSS 입력 유형(input type) 선택자를 활용하면 손쉽게 폼을 스타일링할 수 있습니다.
기본 문법과 예제
이 글을 읽으면서 함께 제공되는 Codepen 예제를 참고하세요.
HTML로 폼을 만들어 본 경험이 있다고 가정하고 진행하므로, HTML 부분은 자세히 다루지 않겠습니다.
별도의 스타일 없이 만든 폼은 대략 다음과 같이 보입니다.
만약 1990년대였다면 그렇게 나쁘지 않았을 겁니다. 당시 인기 브라우저였던 넷스케이프(Netscape)의 홈페이지를 떠올려 보면 알 수 있죠.
하지만 지금은 90년대가 아닙니다. 다행히 오늘날에는 CSS가 있으며, 다음과 같은 간단한 문법만으로 입력 요소를 스타일링할 수 있습니다.
input[type="<type>"] {
/* 여기에 스타일 작성 */
}
텍스트 입력 필드 스타일링
가장 먼저 해볼 수 있는 것은 입력 필드와 라벨(label)의 글자 크기를 조정하는 것입니다. 키워드만으로 아주 간단하게 선택할 수 있습니다.
input, label {
font-size: 2rem;
padding: 1rem;
}
이렇게 하면 텍스트의 가독성이 좋아지고 입력 요소 사이에 적절한 여백이 생깁니다. 이제 이름(name)과 이메일(email) 텍스트 입력 필드를 스타일링해 보겠습니다.
input[type="text"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
input[type="email"] {
border: 0;
border-left: 0.3rem solid mediumspringgreen;
border-radius: 0.5rem;
}
여기서 핵심은 기본 테두리를 모두 제거한 뒤, 필요한 테두리만 골라 추가하는 것입니다. 이메일 입력 필드에는 테두리에 둥근 모서리(border-radius)를 적용해 좀 더 부드러운 느낌을 더했습니다. 아주 적은 코드만으로도 눈에 띄는 개선 효과를 얻을 수 있습니다.
주의사항: 드롭다운(셀렉트 박스)
드롭다운 메뉴 역시 스타일링할 수 있는 입력 요소입니다. 다만 한 가지 주의할 점이 있습니다. input[type="select"]라고 작성하면 드롭다운이 선택되지 않습니다. 드롭다운을 선택하려면 반드시 select 키워드를 사용해야 합니다.
select {
padding: 2rem;
font-size: 2rem;
width: 25rem;
border: none;
border-bottom: 0.3rem solid mediumspringgreen;
}
그 외 입력 요소 스타일링
여기까지 따라오셨다면 입력 요소 스타일링의 감을 충분히 잡으셨을 겁니다. 게다가 어느새 하나의 스타일 패턴이 만들어진 것도 보이네요. 이 패턴을 숫자(number)와 날짜(date) 입력 필드에도 그대로 적용해 보겠습니다.
input[type="number"], input[type="date"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
아주 간단한 선택자와 몇 줄의 CSS만으로도 입력 요소에 완전히 새로운 느낌을 불어넣을 수 있습니다!
이것은 어디까지나 시작일 뿐입니다. 이 외에도 무엇을 할 수 있을지 상상해 보세요.
실제로 Codepen 예제에는 아직 스타일링하지 않은 입력 요소들이 남아 있습니다. 배운 내용을 바탕으로 원하는 스타일을 직접 적용해 보세요. 방법은 이미 알고 계시니까요. 직접 도전해 보시길 바랍니다!