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

px를 vw로 변환하는 이유

디자이너가 너비 1440 px로 그린 목업을 보냈는데, 히어로 제목은 96 px이고 섹션 간격은 72 px입니다. 실제 웹에서 이 페이지는 휴대폰에서는 360 px, 태블릿에서는 820 px, 대형 모니터에서는 2560 px로 보일 텐데, 디자이너는 제목이 그 각각에서 화면에 대한 비율을 유지하기를 바랍니다. 이를 위해 만들어진 단위가 뷰포트 너비, 곧 vw이고, 목업에서 거기에 이르는 방법이 px를 vw로 변환하는 것입니다. 픽셀 값을 디자인이 그려진 너비로 나누고 백을 곱합니다. 1440 px 캔버스의 96 px 제목은 6.67 vw이며, 그때부터는 화면이 얼마든 언제나 그 6.67퍼센트입니다.

그것이 뷰포트 단위의 약속이자 위험이기도 합니다. rem과 em은 브라우저가 합리적인 기본값으로 설정하는 글꼴 크기에서 출발합니다. vw에는 기본값이 전혀 없습니다. 뷰포트 너비는 독자의 창이 얼마나 넓은가 그대로이며, 휴대폰을 돌리거나 창을 끌면 바뀝니다. 그래서 변환기는 답이 달려 있는 하나의 수를 숨기지 않습니다. 디자인의 너비가 1440 px에서 시작하는 입력란에 있으며 목업에 맞게 바꿀 수 있습니다.

계산은 브라우저 안에서 이루어지며 아무것도 업로드되지 않습니다. 아래에는 공식, 변환이 지키는 것과 지키지 못하는 것, 뷰포트 단위가 도움이 되는 곳과 해가 되는 곳, 순수한 vw 글자가 낳는 접근성 문제, 그것을 해결하는 clamp 기법, 그리고 픽셀 목업을 유동적인 스타일시트로 바꾸는 방법이 있습니다.

공식과 너비

vw는 px를 너비로 나눈 값에 백을 곱한 것입니다

공식은 vw = px ÷ 너비 × 100입니다. 디자인 너비 1440 px에서 144 px는 10 vw, 72 px는 5 vw, 24 px는 1.667 vw가 됩니다. 페이지는 결과 옆에 144 px = 10 vw (1440 px)처럼 너비를 보여 주어 무엇을 가정했는지 알 수 있게 합니다. 한 vw는 뷰포트 너비의 백분의 일이므로 너비 1000 px의 창에서는 1 vw가 10 px와 같습니다.

1440은 어디서 오는가

여기의 1440 px는 디자인이 흔히 그려지는 너비일 뿐 표준이 아니라 습관입니다. 어떤 팀은 1280으로, 많은 팀은 1920으로 그리고, 모바일 디자인은 375나 390으로 그립니다. 정답은 없고 디자인 파일이 쓰는 너비만 있습니다. 직접 입력하십시오. 변환은 입력한 너비만큼만 좋습니다.

디자인 자체의 너비 쓰기

목업이 1920 px로 그려졌다면 1920을 입력하십시오. 같은 96 px 제목이 5 vw가 됩니다. 잘못된 너비로 px를 vw로 변환하면 페이지가 한 화면 크기에서는 맞아 보이고 다른 모든 크기에서는 틀려 보이는데, 찾아볼 줄 모르면 곤혹스러운 버그입니다.

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

화면에서 차지하는 몫을 지킵니다

한 vw는 뷰포트 너비의 백분의 일이므로 vw로 쓴 크기는 제자리에 머물지 않고 창과 함께 커지고 줄어듭니다. 결과는 목업에서 그 픽셀 값이 차지한 화면의 몫이며, 브라우저에서 요소는 모든 너비에서 그 몫을 유지합니다.

기본값을 줄 수 없습니다

rem과 달리 vw에는 기본값이 없습니다. 아무도 달리 말하지 않으면 브라우저는 루트 글꼴 크기를 16 px로 주므로 rem 페이지는 실제 수에서 출발할 수 있습니다. 뷰포트 너비는 독자의 창이 얼마나 넓은가 그대로이며 휴대폰을 돌리면 바뀝니다. 입력란의 너비는 디자인의 너비이고, 답은 그 너비의 화면에서 맞으며 다른 모든 곳에서는 비례합니다.

