max-content
최대 콘텐츠
`max-content`는 일반적인 줄 바꿈 지점에서 줄 바꿈하지 않는다면 콘텐츠가 원하는 크기입니다.
다른 예시
명령 패널은 바로가기 열에 `max-content`를 사용하여 “⌘ Shift P”가 한 줄에 유지되도록 합니다. 명령 이름은 `minmax(0,1fr)`을 사용하며, 대화 상자가 뷰포트 한계에 도달했을 때만 줄어듭니다. 긴 번역은 대화 상자를 그 한계보다 넓게 만들 수 없습니다.
주요 부분
- 01래핑 해제된 콘텐츠
- 02선호 내재적 크기
- 03외부 크기 제약
사용할 때
한 줄 내용이 중요하고 외부 제한으로 상자가 너무 넓어지지 않도록 해야 할 때 사용하세요.
다음 경우에는 사용하지 마세요
HTML을 긴 읽기 텍스트, 사용자가 쓴 텍스트 또는 너비 제한이 없는 상자에 사용하지 마십시오. 뷰포트를 초과할 수 있습니다.
코드에서 사용된 이름
width: max-content or a max-content grid track 출시하기 전에
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 최대 콘텐츠 (max-content)。 User context：명령 패널은 바로가기 열에 `max-content`를 사용하여 “⌘ Shift P”가 한 줄에 유지되도록 합니다. 명령 이름은 `minmax(0,1fr)`을 사용하며, 대화 상자가 뷰포트 한계에 도달했을 때만 줄어듭니다. 긴 번역은 대화 상자를 그 한계보다 넓게 만들 수 없습니다. Design concept to apply：최대 콘텐츠 (max-content)。 Why it fits：한 줄 내용이 중요하고 외부 제한으로 상자가 너무 넓어지지 않도록 해야 할 때 사용하세요. Do not use it when：HTML을 긴 읽기 텍스트, 사용자가 쓴 텍스트 또는 너비 제한이 없는 상자에 사용하지 마십시오. 뷰포트를 초과할 수 있습니다. 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 최대 콘텐츠 (max-content) is used now. Definition: `max-content`는 일반적인 줄 바꿈 지점에서 줄 바꿈하지 않는다면 콘텐츠가 원하는 크기입니다. 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.