CSS로 양식 스타일을 지정하는 방법 : 초보자 용 안내서

앱은 주로 양식을 통해 데이터를 수집합니다. 예를 들어 일반적인 가입 양식을 사용합니다. 사용자가 이름, 이메일 등과 같은 정보를 입력 할 수있는 여러 필드가 있습니다.

예전에는 웹 사이트에 단순하고 지루한 HTML 양식이있었습니다. 스타일이 없습니다. 그것은 CSS가 모든 것을 바꾸기 전이었습니다. 이제 CSS의 최신 기능을 사용하여 더 흥미롭고 생동감있는 양식을 만들 수 있습니다.

내 말만 믿지 마세요. 다음은 CSS가없는 일반적인 HTML 양식입니다.

다음은 약간의 CSS로 재즈 업된 동일한 양식입니다. .

이 자습서에서는 위에 표시된 양식을 다시 만드는 방법과 몇 가지 놀라운 시각적으로 인상적이고 사용자 친화적 인 양식을 만들기 위해 구현할 수있는 수정 사항입니다.

6 단계로 CSS로 양식 스타일을 지정하는 방법을 보여 드리겠습니다.

1. box-sizing
2. 입력 요소의 CSS 선택기
3. 텍스트 입력 필드의 기본 스타일 지정 방법
4. 기타 입력 유형 스타일 지정
5. UI 의사 클래스
6. 맞춤 설정할 수없는 입력

시작하기 전에 양식에 대한 특정 스타일이 없음을 이해하는 것이 중요합니다. 가능성은 당신의 상상력에 의해서만 제한됩니다. 이 가이드는 CSS를 사용하여 고유 한 디자인을 만드는 과정을 시작하는 데 도움을주기위한 것입니다.

시작하겠습니다!

상자 크기 설정

나는 보통 양식뿐만 아니라 웹 페이지에도 * {box-sizing:border-box;}를 설정합니다. 설정하면 모든 요소의 너비에 패딩이 포함됩니다.

예를 들어 너비와 패딩을 다음과 같이 설정합니다.

.some-class { width:200px; padding:20px;}

.some-class box-sizing:border-box는 너비가 200px보다 큽니다. 문제가 될 수 있습니다. 이것이 대부분의 개발자가 모든 요소에 border-box를 사용하는 이유입니다.

아래는 더 나은 코드 버전입니다. 또한 :before 및 :after 유사 요소를 지원합니다.

*, *:before, *:after { box-sizing: border-box;}

팁 : * 선택기는 문서의 모든 요소를 선택합니다.

입력 요소에 대한 CSS 선택기

가장 쉬운 선택 방법 입력 요소는 CSS 속성 선택기를 사용하는 것입니다.

이 선택기는 문서의 모든 입력 요소를 선택합니다. 선택기를 지정해야하는 경우 요소에 클래스를 추가해야합니다.

<input type="text" class="signup-text-input" />

다음 :