반올림

1440으로 나누면 대부분의 크기에서 긴 소수가 나옵니다. 6.6667 vw 같은 값은 스타일시트에서 괜찮지만 눈에 띄는 변화 없이 6.67이나 6.7로 반올림할 수 있습니다. 소수점 뒤로 두세 자리만 남기십시오. 더 많으면 잡음입니다.

뷰포트 단위가 도움이 되는 곳

히어로 제목과 큰 디스플레이 글자

모든 기기에서 화면의 일정한 몫을 채워야 하는 제목이 고전적인 쓰임입니다. 휴대폰 너비에서 고정된 96 px 제목은 넘칠 것이지만 vw에서는 화면과 함께 줄어 한 줄에 머뭅니다.

전체 폭 섹션

랜딩 페이지의 큰 섹션 사이 간격은 화면과 함께 커지고 줄어들 때 가장 좋아 보이는 경우가 많아, 작은 노트북에서도 넓은 디스플레이에서도 페이지가 리듬을 유지합니다. vw로 쓴 간격이 그렇게 해 줍니다.

모양을 유지해야 하는 그림

vw로 크기를 정한 히어로 이미지, 일러스트, 장식 도형은 창에 대한 비율을 유지하므로 화면이 바뀌어도 구도가 무너지지 않습니다.

한계가 있는 유동적인 글자

clamp()와 결합하면 vw는 최솟값과 최댓값 사이에서 부드럽게 커지는 글자를 줍니다. 현대의 스타일시트가 제목에 쓰는 기법이며 아래에서 다룹니다.

뷰포트 단위가 해가 되는 곳

순수한 vw로 쓴 본문

vw로만 크기를 정한 글자는 독자가 브라우저에서 페이지를 확대해도 반응하지 않습니다. 확대는 창의 픽셀 크기를 바꾸지만 vw 크기는 그 몫을 유지하기 때문입니다. 흔히 시력이 나빠서 확대에 의존하는 사람들은 키울 수 없는 글자를 마주하게 됩니다. 접근성 지침은 글자 크기를 조절할 수 있어야 한다고 요구하며, 순수한 vw 크기는 그 시험에 떨어집니다.

아주 작거나 아주 큰 극단

너비 320 px에서 6.67 vw 제목은 21 px로 너무 작을 수 있습니다. 너비 2560 px에서는 171 px로 어마어마합니다. 한계가 없으면 1440에서 맞아 보이던 비율이 양 끝에서는 터무니없을 수 있습니다.

스크롤바

데스크톱 브라우저에서 vw에 쓰이는 뷰포트 너비는 세로 스크롤바의 너비를 포함합니다. 그래서 100vw로 설정한 상자는 페이지가 스크롤될 때 보이는 영역보다 조금 넓고 가로 스크롤바가 나타날 수 있습니다. vw로 전체 폭 레이아웃을 만들기 전에 이 점을 알아 두십시오.

clamp 기법

하한과 상한 설정하기

CSS 함수 clamp(최소, 선호, 최대)는 최솟값, 선호 값, 최댓값을 받습니다. 글자에는 최소와 최대를 rem으로, 선호 값을 vw에 rem 항을 더한 것으로 씁니다. font-size: clamp(2rem, 1rem + 4vw, 6rem). 크기는 창과 함께 32에서 96 px 사이로 커지며 어느 끝도 넘지 않습니다. 일부가 rem이므로 글자는 여전히 독자의 설정을 존중합니다.

중간 항 만드는 방법

두 가지 화면 너비와 각각에서 원하는 크기를 고르십시오. 예를 들어 너비 360 px에서 32 px, 너비 1440 px에서 96 px입니다. 기울기는 (96 − 32) ÷ (1440 − 360) = 너비의 px당 0.0593 px, 곧 5.93 vw이고, 절편은 32 − 0.0593 × 360 = 10.67 px, 약 0.667 rem입니다. 그러므로 선호 항은 0.667rem + 5.93vw입니다. 변환기는 vw 부분을 도와주고 나머지는 잠깐의 계산이면 됩니다.

