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의 영향을 받는 요소는 무엇인가요?

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

<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의 두 값만 허용합니다.