양식을 잘 디자인하면 사용자에게 도움이 되고 전환율을 높이는 데 도움이 됩니다. 한 번의 수정으로 큰 효과를 볼 수 있습니다.
다음은 모든 권장사항을 보여주는 간단한 결제 양식의 예입니다.
다음은 모든 권장사항을 보여주는 간단한 주소 양식의 예입니다.
예를 들어 다음 HTML은 1900년부터 2020년 사이의 출생 연도에 대한 입력을 지정합니다. type="number"를 사용하면 입력 값이 min 및 max로 지정된 범위 내의 숫자로만 제한됩니다. 범위 밖의 숫자를 입력하려고 하면 입력이 잘못된 상태로 설정됩니다.
다음 예시에서는 pattern="[\d ]{10,30}"를 사용하여 유효한 결제 카드 번호를 보장하고 공백을 허용합니다.
최신 브라우저는 email 또는 url 유형이 있는 입력에 대해서도 기본적인 유효성 검사를 실행합니다.
CSS 그리드 레이아웃
CSS 그리드 레이아웃을 사용하면 유연한 그리드를 간단하게 만들 수 있습니다.
백분율로 열을 만드는 대신 이전의 플로팅 예를 고려하면 그리드 레이아웃과 컨테이너에서 사용 가능한 공간의 일부를 나타내는 fr 단위를 사용할 수 있습니다.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
그리드를 사용하여 필요한 만큼의 항목이 있는 일반 그리드 레이아웃을 만들 수도 있습니다.
화면 크기가 줄어들수록 사용 가능한 트랙 수가 줄어듭니다.
아래 데모에는 각 행에 맞는 만큼의 카드가 있으며 최소 크기는 200px입니다.
다중 열 레이아웃
일부 레이아웃 유형의 경우 다중 열 레이아웃 (다중 열)을 사용할 수 있으며, 이 경우 column-width 속성으로 반응형 열을 만들 수 있습니다.
아래 데모에서는 다른 200px 열을 위한 공간이 있다면 열이 추가된 것을 확인할 수 있습니다.