vw를 px로 변환 Viewport width ↔ Pixels 무료 온라인 안전

vw를 px로 변환하는 이유

스타일시트에 히어로 제목에는 font-size: 5.2vw가, 섹션에는 margin-top: 8vw가, 그림에는 width: 42vw가 적혀 있습니다. 이들은 유연한 값이며 화면에 실제로 무엇이 있는지 알려 주지 않습니다. 휴대폰에서 제목은 얼마나 클까? 노트북에서 그림은 얼마나 넓을까? 1920픽셀에서 여백은 알맞아 보일까? 알아보려면 vw를 px로 변환합니다. 숫자에 창의 너비를 곱하고 백으로 나눈 다음, 디자이너, 테스터, 고객이 쓰는 단위로 답을 읽습니다. 유동적인 코드를 검토하거나, 빌드를 시안과 대조하거나, 좁은 화면에서 제목이 왜 작아 보이는지 동료에게 설명할 때 하는 일입니다.

이 변환이 rem이나 em과 다른 점은 곱하는 값이 창 자체라는 것입니다. 한 vw는 뷰포트 너비의 백분의 일이므로 5.2vw는 너비 1000 px의 창에서는 52 px, 너비 360 px의 휴대폰에서는 18.7 px, 1920의 넓은 모니터에서는 99.8 px입니다. 기댈 기본값이 없고, 독자가 휴대폰을 돌리거나 창을 끌면 너비가 바뀝니다. 그래서 변환기는 너비를 물어보고, 답 옆에 보여 주며, 디자인이 흔히 그려지는 너비인 1440 px에서 시작합니다.

계산은 브라우저 안에서 이루어지며 아무것도 업로드되지 않습니다. 아래에서는 공식, 변환이 유지하는 것과 유지하지 못하는 것, 유동적인 스타일시트를 여러 너비에서 읽는 방법, 스크롤바의 함정, 순수 vw로만 된 텍스트의 접근성 문제, 유동적인 코드를 이해하기 쉽게 유지하는 몇 가지 습관을 설명합니다.

공식과 너비

px는 vw 곱하기 너비를 백으로 나눈 값입니다

공식은 px = vw × 너비 ÷ 100입니다. 너비 1440 px에서 10 vw는 144 px, 5 vw는 72 px, 1.667 vw는 24 px가 됩니다. 페이지가 결과 옆에 너비를 함께 적으므로, 10 vw = 144 px (1440 px) 같은 줄이 무엇을 가정했는지 알려 줍니다. 다른 화면을 보려면 너비를 바꾸고 결과를 다시 읽으십시오.

어떤 너비를 시험해 볼까

확인해 볼 만한 묶음은 휴대폰용 360 또는 390, 세로 태블릿용 768, 작은 노트북용 1024, 일반적인 노트북이나 데스크톱용 1440, 풀HD 모니터용 1920입니다. 너비 칸에 하나씩 입력하고 결과를 기록하십시오. 다섯 번의 판독이 값의 전체 범위를 보여 주며 극단은 눈에 띕니다.

실제 창의 너비 쓰기

브라우저의 개발자 도구에서 기기 툴바는 창의 너비를 픽셀로 보여 줍니다. 그 숫자로 페이지가 하는 일과 변환기가 말하는 것을 비교하십시오. 일치한다면 스타일시트에 대한 여러분의 해석이 맞습니다.

변환이 유지하는 것과 유지하지 못하는 것

화면에서 차지하는 비율을 유지합니다

한 vw는 뷰포트 너비의 백분의 일이므로 vw로 쓴 크기는 제자리에 머무르지 않고 창과 함께 커지고 작아집니다. 얻는 픽셀 값은 그 비율을 특정한 너비에서 구체적으로 만든 것입니다.

기본값을 줄 수 없습니다

rem과 달리 vw에는 기본값이 없습니다. 브라우저는 아무도 달리 말하지 않으면 루트 글꼴 크기를 16 px로 주므로 rem 페이지는 실제 숫자에서 출발할 수 있습니다. 뷰포트 너비는 독자의 창이 얼마나 넓은지에 따를 뿐이고, 휴대폰을 돌리면 바뀝니다. 여기의 1440 px는 디자인이 흔히 그려지는 너비로, 표준이 아니라 습관입니다. 자신의 값을 입력하십시오.

반올림

너비를 곱하고 100으로 나누면 소수가 나올 수 있습니다. 1440 px에서 6.67 vw는 96.048 px입니다. 브라우저는 소수 픽셀을 다루지만, 디자인 파일에 정수가 필요하다면 반올림하고 그 반올림이 여러분의 것임을 적어 두십시오.

