CSS 필드 크기 조정

수정 가능한 콘텐츠가 포함된 요소의 자동 크기 조절을 위한 코드 한 줄

Adam Argyle

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

field-sizing를 사용하면 콘텐츠를 기반으로 크기를 조절하려면 CSS 한 줄이 필요합니다. 이 콘텐츠 기반 크기 조절 스타일은 textarea 외에도 다른 요소에도 적용됩니다.

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

브라우저 지원

• 123
• 123
• x
• x

소스

빠른 링크

사양 | 설명

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

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

필드 크기 조정의 영향을 받는 요소는 무엇인가요?

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

<textarea>

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

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

<select> 및 <select multiple>

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

multiple 속성이 있는 select는 가장 넓은 옵션에 맞게 늘어나고 옵션 수에 맞게 필요한 높이가 됩니다.

<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를 사용하려면 몇 가지 추가 작업을 해야 합니다. 아흐마드 셰이드는 이를 '방어적 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 값만 허용됩니다.