양식 스타일 지정

사용자가 선호하는 브라우저에서 양식을 사용하도록 지원

가능한 한 많은 사용자가 양식에 액세스할 수 있도록 하려면 작업에 맞게 빌드된 요소(<input>, <textarea>, <select>, <button>)를 사용하세요. 이는 사용 가능한 양식의 기준입니다.

기본 브라우저 스타일은 훌륭하지 않습니다. 변경해 보겠습니다

모든 사용자가 양식 컨트롤을 읽을 수 있도록 설정

대부분의 브라우저에서 양식 컨트롤의 기본 글꼴 크기가 너무 작습니다. 양식 컨트롤을 읽을 수 있도록 하려면 CSS를 사용하여 글꼴 크기를 변경하세요.

font-size 및 line-height를 늘려 가독성을 개선합니다.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

사용자가 양식을 탐색할 수 있도록 돕기

다음 단계로, 양식의 레이아웃을 변경하고 양식 요소의 간격을 늘려 사용자가 어떤 요소가 서로에 속하는지 파악할 수 있도록 하세요.

margin CSS 속성은 요소 사이의 공간을 늘리고 padding 속성은 요소 콘텐츠 주변 공간을 늘립니다.

일반 레이아웃에는 Flexbox 또는 그리드를 사용합니다. CSS 레이아웃 방법 자세히 알아보기

양식 컨트롤이 양식 컨트롤처럼 표시되는지 확인

양식 컨트롤에 잘 알려진 스타일을 사용하여 사람들이 양식을 쉽게 작성할 수 있도록 하세요. 예를 들어 실선 테두리로 <input> 요소의 스타일을 지정합니다. 

input,
textarea {
  border: 1px solid;
}

사용자가 양식을 제출하도록 지원하기

<button>에 background를 사용하여 사이트 스타일과 일치시키고 기본 border 스타일을 재정의하거나 삭제해 보세요.

사용자가 현재 상태를 이해하도록 지원

브라우저는 :focus에 기본 스타일을 적용합니다. 색상이 브랜드와 일치하도록 :focus의 스타일을 재정의할 수 있습니다. 

button:focus {
    outline: 4px solid green;
}

이해도 테스트

양식 스타일 지정에 관한 지식 테스트

font-size에 상대 단위를 사용해야 하는 이유는 무엇인가요?

크기가 사용자 환경설정에 반응하도록 하기 위해
🎉
크기가 이전 요소에 반응하도록 하기 위해
다시 시도해 보세요.
크기가 어두운 모드에 반응하도록 하기 위해
다시 시도해 보세요.
크기가 미디어 쿼리에 응답하도록 하기 위해
다시 시도해 보세요.

양식 컨트롤 사이의 간격을 늘리려면 어떻게 해야 하나요?

padding CSS 속성 사용
다시 시도해 보세요.
spacer CSS 속성 사용
다시 시도해 보세요.
margin CSS 속성 사용
🎉
boundary CSS 속성 사용
다시 시도해 보세요.

자료