유동적인 스타일시트 읽기

세 가지 너비를 잡고 결과를 적으십시오

예를 들어 375, 1024, 1920처럼 좁은 너비, 중간 너비, 넓은 너비를 고르십시오. 스타일시트의 중요한 vw 값마다 각 너비에서 vw를 px로 변환하고 세 숫자를 메모에 적으십시오. 5.2 vw의 제목은 19.5, 53.2, 99.8 픽셀을 줍니다. 이렇게 보면 제목이 좁은 쪽에서 읽을 만한지, 넓은 쪽에서 압도적이지 않은지 알 수 있습니다.

clamp를 찾아보십시오

잘 쓴 유동적 코드는 clamp(최소, 선호, 최대)로 vw에 한계를 둡니다. clamp(2rem, 1rem + 4vw, 6rem)이 보이면 크기는 32와 96 px 사이에서 커지고 양 끝에서 멈춥니다. vw 부분을 변환할 때는 그것이 범위의 중간일 뿐이며 끝에서 일어나는 일은 한계가 정한다는 점을 기억하십시오.

극단을 확인하십시오

위험한 너비는 가장 작은 것과 가장 큰 것입니다. 320 px에서 6 vw의 제목은 19 px이고 2560에서는 154 px입니다. 둘 다 받아들일 만하지 않고 clamp도 없다면 스타일시트에 한계가 필요합니다.

vw를 px로 변환할 때의 함정

스크롤바

데스크톱 브라우저에서 vw에 쓰이는 뷰포트 너비에는 세로 스크롤바의 너비가 포함됩니다. 그래서 페이지가 스크롤될 때 100vw는 보이는 영역보다 조금 더 넓으며, 많은 시스템에서 15에서 17 픽셀쯤 됩니다. 따라서 계산한 픽셀 값은 그것이 나타내는 듯한 보이는 너비보다 약간 큽니다. 스크롤바가 페이지 위에 겹쳐 나타나는 휴대폰에서는 이 효과가 없습니다.

잘못된 너비 쓰기

결과는 입력한 너비만큼만 맞습니다. 시험 창이 1366 px인데 1440으로 변환하면 모든 값이 약 오 퍼센트 어긋납니다. 실제 너비를 개발자 도구에서 읽으십시오.

vw와 퍼센트 혼동하기

50%의 너비는 부모의 너비를 가리키는 반면 50vw는 창을 가리킵니다. 좁은 컨테이너 안에서 둘은 매우 다릅니다. 변환기는 vw의 답을 주며, 요소가 컨테이너 안에 있다면 부모가 창보다 좁을 수 있습니다.

vw로 된 텍스트는 확대할 수 없다는 점을 잊는 것

vw로만 크기를 정한 텍스트는 독자가 페이지를 확대해도 반응하지 않는데, 창과 텍스트가 함께 확대·축소되기 때문입니다. 접근성 지침은 텍스트의 크기를 조절할 수 있어야 한다고 요구합니다. clamp()에서처럼 rem 항을 더하여 텍스트가 확대에도 반응하도록 하십시오.

변환 전에 사람들이 묻는 질문

1 vw는 몇 픽셀인가요?

창 너비의 백분의 일입니다. 1440에서는 14.4 px, 1000에서는 10 px, 360에서는 3.6 px입니다.

50 vw는 몇 픽셀인가요?

창의 절반입니다. 너비 1440에서는 720 px, 너비 1000에서는 500 px입니다.

내 페이지가 왜 화면보다 넓은가요?

스크롤되는 페이지의 100vw 상자는 스크롤바가 포함되어 보이는 영역보다 넓습니다. 대신 컨테이너 안에서 100%를 쓰십시오.

vw는 퍼센트와 같은가요?

아니요. 퍼센트는 부모를, vw는 창을 가리킵니다.

제 숫자가 업로드되나요?

아니요. 계산은 브라우저에서 실행되며 아무것도 어디로도 전송되지 않습니다.

거꾸로 가려면 어떻게 하나요?

곱하는 대신 너비로 나누는 px를 vw로 변환을 쓰십시오.

흔한 너비에서의 흔한 값

머릿속 표

변환기를 쓰기 전에 어림할 수 있도록 몇 가지 기준점을 알아 두면 도움이 됩니다. 너비 1000 px에서 1 vw는 10 px라서 계산이 쉽습니다. 2.5 vw는 25 px, 8 vw는 80 px입니다. 1440 px에서 1 vw는 14.4 px입니다. 375 px에서 1 vw는 3.75 px이므로 8 vw의 제목은 30 px입니다. 빠른 확인을 위해 vw를 px로 변환할 때는 이런 기준점 중 하나에서 출발해 비례해서 늘리십시오.

