양식을 작성할 때 양식을 독특하고 고객 또는 고객에게 매력적으로 만들고자 합니다. 우리가 양식을 제시하는 방식이 사용자 경험을 훨씬 더 좋게 만든다는 것은 사실입니다. 양식의 스타일을 지정하기 위해 다양한 CSS 입력 유형 선택기를 사용합니다.
구문 및 예
이 기사를 읽는 동안 함께 제공되는 Codepen을 참조하십시오.
HTML을 사용하여 양식을 구축한 경험이 있다고 가정하므로 HTML을 자세히 다루지는 않겠습니다.
스타일을 지정하지 않으면 양식이 다음과 같이 보입니다.
우리가 1990년대에 있었다면 이것은 나쁘지 않았을 것입니다. Netscape의 (인기 있는 90년대 브라우저) 홈페이지를 보십시오.
그러나 우리는 90년대가 아닙니다. 다행히 오늘날에는 CSS가 있고 다음과 같은 간단한 구문으로 입력 스타일을 지정할 수 있습니다.
input[type="<type>"] {
/* styles here */
}
텍스트 입력 스타일 지정
우리가 할 수 있는 첫 번째 일은 입력과 레이블의 글꼴 크기에 스타일을 지정하는 것입니다. 다음과 같이 쉽게 키워드로 선택할 수 있습니다.
input, label {
font-size: 2rem;
padding: 1rem;
}
이것은 우리의 텍스트를 더 읽기 쉽게 만들고 입력 사이에 약간의 공간을 제공합니다. 이제 이름과 이메일이 포함된 텍스트 입력의 스타일을 지정해 보겠습니다.
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;
}
여기서 트릭은 테두리를 제거하고 필요한 특정 테두리만 추가한다는 것입니다. 이메일의 경우 테두리에 반경을 추가하여 더 둥글게 보이도록 했습니다. 아주 작은 코드로 이미 몇 가지 좋은 개선 사항을 만들었습니다.
주의 사항:드롭다운
스타일을 지정할 수 있는 또 다른 입력은 드롭다운입니다. 하지만 주의사항이 있습니다. input[type="select"]을 하면 드롭다운을 선택하지 않습니다. select를 사용해야 합니다. 드롭다운을 선택하는 키워드입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
select {
padding: 2rem;
font-size: 2rem;
width: 25rem;
border: none;
border-bottom: 0.3rem solid mediumspringgreen;
}
기타 입력 스타일
지금쯤이면 입력 스타일 지정에 익숙해질 것입니다. 또한 이미 스타일 패턴이 있는 것 같습니다. 숫자 및 날짜 입력에 스타일 패턴을 추가해 보겠습니다.
input[type="number"], input[type="date"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
CSS를 몇 번만 사용하면 매우 쉬운 선택기를 사용하여 입력 내용을 새롭게 볼 수 있습니다!
이것은 시작에 불과하므로 무엇을 더 달성할 수 있는지 상상해 보십시오.
사실, Codepen에서 일부 입력을 완료하지 않은 채로 두었습니다. 따라서 원하는 스타일을 적용하십시오. 당신은 이미 그것을 하는 방법을 알고 있습니다. 힘내세요!