.signup-text-input { // styles here}

한 줄 텍스트 입력 필드에 대한 기본 스타일 지정 방법

한 줄 필드는 양식에 사용되는 가장 일반적인 입력 필드입니다. 일반적으로 한 줄 텍스트 입력은 테두리가있는 간단한 상자입니다 (브라우저에 따라 다름).

다음은 자리 표시자가있는 한 줄 필드에 대한 HTML 마크 업입니다.

<input type="text" placeholder="Name" />

다음과 같이 표시됩니다.

다음을 사용할 수 있습니다. 이 입력 필드를 더 매력적으로 만드는 CSS 속성

• 패딩 (내부 간격 추가)
• 여백 (입력 필드 주위에 여백 추가)
• 테두리
• 상자 그림자
• 테두리 반경
• 너비
• 글꼴

확대하자 이 속성 각각에.

패딩

입력 필드에 내부 공간을 추가하면 명확성을 높일 수 있습니다. padding 속성을 사용하여이를 수행 할 수 있습니다.

input { padding: 10px;}

여백

입력 필드 근처에 다른 요소가있는 경우 클러스터링을 방지하기 위해 주변에 여백을 추가 할 수 있습니다.

input { padding:10px; margin:10px 0; // add top and bottom margin}

테두리

대부분의 브라우저에서 텍스트 입력 필드에는 사용자 지정할 수있는 테두리가 있습니다.

.border-customized-input { border: 2px solid #eee;}

테두리를 모두 제거 할 수도 있습니다.

.border-removed-input { border: 0;}

도움말 : 반드시 배경색을 추가하거나 테두리가 제거 될 때 box-shadow를 추가합니다. 그렇지 않으면 사용자가 입력을 볼 수 없습니다.

일부 웹 디자이너는 노트북의 한 줄에 글씨를 쓰는 것처럼 느껴지기 때문에 아래쪽 테두리 만 표시하는 것을 선호합니다.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

상자 그림자

CSS box-shadow 속성을 사용하여 그림자를 추가 할 수 있습니다. 속성의 5 개 값을 사용하여 다양한 효과를 얻을 수 있습니다.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

테두리 반경

border-radius 속성은 양식의 느낌에 막대한 영향을 미칠 수 있습니다. 상자의 가장자리를 구부리면 입력 필드의 모양을 크게 변경할 수 있습니다.

.rounded-input { padding:10px; border-radius:10px;}

box-shadow 및 border-radius를 함께 사용하여 완전히 다른 모양과 느낌을 얻을 수 있습니다.

너비

width 속성을 사용하여 입력 너비를 설정합니다.

input { width:100%;}

글꼴

대부분의 브라우저는 양식 요소에 다른 글꼴 모음과 크기를 사용합니다. 필요한 경우 문서에서 글꼴을 상속 할 수 있습니다.

input, textarea { font-family:inherit; font-size: inherit;}

다른 입력 유형 스타일 지정

다음과 같은 다른 입력 유형의 스타일을 지정할 수 있습니다. 텍스트 영역, 라디오 버튼, 확인란 등. 자세히 살펴 보겠습니다.

텍스트 영역

텍스트 영역은 여러 줄 입력을 허용한다는 점을 제외하면 텍스트 입력과 유사합니다. 일반적으로 댓글, 메시지 등과 같은 사용자로부터 더 긴 형식의 데이터를 수집하고자 할 때 사용합니다. 이전에 논의한 모든 기본 CSS 속성을 사용하여 텍스트 영역의 스타일을 지정할 수 있습니다.

The resize 속성은 텍스트 영역에서도 매우 유용합니다. 대부분의 브라우저에서 텍스트 영역은 기본적으로 x 및 y 축 (값 : both)을 따라 크기를 조정할 수 있습니다. both, horizontal 또는 vertical로 설정할 수 있습니다.

내가 스타일을 지정한이 텍스트 영역을 확인하세요.

CodePen에서 Supun Kavinda (@SupunKavinda)의 Pen
dyomzez를
참조하세요.

이 예에서는 세로 크기 조정 만 허용하기 위해 resize:vertical를 사용했습니다. 이 방법은 성가신 가로 스크롤바를 방지하기 때문에 대부분의 양식에서 사용됩니다.

참고 : 자동 크기 조정 텍스트 영역을 만들어야하는 경우 JavaScript 접근 방식을 사용해야합니다.

체크 박스 및 라디오 버튼

기본 체크 박스와 라디오 버튼은 스타일을 지정하기 어렵고 더 복잡한 CSS (및 HTML)가 필요합니다.

스타일링 확인란을 선택하려면 다음 HTML 코드를 사용하세요.

<label>Name <input type="checkbox" /> <span></span></label>

참고 사항 :

• <label>는 <input>를 래핑합니다. <``label``> 내의 요소를 클릭하면 <input>가 클릭됩니다.
• 브라우저에서 많이 수정할 수 없기 때문에 <input>를 숨 깁니다.
• <span> 사용자 정의 확인란을 만듭니다.
• input:checked 의사 클래스 선택기를 사용하여 선택된 상태 및 맞춤 체크 박스 스타일

여기에 사용자 정의 확인란이 있습니다 (자세한 설명은 CSS의 주석 참조) :

Supun Kavinda의 펜
yLNKQBo ( @SupunKavinda)
CodePen에서.

맞춤 라디오 버튼은 다음과 같습니다.

Supun의
eYNMQNM 펜보기 Kavinda (@SupunKavinda)
CodePen.

두 예제에서 사용자 정의 요소를 만들기 위해 동일한 개념 (input:checked)을 사용했습니다.

p>

브라우저에서 확인란은 상자 모양이고 라디오 버튼은 둥글습니다. 사용자가 혼동하지 않도록 사용자 정의 입력에이 규칙을 유지하는 것이 가장 좋습니다.

메뉴 선택

메뉴 선택을 사용하면 사용자가 여러 항목에서 항목을 선택할 수 있습니다.

<select> 요소의 스타일을 지정하여 더욱 매력적으로 보일 수 있습니다.

select { width: 100%; padding:10px; border-radius:10px;}

그러나 드롭 다운 (또는 <option> 요소)은 OS에 따라 기본적으로 스타일이 지정되므로 스타일을 지정할 수 없습니다. 이러한 요소의 스타일을 지정하는 유일한 방법은 자바 스크립트로 맞춤 드롭 다운을 사용하는 것입니다.

버튼

대부분의 요소와 마찬가지로 버튼에도 기본 스타일이 있습니다.

<button>Click Me</button>

좀 더 멋지게 만들어 보겠습니다.

UI 의사 클래스

다음은 양식 요소와 함께 일반적으로 사용되는 일부 UI 의사 클래스입니다.

알림을 표시하는 데 사용할 수 있습니다. 요소 속성 기준 :

• :required
• :valid 및 :invalid
• :checked (이미 사용함)

사용 가능 각 상태에 대한 효과 생성 :

• :hover
• :focus
• :active

: required로 생성 된 메시지

입력이 필요하다는 메시지를 표시하려면 :

속성을 자바 스크립트로 사용하면 "Required" 메시지가 자동으로 제거됩니다.

및 :invalid 의사 클래스

: hover 및 : focus

:hover는 마우스 포인터가 위에있을 때 요소를 선택합니다. :focus는 포커스를받을 때 요소를 선택합니다.

이러한 가상 클래스는 종종 전환 및 약간의 시각적 변경을 만드는 데 사용됩니다. 예를 들어 너비, 배경색, 테두리 색상, 그림자 강도 등을 변경할 수 있습니다.이러한 속성과 함께 transition 속성을 사용하면 이러한 변경이 훨씬 더 원활 해집니다.

다음은 양식 요소에 대한 마우스 오버 효과입니다 (요소 위로 마우스를 가져가보세요).

CodePen에서 Supun Kavinda (@SupunKavinda)의
yLNKZqg
펜을 참조하십시오.

사용자가 요소를 볼 때 마우스를 가져 가면 요소가 실행 가능하다는 느낌을받습니다. 이것은 양식 요소를 디자인 할 때 중요한 고려 사항입니다.

(일부 브라우저에서) 양식 요소에 초점을 맞출 때 파란색 윤곽선이 나타납니다. :focus 가상 클래스를 사용하여 요소를 제거하고 요소에 포커스가있을 때 더 많은 효과를 추가 할 수 있습니다.

다음 코드는 모든 요소에 대한 포커스 개요를 제거합니다.

*:focus {outline:none !important}

포커스 개요를 추가하려면 :

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

다음과 같은 검색 입력을 보셨습니까? 집중할 때 규모? 이 입력을 시도해보세요.

CodePen에서
KKpoJJa by Supun Kavinda (@SupunKavinda)
펜을 참조하세요.

사용자 정의 할 수없는 입력

스타일링 양식 요소는 역사적으로 어려운 순서였습니다. 우리가 스타일을 잘 제어하지 못하는 몇 가지 양식 요소가 있습니다. 예 :

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

이러한 요소는 브라우저에서 제공되며 OS에 따라 스타일이 지정됩니다. 이러한 요소의 스타일을 지정하는 유일한 방법은 div, span 등과 같은 스타일 지정 가능한 HTML 요소를 사용하여 만든 사용자 지정 컨트롤을 사용하는 것입니다.

예를 들어 <input type="file"> 스타일을 지정할 때 기본 입력을 숨기고 사용자 정의 버튼을 사용할 수 있습니다.

양식 요소에 대한 사용자 정의 컨트롤은 다음과 같습니다. 대부분의 주요 JavaScript 라이브러리 용으로 개발되었습니다. GitHub에서 찾을 수 있습니다.

결론

이제 간단한 양식 요소의 스타일을 지정하는 방법과 브라우저 입력 필드의 스타일을 지정하기 어려운 경우 사용자 지정 컨트롤을 사용하는 방법을 이해해야합니다. 이 게시물의 시작 부분에서 언급했듯이 이것들은 CSS 양식 스타일링의 기본 구성 요소 일뿐입니다. 이 팁을 기초로 삼아 상상력을 발휘해야합니다.

마지막 팁으로 모든 양식을 반응 형으로 만드는 것을 잊지 마십시오.

더 많은 양식 디자인 영감을 찾고 계십니까? 이 CodePen 컬렉션을 확인하세요.