세 가지 너비, 하나의 스타일시트

너비 80vw, 간격 4vw, 제목 6vw의 카드를 생각해 보십시오. 375 px의 휴대폰에서는 300 px, 15 px, 22.5 px입니다. 768 px의 태블릿에서는 614 px, 30.7 px, 46 px입니다. 1440 px의 데스크톱에서는 1152 px, 57.6 px, 86.4 px입니다. 세 가지를 나란히 보면 데스크톱에서 카드가 너무 넓고 제목이 너무 크다는 것, 그리고 아마 최대 너비와 clamp가 필요하다는 것을 단번에 알 수 있습니다.

뷰포트를 넘어서

컨테이너 단위

더 새로운 CSS는 창 대신 컨테이너에 상대적인 단위를 제공합니다. 컨테이너 너비의 백분의 일인 cqw 같은 것입니다. 좁은 사이드바에 놓인 컴포넌트가 창 전체를 가진 듯 행동하는 문제를 풀어 줍니다. 이를 쓴다면 계산은 컨테이너의 너비를 바탕으로 vw와 같으며, 그 너비를 입력해서 이 변환기를 쓸 수 있습니다.

작은, 큰, 동적 뷰포트

휴대폰에서는 주소창이 밀려 사라지면서 보이는 영역이 바뀝니다. 높이에는 더 새로운 단위인 svh, lvh, dvh가 작은, 큰, 동적 뷰포트를 나타냅니다. 너비는 주소창이 영향을 주지 않으므로 상황이 더 단순하고 vw는 안정적입니다. 모바일에서 유동적 디자인에 vw가 vh보다 안전한 단위인 또 하나의 이유입니다.

퍼센트, vw, 그리드

퍼센트 너비는 부모를 따르고, vw는 창을 따르며, CSS 그리드와 플렉스박스는 사용 가능한 공간을 따릅니다. 가장 좋은 유동적 레이아웃은 구조에는 그리드와 퍼센트를 쓰고 글자와 간격에만 vw를 쓰는 경우가 많은데, 그런 것들이 화면을 직접 따르는 데서 이득을 보기 때문입니다. 레이아웃을 확인하려고 vw를 px로 변환할 때는 그리드 트랙이 같은 말을 더 견고하게 했을지 자문해 보십시오.

CSS를 쓰지 않는 사람에게 vw 설명하기

창을 자로 쓰십시오

고객과 동료는 vw가 화면 너비의 일 퍼센트라고 말해 주면 대개 개념을 이해합니다. 5 vw의 제목은 화면 폭의 오 퍼센트라는 뜻입니다. 그런 다음 두 숫자를 보여 주십시오. 그들 자신의 휴대폰에서와 회의실의 큰 모니터에서 얼마가 되는지입니다. 두 너비에 대해 vw를 px로 변환하고 결과를 소리 내어 말하면, 화면과 함께 움직이는 크기라는 개념이 구체적이 됩니다.

디자인이 고정되지 않은 이유 말하기

기술 배경이 없는 이해관계자는 때때로 제목에 하나의 크기만 두면 안 되느냐고 묻습니다. 답은 가장 작은 휴대폰과 가장 큰 모니터 사이에서 화면이 일곱 배나 여덟 배 차이가 나며, 하나에 맞는 고정 크기가 다른 쪽에는 틀리다는 것입니다. 유동적 단위가 해답이고, 이 페이지의 픽셀 수치는 같은 값을 화면이 얼마나 바꾸는지 보여 줍니다.

이 단위들은 어디서 왔을까

CSS 픽셀

디스플레이의 밀도를 예측할 수 없게 되자, 실제 픽셀로 측정한 페이지는 화면이 선명해질수록 쪼그라드는 페이지가 되었습니다. 그래서 CSS 픽셀은 편안한 독서 거리에서 본 약 1/96 인치라는 기준 길이로 재정의되었습니다. 이 페이지가 답을 주는 단위입니다.

뷰포트 단위

vw는 반응형 디자인과 함께 도착했습니다. 뷰포트 너비가 얼마든 그 백분의 일입니다. 루트 글꼴 크기에 상대적인 rem과 요소에 상대적인 em 곁에 있습니다. 같은 픽셀 값이 그 단위들로는 어떻게 보이는지 확인하려면 rem을 px로 변환하여 비교해 보십시오.

