글리치

잘 설계된 양식은 사용자에게 도움이 되며 전환율을 높입니다. 작은 수정사항 하나만으로도 큰 차이를 만들 수 있습니다.

튜토리얼을 통해 이러한 권장사항을 알아보려면 결제 양식 권장사항 Codelab 및 주소 양식 권장사항 Codelab을 확인하세요.

다음은 모든 권장사항을 보여주는 결제 양식의 예입니다.

다음은 모든 권장사항을 보여주는 간단한 주소 양식의 예입니다.

예를 들어 다음 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로 배치했습니다.

CSS 그리드 레이아웃 자세히 알아보기

다중 열 레이아웃

일부 유형의 레이아웃의 경우 column-width 속성으로 반응형 열 수를 만들 수 있는 다중 열 레이아웃 (Multicol)을 사용할 수 있습니다. 데모에서 200px 열을 추가할 공간이 있으면 열이 추가되는 것을 볼 수 있습니다.