Viewport 단위 계산기
브라우저 처리화면 크기 기준으로 vw, vh, vmin 값을 px로 환산해 레이아웃 값을 잡습니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다.
사용 전 확인
- 파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.
도구 실행입력 후 결과 확인
Viewport 단위 계산기 샘플 실행
브라우저 처리
화면 크기 기준으로 vw, vh, vmin 값을 px로 환산해 레이아웃 값을 잡습니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 화면 크기 기준으로 vw, vh, vmin 값을 px로 환산해 레이아웃 값을 잡습니다.
샘플 결과
Viewport 단위 계산기 샘플 결과 입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.
Viewport 단위 계산기 사용 안내
화면 크기 기준으로 vw, vh, vmin 값을 px로 환산해 레이아웃 값을 잡습니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 화면 크기 기준으로 vw, vh, vmin 값을 px로 환산해 레이아웃 값을 잡습니다.
Viewport 단위 계산기에서는 입력 조건을 바꿔 금액·기간·비율의 차이를 비교할 때 적합합니다.
사용 방법
- 도구 화면에 필요한 입력값이나 텍스트를 넣습니다.
- 계산, 생성, 변환 버튼을 눌러 결과를 확인합니다.
- Viewport 단위 계산기 화면에서 필요한 입력값이나 파일을 선택합니다.
- 조건과 선택 옵션을 확인한 뒤 실행 버튼을 누릅니다.
이럴 때 사용하세요
- Viewport 단위 계산기로 UI에 적용하기 전 시각 값을 빠르게 미리보기
- Viewport 단위 계산기 결과를 Media Query 생성기 작업 전후에 비교하며 디자인 시스템에 넣을 토큰이나 CSS를 정리하기
- Viewport 단위 계산기 결과를 확인한 뒤 Media Query 생성기 또는 Container Query 생성기에서 다음 작업을 이어갈 수 있습니다.
문제가 생겼을 때
Viewport 단위 계산기: 미리보기와 실제 화면이 다름
부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
Viewport 단위 계산기: 예상한 계산 결과와 차이가 큼
Viewport 단위 계산기에서 퍼센트와 소수, 월과 연, 세전과 세후 등 입력 단위를 하나씩 확인하세요.
활용 팁
- Viewport 단위 계산기 사용 시 단위, 기준일, 포함 항목과 반올림 방식을 확인하고 공식 기준과 대조하세요.
- Viewport 단위 계산기 결과가 도구 설명과 맞는지 원본 입력과 나란히 비교하세요.
- Viewport 단위 계산기에서 조건 하나만 바꿔 이전 결과와 비교하면 차이가 생긴 원인을 찾기 쉽습니다.