CSS clamp() 생성기
최소·최대 크기와 뷰포트 범위로 반응형 clamp() 코드를 만듭니다. 미디어쿼리 없이 폰트 크기가 화면 폭에 따라 부드럽게 변하는 fluid typography에 사용합니다. 모든 계산은 브라우저에서만 이루어집니다.
- clamp() 값
- clamp(1rem, 0.884vw + 0.7928rem, 1.5rem)
- 사용 예시
- font-size: clamp(1rem, 0.884vw + 0.7928rem, 1.5rem);
자주 묻는 질문
clamp()는 어떻게 동작하나요?
clamp(최솟값, 선호값, 최댓값)은 선호값을 사용하되 범위를 벗어나지 않게 고정합니다. 선호값을 'vw + rem' 형태의 일차식으로 두면 뷰포트 폭에 비례해 크기가 변합니다.
vw 계수와 rem 절편은 어떻게 계산되나요?
두 점 (최소 뷰포트, 최소 크기)와 (최대 뷰포트, 최대 크기)를 지나는 직선의 기울기와 절편입니다. 기울기 × 100이 vw 계수가 되고 절편은 16px = 1rem으로 환산합니다.
rem을 쓰는 이유는 무엇인가요?
사용자가 브라우저 기본 글꼴 크기를 키웠을 때 함께 커지도록 하기 위해서입니다. 순수 vw만 쓰면 브라우저 확대·접근성 설정이 무시되어 WCAG 위반이 될 수 있습니다.
관련 도구
px·rem·em·pt·% 를 기준 폰트 크기에 맞춰 상호 변환합니다. 반응형 타이포그래피 작업에 유용하며 모든 계산은 브라우저에서만 이루어집니다.
오프셋·블러·확산·색상·투명도를 조절해 CSS box-shadow 코드를 만들고 실시간 미리보기로 확인합니다. inset 안쪽 그림자를 지원하며 모든 처리는 브라우저에서만 이루어집니다.
두 색상과 각도로 CSS linear-gradient·radial-gradient 코드를 만들고 실시간 미리보기로 확인합니다. 중간색 정보도 제공하며 모든 처리는 브라우저에서만 이루어집니다.
텍스트와 배경 색상의 대비율을 계산하고 WCAG 2.x AA·AAA 접근성 기준 통과 여부를 판정합니다. 웹 접근성 점검에 유용하며 모든 계산은 브라우저에서만 이루어집니다.
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
기준 색상에서 밝은 톤과 어두운 톤의 HEX 팔레트를 생성합니다. 디자인 시스템의 색 단계를 만들 때 유용하며 모든 처리는 브라우저에서만 이루어집니다.