CSS Units Guide, 알아야 할 모든 것

CSS Units Guide, 알아야 할 모든 것

반응형

이 기사는 원래 webinuse.com에 게재되었다.

CSS에서 모든 속성은 어느 정도의 값을 가져야 합니다. 어떤 때는 경로이고, 어떤 때는 색깔이고 어떤 때는 끈이지만 어떤 때는 측정 단위입니다. 오늘 우리는 요소의 길이, 너비, 높이를 측정하기 위한 CSS 장치에 대해 이야기 하고 있습니다.

px, em, rem, vh, vw 등과 같이 측정에 사용할 수 있는 많은 CSS 장치가 있습니다. 이 모든 단위를 두 그룹으로 나눌 수 있습니다.

절대 단위

상대 단위

1. 절대 CSS 유닛

절대 단위는 크기와 설정에 관계없이 모든 장치에서 동일합니다. 우리 디자인의 목적에 따라 우리는 다른 단위를 사용할 수 있다. 절대 CSS 장치는 기기 크기에 따라 확장되지 않기 때문에 응답성 설계에는 적합하지 않지만 인쇄에는 탁월하다.

pxx

px는 픽셀을 의미하며 픽셀의 시각적 크기는 화면 해상도와 화질에 따라 다릅니다. 16px는 시각적으로 모든 스크린에서 같은 크기가 아닙니다. 예를 들어 해상도가 2560x1440px 이상인 27인치 이상의 화면을 사용합니다. 텍스트가 16px인 경우 실제보다 훨씬 작아 보일 수 있으며, 그 결과 UI가 손상된 것처럼 보일 수 있으며, 이는 UX에 영향을 미칠 수 있습니다.

그럼에도 불구하고, 많은 개발자들은 여전히 px를 표준 측정 단위로 사용합니다.

mm/cm/in

우리는 이러한 단위를 실제 세계에서 알고 있으며, 웹 세계에서 사용되는 것을 자주 볼 수 없다. 하지만 이 장치들은 인쇄를 위해 페이지를 준비하는 데 아주 좋습니다. mm, cm, in은 항상 같기 때문에 인쇄 시에만 @media print query를 사용하여 CSS units를 구현할 수 있습니다.

pt/pc

거의 사용되지 않는 pt(포인트), pc(피카) 유닛도 있습니다. 1pt는 1인치의 1/72이고 1ppc 12포인트입니다.

참고: mm, cm, in, pt, pt, pc가 물리적 단위이기는 하지만 CSS의 1cm가 종이상의 1cm와 같다는 실질적인 보장은 없습니다. 그럼에도 불구하고, 이 유닛들은 우리가 이야기 할 다른 유닛들보다 인쇄하기에 더 좋습니다.

CodePen에서 Amer Sikira(@amersikira)의 Pen Absolute CSS 장치를 참조하십시오.

2. 상대 CSS 장치

절대 단위와 달리 상대 단위는 화면 크기 및/또는 설정에 따라 변경됩니다. 상대 유닛은 반응성 있는 디자인을 만드는 데 탁월하며 스크린에 뛰어나고 인쇄에 좋지 않습니다.

백분율(%)

px는 절대 단위, %는 상대 단위입니다. 우리는 이것을 "유산"이라고 부를 수 있다. 그것들은 꽤 사용하기 쉽습니다. 1%는 부모 크기의 1%를 가리킨다.

아래 예에서는 너비 400px, 높이 200px인 div#parent가 있습니다. 또한 폭이 25%인 125px, 높이가 30%인 60px인 div#child도 있습니다.

코드펜에서 Amer Sikira(@amersikira)의 펜 % 예제를 참조하십시오.

엠/렘

em 유닛과 rem 유닛은 거의 동일하다. 차이점은 em은 요소의 글꼴 크기에 상대적인 반면 rem은 루트 요소의 글꼴 크기에 상대적이라는 것이다.

1em은 요소의 글꼴 크기의 100%와 같습니다. 따라서 요소의 글꼴 크기가 30px이면 1em과 같습니다. 동일한 요소 안에 2em은 60px를 의미한다. 글꼴 크기 속성에 em을 사용하는 것이 가장 좋은 생각은 아닐 수 있지만 여백, 패딩 및 너비에 em을 사용하는 것이 좋다.

