clamp()
clamp()
`clamp()`는 선호하는 CSS 값을 선택하지만 최소값과 최대값 사이로 유지합니다.
다른 예시
헤드라인은 `clamp(2rem,1.2rem + 3vw,4.5rem)`을 사용합니다. 휴대폰에서 데스크탑까지 부드럽게 커지지만 32px 아래로 내려가거나 72px 이상으로 올라가지 않습니다. 이 규칙이 `rem` 단위를 유지하기 때문에 브라우저 줌도 여전히 작동합니다.
주요 부분
- 01최소
- 02선호 표현
- 03최대
사용할 때
값이 부드럽게 변해야 하지만 명확하고 읽기 쉬운 한계 내에 유지되어야 할 때 사용하세요. 필요할 경우 상대 단위와 뷰포트 단위를 혼합하세요.
다음 경우에는 사용하지 마세요
텍스트의 경우, 선호 값을 뷰포트 단위만 사용하지 마세요. 확대/축소, 짧은 화면 및 매우 긴 번역을 테스트하세요.
코드에서 사용된 이름
clamp(minimum, preferred, maximum) 출시하기 전에
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 clamp() (clamp())。 User context：헤드라인은 `clamp(2rem,1.2rem + 3vw,4.5rem)`을 사용합니다. 휴대폰에서 데스크탑까지 부드럽게 커지지만 32px 아래로 내려가거나 72px 이상으로 올라가지 않습니다. 이 규칙이 `rem` 단위를 유지하기 때문에 브라우저 줌도 여전히 작동합니다. Design concept to apply：clamp() (clamp())。 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 clamp() (clamp()) is used now. Definition: `clamp()`는 선호하는 CSS 값을 선택하지만 최소값과 최대값 사이로 유지합니다. 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.