[field-sizing] 입력 길이에 맞춰 스스로 커지는 입력창을 CSS 한 줄로

한 줄 요약 - 입력창에 field-sizing: content 한 줄만 주면, 글을 칠수록 입력창이 스스로 키를 키웁니다. JS 높이 측정 코드가 사라져요.

이럴 때 필요해요

채팅 입력창이나 댓글 박스처럼 몇 줄이 들어올지 모르는 입력칸을 만들 때, 예전엔 입력할 때마다 자바스크립트로 내용의 실제 높이(scrollHeight, 스크롤 없이 다 보이려면 필요한 높이)를 재서 height를 다시 세팅해야 했습니다. 이벤트 리스너, 높이 리셋, 깜빡임 처리까지 손이 많이 갔죠. field-sizing: content는 이 모든 걸 CSS 한 줄로 끝내줍니다.

어떻게 동작하나

1. 입력칸에 field-sizing: content를 주면 브라우저가 이 칸의 크기는 내용에 맞춘다고 이해합니다.

2. 사용자가 줄을 추가하면 브라우저가 내용 높이를 다시 계산해 칸을 그만큼 늘립니다 (textarea는 높이, input은 너비).

3. max-height(또는 max-width)로 상한을 같이 주면 그 한계까지만 자라고, 더 넘치면 스크롤로 전환됩니다. 끝없이 커지는 걸 막는 안전장치예요.

핵심은 이거예요

높이를 JS로 재서 맞추는 일을 브라우저에게 넘기는 겁니다. field-sizing: content + max-height 두 줄이면 자동 확장 입력창의 90%가 끝납니다.

놓치기 쉬운 것

• 상한을 안 주면 긴 글에서 입력창이 화면을 다 잡아먹습니다. max-height(또는 max-width)를 꼭 함께 두세요.

• 아직 모든 브라우저가 지원하진 않습니다(Firefox는 152/2026-06 추가). @supports (field-sizing: content)로 감지해 미지원이면 기본 고정 높이로 두거나 JS 폴백을 붙이세요.

• input에 적용하면 높이가 아니라 가로 너비가 글자 수에 맞춰 변합니다. min-width를 줘서 너무 좁아지지 않게 하세요.

이런 곳에 써요

• 카카오톡/슬랙 같은 채팅 입력창 (한 줄로 시작해 여러 줄로 자람)

• 댓글/메모 작성 박스, 태그 입력처럼 길이가 제각각인 인라인 입력