양식 스타일 지정

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

가능한 한 많은 사용자가 양식에 액세스할 수 있도록 하려면 작업: <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;
}
드림

이해도 확인

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

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

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

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

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

리소스