Intrinsic Sizing
고유 크기 조정
고유 크기 조정은 요소의 콘텐츠가 외부에서 정해진 고정 크기만 사용하는 대신 크기를 결정하는 데 도움을 주도록 합니다.
다른 예시
대시보드 사이드바는 `fit-content(24rem)`을 사용합니다. 번역된 라벨에 따라 최대 24rem까지 확장될 수 있으며, 보고서는 남은 공간을 차지합니다. 70자짜리 케이스 ID는 줄 바꿈될 수 있습니다. 이는 `min-content` 크기가 전체 페이지를 가로로 스크롤하게 만드는 것을 막습니다.
주요 부분
- 01콘텐츠 기여
- 02사용 가능한 공간
- 03사용된 크기 해결됨
사용할 때
콘텐츠가 크기에 영향을 주면서도 명확한 레이아웃 한계 안에 있도록 크기 관련 내재 단어와 함수를 사용하십시오.
다음 경우에는 사용하지 마세요
긴 텍스트(줄바꿈 없음), 이미지 및 기타 대체 요소, 번역, 기본 최소 크기를 테스트한 후 의존하세요.
코드에서 사용된 이름
min-content, max-content, fit-content(), and intrinsic size contributions 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 고유 크기 조정 (Intrinsic Sizing)。 User context：대시보드 사이드바는 `fit-content(24rem)`을 사용합니다. 번역된 라벨에 따라 최대 24rem까지 확장될 수 있으며, 보고서는 남은 공간을 차지합니다. 70자짜리 케이스 ID는 줄 바꿈될 수 있습니다. 이는 `min-content` 크기가 전체 페이지를 가로로 스크롤하게 만드는 것을 막습니다. Design concept to apply：고유 크기 조정 (Intrinsic Sizing)。 Why it fits：콘텐츠가 크기에 영향을 주면서도 명확한 레이아웃 한계 안에 있도록 크기 관련 내재 단어와 함수를 사용하십시오. Do not use it when：긴 텍스트(줄바꿈 없음), 이미지 및 기타 대체 요소, 번역, 기본 최소 크기를 테스트한 후 의존하세요. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 고유 크기 조정 (Intrinsic Sizing) is used now. Definition: 고유 크기 조정은 요소의 콘텐츠가 외부에서 정해진 고정 크기만 사용하는 대신 크기를 결정하는 데 도움을 주도록 합니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.