반응형 CSS 계산기
작은 화면과 큰 화면의 크기를 정해 부드럽게 변하는 CSS clamp 값을 만들어요.
파일과 입력값은 이 브라우저 밖으로 나가지 않아요.
입력
반응형 CSS 계산기 소개
작은 화면과 큰 화면에서 원하는 글자 크기를 지정하면 그 사이를 부드럽게 연결하는 CSS clamp 식을 만들어요. 양 끝 크기는 rem, 변화량은 vw를 사용해 화면 너비에 따라 크기가 달라지도록 계산해요. 디자이너와 개발자가 반응형 타이포그래피를 조정할 때 사용할 수 있고 완성한 선언을 CSS 파일로 저장할 수 있어요.
두 화면 너비를 연결하는 선형 계산
작은 화면의 너비와 글자 크기, 큰 화면의 너비와 글자 크기로 기울기를 구해요. 화면이 넓어질수록 그 기울기만큼 크기가 변하고 clamp가 최소·최대 범위를 제한해요. 두 글자 크기가 같으면 고정 크기에 해당하며 큰 화면의 크기를 더 작게 설정하는 감소 형태도 계산할 수 있어요.
입력하는 너비는 기기 이름이 아니라 CSS 뷰포트의 픽셀 너비예요. 같은 기기라도 창 크기나 화면 배율에 따라 달라질 수 있어요. 결과는 font-size 선언으로 제공하지만 길이 값을 받는 다른 CSS 속성에 사용할 때는 해당 속성의 의미와 최소 크기도 함께 확인하세요.
rem 기준과 접근성을 함께 점검하기
rem으로 바꿀 때는 입력한 기준 글꼴 크기로 픽셀 값을 나눠요. 기본값 16은 흔히 쓰는 예시이고 사이트의 루트 글꼴 크기가 다르면 계산 결과도 달라져요. rem과 vw를 함께 사용하므로 사용자의 글꼴 설정과 브라우저 확대 상황에서도 실제 표시를 확인하는 것이 좋아요.
이 계산기는 CSS 수식을 만드는 도구이며 자동으로 가독성이나 접근성 기준을 판정하지 않아요. 긴 제목의 줄바꿈, 작은 화면에서의 높이, 확대했을 때 텍스트가 잘리는지 등을 실제 콘텐츠로 검수하세요. CSS 숫자는 유효 숫자 12자리로 정리해 지나치게 긴 소수 표기를 줄여요.
반응형 CSS 계산기 사용 방법
- 작은 화면과 큰 화면의 CSS 너비를 입력해요.
- 각 화면에서의 크기와 1rem의 기준 픽셀 값을 정해요.
- 생성한 font-size 선언을 복사하고 실제 화면에서 확인해요.
자주 묻는 질문
- clamp가 무엇을 제한하나요?
- 가운데 계산값이 양쪽 경계를 벗어나면 최소값이나 최대값으로 제한해요.
- 큰 화면에서 더 작게 만들 수 있나요?
- 네. 큰 화면의 크기를 더 작게 넣으면 감소하는 식과 올바른 최소·최대 경계를 만들어요.
- 16px 기준을 꼭 써야 하나요?
- 아니요. 실제 사이트에서 1rem에 해당하는 루트 글꼴 크기를 입력하세요.
- 패딩이나 간격에도 쓸 수 있나요?
- 길이 값을 받는 속성에 수식을 활용할 수 있지만 출력 선언의 속성 이름은 직접 바꿔야 해요.
- 접근성 검사가 포함돼 있나요?
- 아니요. 수식만 계산해요. 확대·줄바꿈·가독성은 실제 페이지에서 확인해야 해요.
알아 두면 좋은 점
- 모든 값은 0 초과 100,000 이하로 입력해요. 큰 화면 너비는 작은 화면 너비보다 커야 해요.