이것이 올바른 균형인 이유

clamp를 쓰면 디자이너가 원하는 유동적인 동작과 독자에게 필요한 접근성을 모두 얻습니다. 위에서 설명한 문제의 답이며 대부분의 현대 스타일시트가 vw를 clamp 안에서만 쓰는 이유입니다.

여기서 px를 vw로 변환하는 방법

픽셀 값 입력하기

첫 번째 입력란에 픽셀 단위 크기를 입력하십시오. 소수도 받습니다.

디자인의 너비 설정하기

목업의 너비가 1440이면 그대로 두십시오. 아니면 바꾸십시오. 입력하는 대로 결과가 갱신됩니다.

vw 값 복사하기

font-size: 6.67vw처럼 단위를 붙여 CSS에 수치를 쓰십시오. 글자에는 rem으로 된 한계와 함께 clamp() 안에 넣으십시오.

이 단위들은 어디서 왔나

CSS 픽셀

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

뷰포트 단위

vw는 반응형 디자인과 함께 등장했습니다. 뷰포트 너비가 얼마든 그 백분의 일입니다. 루트 글꼴 크기에 상대적인 rem, 요소에 상대적인 em과 나란히 놓입니다. 화면 대신 글자에 상대적인 크기가 필요하다면 px를 rem으로 변환하십시오.

px를 vw로 변환할 때의 함정

잘못된 디자인 너비 쓰기

가장 흔한 오류입니다. 목업이 너비 1920인데 1440으로 변환하면 모든 크기가 삼분의 일씩 어긋납니다. 디자인 도구에서 프레임의 너비를 확인하십시오.

모바일 디자인 잊기

많은 팀이 데스크톱용과 휴대폰용 두 목업을 갖고 있습니다. 첫째에서 96 px이고 둘째에서 40 px인 제목은 하나의 vw 값이 아닙니다. 두 너비, 두 번의 변환, 그리고 둘을 잇는 clamp를 쓰십시오.

페이지 전체를 vw로 쓰기

모든 것이 창과 함께 커지고 줄어드는 페이지는 읽는 감각을 잃습니다. 넓은 화면에서는 줄이 너무 길어지고 좁은 화면에서는 글자가 너무 작아집니다. 확대·축소되어야 할 몇 가지에만 vw를 쓰고 나머지는 고정 크기나 rem을 쓰십시오.

확대 문제를 무시하기

브라우저를 200퍼센트로 확대해서 페이지를 시험하십시오. 글자가 커지지 않으면 크기에 rem 항이 필요합니다.

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

100 px는 몇 vw인가요?

디자인 너비 1440 px에서 약 6.94 vw입니다.

쓰기에 가장 좋은 디자인 너비는 무엇인가요?

목업이 그려진 너비입니다. 보편적인 기본값은 없습니다.

vw가 rem보다 나은가요?

하는 일이 다릅니다. rem은 독자의 글자 크기를 따르고 vw는 창을 따릅니다. 각각 잘하는 일에 쓰십시오.

글꼴 크기에 vw를 써도 되나요?

네, 하지만 글자가 읽기 쉽게 유지되고 여전히 확대될 수 있도록 rem으로 된 한계와 함께 clamp() 안에 넣으십시오.

내 수가 업로드되나요?

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

되돌리려면 어떻게 하나요?

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

px를 vw로 변환할 때 현명하게 고르기

화면과 함께 커져야 할 것 정하기

히어로 글자, 큰 간격, 그림은 그렇습니다. 본문, 테두리, 작은 컨트롤은 그렇지 않습니다. vw 값의 목록이 짧을수록 페이지는 더 튼튼합니다.

디자인 단계에서 변환하기

목업을 읽으면서 px를 vw로 변환하면 어떤 값이 어중간하게 나오는지 바로 보이고 디자이너에게 더 깔끔한 값을 요청할 수 있습니다. 6.6667 vw로 나온 제목은 6.5나 7로 맞추자는 대화를 부릅니다.

