CSS 필드 크기 조정

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

Adam Argyle

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

field-sizing를 사용하면 콘텐츠에 기반한 크기 조정을 사용 설정하는 CSS 한 줄이 필요합니다. 이 콘텐츠 기반 크기 조절 스타일은 textarea 외에도 적용할 수 있습니다.

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

Browser Support

• 123
• 123
• x
• 26.2

Source

빠른 링크

사양 | 설명

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

Wes Bos와 Jhey가 각각 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의 두 값만 허용합니다.