양식 스타일 지정

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

가능한 한 많은 사용자가 양식에 액세스할 수 있도록 하려면 작업: <input>, <textarea>, <select> 및 <button>. 이는 사용 가능한 양식의 기준입니다.

기본 브라우저 스타일이 멋져 보이지 않습니다. 변경해 보겠습니다.

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

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

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

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

사용자가 양식을 탐색할 수 있도록 지원

다음 단계로, 양식의 레이아웃을 변경하고 양식 요소의 간격을 늘리세요. 사용자가 함께 속한 요소를 이해할 수 있도록 돕습니다.

margin CSS 속성은 요소 간 공간을 늘립니다. padding 속성은 요소의 콘텐츠 주위 공간을 늘립니다.

일반 레이아웃의 경우 Flexbox 또는 Grid를 사용하세요. CSS 레이아웃 방법에 대해 자세히 알아보기

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

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

input,
textarea {
  border: 1px solid;
}

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

사이트 스타일에 맞게 <button>에 background를 사용해 보세요. 기본 border 스타일을 재정의하거나 삭제합니다.

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

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

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

이해도 확인

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

리소스

• CSS 알아보기
• CSS 레이아웃 메서드
• 포커스 표시기 설계
• <button>의 기본 스타일 되돌리기