너비를 기록해 두기

나중에 변환하는 모든 사람이 같은 너비를 쓰도록 스타일시트 맨 위의 주석에 디자인 너비를 적으십시오. 섞인 너비는 아무도 정확히 설명하지 못하는 방식으로 일관성 없는 페이지를 낳습니다.

목업에서 유동적인 스타일시트로

확대·축소할 크기를 나열하기

디자인 파일을 열고 화면을 따라가기를 원하는 모든 크기를 적으십시오. 히어로 제목, 섹션 간격, 어쩌면 큰 일러스트입니다. 각각에 대해 프레임의 너비를 기준으로 px를 vw로 변환하고 결과를 기록하십시오. 대부분의 페이지에는 그런 값이 열 개 미만이며 나머지는 모두 rem이나 픽셀에 머뭅니다.

모바일 프레임을 따로 확인하기

휴대폰 목업이 있다면 같은 요소를 그 너비에서 읽으십시오. 1440 px 프레임에서 96 px이고 375 px 프레임에서 40 px인 제목은 하나의 vw 값에 맞지 않으며, 이는 clamp를 쓰라는 신호입니다. 휴대폰 크기는 하한, 데스크톱 크기는 상한이 되고 그 사이의 일은 vw 항이 합니다. 각 프레임에 대해 px를 vw로 변환하면 두 수가 기울기를 정합니다.

세 가지 너비에서 검토하기

완성된 페이지를 대략 360, 820, 1440 픽셀에서 보고 한 번은 2560에서 보십시오. 유동적인 레이아웃은 목업의 너비에서는 맞추기 쉽지만 다른 곳에서는 미묘하게 틀리기 쉬우며, 이 너비들을 짧게 훑으면 방문자보다 먼저 대부분의 문제를 찾아냅니다.

긴 글에는 이 단위를 쓰지 않기

읽는 글의 줄은 rem으로 크기를 정하고 줄 길이를 대략 60에서 75자로 제한하는 것이 좋습니다. 뷰포트 단위는 디스플레이 글자와 간격에 쓰고 읽는 글은 안정되게 두십시오.

관련 변환기

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

계산 예

랜딩 페이지가 1440 px로 디자인되었고 히어로 제목이 96 px, 그 위 간격이 72 px라고 해 봅시다. 96을 입력해 6.667 vw를 읽고, 72를 입력해 5 vw를 읽습니다. 1000 px 창에서 제목은 66.7 px, 간격은 50 px로 비례합니다. 하지만 너비 360 px의 휴대폰에서는 제목이 24 px가 되어 원하는 것보다 작으므로 제목을 clamp(2.25rem, 1rem + 5vw, 6rem)으로 써서 하한 36 px, 상한 96 px로 하면 읽을 수 있고 확대할 수도 있습니다. 글자가 없는 간격은 평범한 vw로 둡니다.

짧은 점검표

변환하기 전에

목업의 너비를 찾으십시오. 어느 크기가 확대·축소되어야 하고 어느 크기가 그렇지 않아야 하는지 정하십시오.

변환하는 동안

픽셀 값과 디자인 너비를 입력하고 vw 수치를 단위와 함께 복사하십시오.

변환한 뒤에

창 크기를 휴대폰 너비에서 넓은 모니터까지 바꿔 보고 페이지를 200퍼센트로 확대해 보십시오. 극단이 이상해 보이는 곳마다 clamp()로 한계를 더하십시오.

흔한 실수

1440을 표준이라고 가정하기

단지 습관일 뿐입니다. 자기 너비를 쓰십시오.

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

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

스크롤바를 잊기

스크롤되는 데스크톱 페이지에서 100vw는 보이는 영역보다 넓습니다.

수치는 기기에 남습니다

계산은 로컬에서 이루어집니다. 값은 여러분의 브라우저가 사용할 뿐 어디로도 전송되지 않습니다. 나중에 지울 것도, 만들 계정도 없습니다. 이것이 px를 vw로 변환하는 간단한 방법입니다.

요약

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