CSS 필드 크기 조정

수정 가능한 콘텐츠가 있는 요소의 크기를 자동으로 조정하는 코드 한 줄입니다.

Adam Argyle

field-sizing가 없으면 적절한 크기의 입력란을 만들기 위해 텍스트 필드 입력의 평균 크기를 추측하거나 JavaScript를 사용하여 문자를 계산하고 사용자가 텍스트를 입력할 때 요소 높이 또는 너비를 늘려야 했습니다. 즉, 사용자가 입력에 입력한 콘텐츠를 따르려고 할 때 쉽지 않았고 오류가 발생하기 쉬웠습니다.

field-sizing를 사용하면 콘텐츠를 기반으로 크기 조정을 사용 설정하는 데 한 줄의 CSS가 필요합니다. 이 콘텐츠 기반 크기 조절 스타일은 텍스트 영역 외에도 사용할 수 있습니다.

textarea, select, input {
  field-sizing: content;
}

Browser Support

• 123
• 123
• 152
• 26.2

Source

빠른 링크

사양 | 설명

짧은 형식 동영상을 좋아하시나요?

Wes Bos와 Jhey는 각각 트위터에서 field-sizing를 소개하는 멋진 동영상을 제공합니다.

field-sizing의 영향을 받는 요소는 무엇인가요?

다음은 field-sizing가 작동하는 <form> 요소 목록과 각 요소에 미치는 영향에 대한 요약입니다.

<textarea>

입력은 min-inline-size로 축소되거나 자리표시자에 맞게 축소됩니다.

사용자가 입력하면 입력이 최대 인라인 크기에 도달할 때까지 인라인 방향으로 커집니다. 이 시점에서 텍스트가 줄바꿈되고 입력의 블록 크기가 새 줄에 맞게 커집니다.

<select> 및 <select multiple>

선택 요소가 선택한 옵션에 맞게 축소됩니다.

multiple 속성이 있는 선택은 가장 넓은 옵션에 맞게 커지고 옵션 수에 맞게 필요한 만큼 높아집니다.

<input type="text">, <input type="email">, <input type="number">

입력은 min-inline-size로 축소되거나 자리표시자에 맞게 축소됩니다.

사용자가 입력하면 입력이 max-inline-size에 도달할 때까지 인라인 방향으로 증가하며, 이 시점에서 오버플로가 입력 값을 클립합니다.

<input type="file">

입력란이 버튼과 미리 입력된 파일 이름 텍스트로 축소됩니다.

파일을 업로드하면 입력이 버튼과 파일 이름 텍스트만큼 넓어집니다.

결과 확인, 테스트, 비교

다음은 field-sizing의 영향을 받는 각 양식 요소의 전후 동작을 보여주는 대화형의 최소 예입니다.

Codepen에서 사용해 보기

자세히 살펴보는 중

[placeholder]를 사용하면 자리표시자가 콘텐츠가 됩니다. 이 내용은 앞서 언급되었지만 양식의 스타일을 지정할 때 알아야 할 중요한 사항이므로 여기에서 다시 언급합니다. 길거나 짧은 자리표시자는 field-sizing: content를 사용하여 입력의 고유 크기를 변경합니다.

Codepen에서 사용해 보기

비어 있는 스타일 및 오버플로 스타일 처리

field-sizing을 사용하려면 추가 작업을 해야 합니다. Ahmad Shadeed는 이를 '방어적 CSS'라고 부릅니다. 이 경우 목표는 무언가가 어떻게 작동하거나 보여야 하는지 정확하게 설명하는 것이 아니라 바람직하지 않은 시각적 상태가 되지 않도록 보호하는 것입니다. 이전에는 입력에 상당한 양의 고정 크기가 있었지만 field-sizing: content를 적용한 후에는 입력이 너무 작거나 너무 커질 수 있습니다.

다음 스타일을 시작점으로 사용하는 것이 좋습니다. 요소가 너무 작은 상자로 축소되지 않도록 하고 textarea의 경우 너무 커지지 않도록 합니다.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

이 CSS는 크기 조절에 상대 단위를 사용합니다. 새로운 lh 단위는 블록 크기에 적합하고 ch는 인라인 크기에 적합합니다.

field-sizing의 기본값은 무엇인가요?

field-sizing의 기본값은 fixed이며 fixed 또는 content의 두 값만 허용합니다.