---
type: note
kind: Reference
tags: ['field-sizing', 'input', 'textarea', 'select']
status: release
ctime: 2025-01-12
mtime: 2025-01-12
generated: { by: human:cbcruk, at: 2025-03-01T04:55:13Z }
verified: { by: claude/opus-5, at: 2026-08-19T00:00:00Z }
sources:
  - id: developer-chrome-docs-css-ui
    resource: https://developer.chrome.com/docs/css-ui/css-field-sizing?&hl=ko
    title: "CSS 필드 크기 조정"
---

import QuoteLink from '@components/QuoteLink.astro'

<QuoteLink url="https://developer.chrome.com/docs/css-ui/css-field-sizing?&hl=ko">
CSS 필드 크기 조정
</QuoteLink>



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

<textarea style={{ padding: '10px', fieldSizing: 'content' }}>{`textarea, select, input {
\tfield-sizing: content;
}`}</textarea>