수정 가능한 콘텐츠로 요소의 크기를 자동으로 조정하는 한 줄의 코드입니다.
field-sizing가 없는 경우 적절한 크기의 입력란을 만들려면 텍스트 입력란 입력의 평균 크기로 추측하거나 자바스크립트를 사용하여 문자 수를 계산하고 사용자가 텍스트를 입력할 때 요소 높이 또는 너비를 늘려야 합니다. 즉, 쉽지 않았으며 사용자가 입력한 콘텐츠를 따라가려고 할 때 오류가 발생하기 쉬웠습니다.
field-sizing를 사용하면 콘텐츠에 따라 크기를 조정하려면 CSS 한 줄이 필요합니다. 이 콘텐츠 기반 크기 조정 스타일은 텍스트 영역 외에도 다양한 영역에서 작동합니다.
textarea, select, input {
field-sizing: content;
}
빠른 링크
짧은 형식 동영상을 좋아하시나요?
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의 영향을 받는 각 양식 요소의 이전과 이후 동작을 보여주는 간단한 대화형 예시입니다.
자세히 살펴보기
[placeholder]를 사용하면 자리표시자는 콘텐츠가 됩니다. 이는 이전에 언급했지만 여기에서 언급했습니다. 양식의 스타일을 지정할 때 알아야 하기 때문입니다. 길거나 짧은 자리표시자는 field-sizing:
content로 입력의 고유 크기를 변경합니다.
비어 있고 오버플로 스타일 처리
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의 기본값은 fixed이며 fixed 또는 content의 두 가지 값만 허용합니다.