1rem은 루트 요소의 글꼴 크기의 100%와 같습니다. 표준 글꼴 크기 내장 브라우저는 변경하지 않을 경우 16px이며, 변경하는 것이 현명하지 않은 이유를 잠시 후에 알게 될 것입니다.

렘 유닛은 응답성 설계와 접근성에 탁월합니다(그래서 루트 글꼴 크기를 변경하지 말아야 합니다). 예를 들어 (브라우저에서) 루트의 글꼴 크기를 16px에서 25px로 변경한 사용자가 있다고 가정해 보겠습니다. rem을 사용하면 그에 따라 설계가 확장되고 UI가 그대로 유지되므로 모든 사용자가 UX를 사용할 수 있습니다.

전/후

em 및 rem과 마찬가지로, 이전 및 ch CSS 장치는 글꼴 크기에 기초한다. 그러나 이러한 단위는 글꼴 계열에 대해서도 상대적이다. ch는 문자 단위를 의미하며 문자 "0"의 너비로 정의된다. 이전 단위는 이 freeCodeCamp의 문서에 따라 "현재 글꼴의 현재 x 높이 또는 1em의 절반"으로 정의된다. 주어진 글꼴의 높이 x는 해당 글꼴의 소문자 "x"의 높이이다. 그것은 종종 글꼴의 가운데 표시이다.

lh/lh

lh는 선 높이를 나타내고 rlh는 루트 선 높이를 나타냅니다. em 및 rem과 마찬가지로 lh는 요소의 "라인 높이의 계산된 값과 동일"한 반면, rlh는 루트 요소의 "라인 높이의 계산된 값과 동일"하다. 선 높이: 20px인 경우 1lh 또는 1rlh는 20px이며, 이는 요소의 선 높이 또는 루트 요소의 선 높이에 대해 말하고 있는지 여부에 따라 달라집니다. css-tricks.com 기사에 따르면 이러한 단위는 아이콘을 텍스트와 정렬하는 데 유용합니다.

vw/vh

vw는 뷰포트 너비를 나타내고 vh는 뷰포트 높이를 나타냅니다. 즉, 이러한 단위는 화면 크기에 따라 달라집니다. 50vw의 요소는 화면 크기와 해상도에 관계없이 화면 너비의 50%를 차지합니다. vh도 마찬가지입니다. 50vh의 요소는 화면 크기와 해상도에 관계없이 화면 높이의 50%를 차지합니다. 우리는 이것을 단면의 폭에 사용할 수 있는데, 이것은 대응력 있는 디자인을 위한 훌륭한 선택이라는 것을 증명할 수 있다.

vmin/min

vw 및 vh와 달리 vmin 및 vmax는 화면의 최대 폭과 최소 높이에 의존하거나 그 반대입니다. 예를 들어 화면 크기가 1920px x 1080px인 경우 1VMax는 19.2px이고 1vmin은 10.8px입니다.반면 화면이 720px x 1080px인 경우 1vmin은 7.2px이고 1vmax는 10.8px입니다.

vmin과 vmax를 계산하기 위해 화면 크기를 취한 다음 너비와 높이를 모두 100으로 나눕니다. 1vmin보다 작은 것과 1vmax보다 큰 것.

결론

우리가 여기서 논의하지 않은 더 많은 단위가 있다. 이러한 단위는 공통적이거나 유용하기 때문에 선택했습니다. 이러한 유닛 중 거의 모든 유닛이 "작업"을 수행합니다. 하지만 어떤 단위는 다른 단위보다 어떤 것에 더 좋습니다. CSS 장치에 대한 추가 정보를 위해, 우리는 CSS 값에 레벨 4 사양을 사용할 수 있습니다.

궁금하신 점이 있거나 제 트위터에서 찾을 수 있는 내용이 있거나 자바스크립트에서 개체를 병합하는 방법 같은 다른 기사를 읽어보실 수 있으십니까?

from http://information-bada.tistory.com/7 by ccl(A) rewrite - 2021-10-10 07:01:49