사용자가 선호하는 브라우저에서 양식을 사용하도록 지원
가능한 한 많은 사용자가 양식에 액세스할 수 있도록 하려면
작업: <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
에 상대 단위를 사용해야 하는 이유는 무엇인가요?
양식 컨트롤 사이의 간격을 늘리려면 어떻게 해야 하나요?
spacer
CSS 속성 사용padding
CSS 속성 사용boundary
CSS 속성 사용margin
CSS 속성 사용