유동적인 코드를 이해하기 쉽게 하는 습관

픽셀 값을 주석으로 달기

font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 360에서 32px, 1440에서 96px */ 같은 줄은 몇 단어면 되고 다음 독자의 여러 번의 변환을 아껴 줍니다.

디자인 너비를 한 곳에 두기

프로젝트에 디자인이 그려진 너비를 위한 사용자 지정 속성이 있다면, 모든 vw 값을 그것으로 추적할 수 있습니다. 검토를 위해 vw를 px로 변환할 때 어느 너비를 쓸지 알 수 있습니다.

vw는 아껴 쓰기

vw 값의 짧은 목록은 추론하기 쉽습니다. 모든 것이 vw로 된 스타일시트는 그렇지 않습니다. 디스플레이 글자, 큰 간격, 아트워크에만 쓰십시오.

중요할 때는 실제 기기로 시험하기

브라우저 도구는 너비를 잘 시뮬레이션하지만, 실제 휴대폰은 주소창, 회전, 확대의 진짜 동작을 보여 줍니다. 기기에서의 오 분짜리 확인이 시뮬레이션이 놓치는 것을 잡아냅니다.

관련 변환기

같은 계열의 도구가 인접한 변환을 다룹니다. vw로 되돌아가려면 px를 vw로 변환을 쓰십시오. 루트에 상대적인 크기에는 px를 rem으로 변환과 rem을 px로 변환이, 요소에 상대적인 크기에는 px를 em으로 변환과 em을 px로 변환이 있습니다. 같은 스타일시트의 색에는 HEX를 RGB로 변환과 RGB를 HEX로 변환이 표기를 처리합니다.

실제 사용 예

테스터가 작은 휴대폰에서 히어로 제목이 읽기 어렵다고 보고했다고 해 봅시다. 스타일시트에는 한계 없이 font-size: 5.2vw라고 적혀 있습니다. 360에서 vw를 px로 변환하면 18.7 px, 768에서는 39.9 px, 1440에서는 74.9 px가 읽힙니다. 좁은 쪽에서 제목은 본문보다 조금 클 뿐이어서 더 이상 제목으로 읽히지 않습니다. clamp(2rem, 1rem + 4vw, 5rem)을 제안하면 가장 좁은 곳에서는 32 px, 768에서는 약 51 px, 가장 넓은 곳에서는 5rem, 곧 80 px가 됩니다. 테스터는 이제 잘 읽힌다고 확인하고, 제목은 여전히 비례해서 커집니다.

간단한 점검표

변환 전

개발자 도구나 대상 기기 목록에서 신경 쓰는 너비를 고르십시오.

변환 중

vw 값과 각 너비를 차례로 입력하고, 기준 옆에 표시되는 픽셀을 기록하십시오.

변환 후

극단을 살펴보십시오. 어느 쪽 끝에서든 크기가 너무 작거나 크면 clamp()로 한계를 더하십시오.

흔한 실수

하나의 답을 가정하기

vw 값은 너비마다 다른 픽셀 크기를 갖습니다. 모든 수치에 너비를 함께 적으십시오.

스크롤바를 잊기

100vw에는 스크롤바가 포함되어 있어서 전체 너비 상자가 넘칠 수 있습니다.

본문을 vw만으로 크기 정하기

확대할 수 없습니다. rem 항과 한계를 더하십시오.

숫자는 기기에 머뭅니다

계산은 로컬에서 이루어집니다. 값은 여러분 자신의 브라우저가 쓰며 아무것도 어디로도 전송되지 않습니다. 나중에 지울 것도, 만들어야 할 계정도 없습니다. 이것이 vw를 px로 변환하는 소박한 방법입니다.

요약

여기서 vw를 px로 변환하려면 vw로 된 크기와 창의 너비를 입력하고, 공식 px = vw × 너비 ÷ 100에 따라 결과를 픽셀로 바로 읽으십시오. 너비는 디자인이 흔히 그려지는 너비인 1440 px에서 시작하지만 표준이 아니라 습관이므로 자신의 값을 입력하십시오. 변환은 화면에서 차지하는 비율을 유지합니다. 한 vw는 뷰포트 너비의 백분의 일이므로 vw로 된 크기는 창과 함께 커지고 작아집니다. rem과 달리 vw에는 기본값이 없는데, 뷰포트는 독자의 창이 얼마나 넓은지에 따르기 때문입니다. 텍스트에는 clamp() 안에서 vw를 rem과 결합하여 읽기 쉽고 확대할 수 있게 유지하십시오. 아무것도 업로드되지 않습니다.