Theo와 함께 CSS 유닛 탐색

안녕하세요, 인터넷.
훈련소 뒤의 첫 블로그 글에 오신 것을 환영합니다.이것은 결코 내가 상상한 것처럼 그렇게 나쁘지 않다.나는 너희들을 데리고 이 여정에 오르게 되어 매우 기쁘고, 동시에 나도 곧 CSS 단원에 익숙해졌다.다음 주에 flexbox를 보면서 이 점을 더 알고 싶습니다.내가 특히 흥미를 느끼는 것은 서로 다른 크기/길이의 요소를 어떻게 예측하고 처리하여 CSS의 전체 논리를 결정하는지 더 많이 생각하는 것이다.flexbox는 이 생각의 또 다른 연장선인 것 같다.
우선 오늘 밤 구글에서 검색한 첫 번째 일은'다른 css 차원'이었다. 이것은 나로 하여금 하나를 생각하게 했다w3schools article on CSS Units."길이"값을 사용한 서로 다른 CSS 속성의 예시를 제시한 후, 본고는 CSS에 두 가지 유형의 길이 단위가 있는데 그것이 바로 절대와 상대이다.†
† 특히 세 번째 유형의 단위, 뷰포트 단위가 추가되었으므로 유용한 범주임을 알 수 있습니다.

절대 길이ABSOLUTE LENGTH UNITS: cm, mm, in, px, pt, pc ABSOLUTE LENGTH UNITS YOU CAN FORGET: cm, mm, in, pt, pc절대 길이는 실제 세계에서 지속적으로 측정할 수 있는 길이(in=인치, cm=센티미터 등)다.본고는 픽셀의 절대 길이도 열거하였으나, 주의해야 할 것은 픽셀 밀도는 사용하는 장치에 따라 다르다는 것이다.
장치를 전환하는 사람이 없으면 픽셀 단위로 설계된 요소가 브라우저 창의 크기를 조정하는 것과 같이 절대 길이 클래스에 유지되는 것이 논리적이라는 것을 이해합니다.그러나 브라우저 창의 크기를 조절하면 상대적인 길이를 사용하여 스타일을 설정하는 요소의 크기가 바뀔 수 있습니다.†
†† 또는 Matthias 정의를 사용하여 더 정확하게 정의하려면 뷰포트 단위를 사용하여 요소 스타일을 설정할 수 있습니다.
상대 단위는 가변적인 소프트웨어에 비해 이해하기 때문에 픽셀은 상대적이지 않습니다. 왜냐하면 이것은 당신이 사용하고 있는 특정 하드웨어에 대한 한 방면 (즉 장치의 DPI/PPI) 이기 때문입니다.
상대적인 길이를 이야기하기 전에 나는 그 문장 중의 중요한 관점을 인용하고 싶다.

“Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.”

나는 이 점을 주의할 필요가 있다고 생각한다. 왜냐하면 나는 사람들이 px를 대량으로 사용하는 것을 이미 보았기 때문에 이것은 최선의 실천이 아닌 것 같다.
실제 작업에서div의border 속성이 {border:1px solid Black으로 정의되면;}{border:.05rem solid Black;} 대신 --그러나 나는 모든 것을 고르게 축소하는 원칙을 좋아한다. 픽셀은 절대 길이이기 때문에 이 점을 배제한다.
분명히 16px의 대다수 브라우저에서 기본 루트 요소(html 표시)의 글꼴 크기는 0.0625rem이기 때문에 1px는 0.0625rem이거나 0.05rem이어야 한다. 만약에 너무 프로그래밍을 하지 않으려면 16px의 루트 요소에 비해

상대 길이RELATIVE LENGTH UNITS: em, ex, ch, rem, vw, vh, vmin, vmax, % RELATIVE LENGTH UNITS YOU CAN FORGET: ex, ch상대 길이는 절대 길이를 기준으로 다른 길이 특성을 기준으로 정의됩니다.이것이 바로 웹 개발자의 경험이 조형의 황금이 된 곳이라고 생각한다.경험은 CSS 패셔니스타에게 어떤 유형의 요소가 다른 길이에 비해 조정되어야 하는지 알게 할 것이다.이런 방식을 통해 기본적으로 응용 프로그램의 서로 다른 요소 간의 몇 십 가지 서로 다른 관계를 기억할 필요가 없다. 반대로 당신은 기본적인 디자인 원칙과 최선의 실천에 따라 어떤 요소가 어떤 다른 길이에 달려 있는지 일깨워 줄 수 있다.기타 길이는 브라우저/뷰포트 크기 또는 다른 요소의 글꼴 크기와 관련이 있습니다.
em, ex,ch는 부모 글꼴 크기 속성에 대한 길이를 정의하지만, 그것들의 정의 방식은 다르다.Em은 대문자로 덮인 전체 높이 범위, 즉 글씨체/글씨체 크기 ※ ex는 소문자 x의 높이(대다수의 소문자 높이에 대체로 대응하는 것임이 분명하다)를 바탕으로ch는 0문자의 너비를 바탕으로 한다.기본적으로 그 중 하나를 쓰려면 그것을 써라.

※ “An em is a CSS unit that measures the size of a font, from the top of a font’s cap height to
the bottom of its lowest descender. Originally, the em was equal to the width of the capital
letter M, which is where its name originated.” (Quote from “The Principles of Beautiful Web Design”).

그러나 만약에 당신의 생활을 더욱 가볍게 하고 싶다면rem를 사용하는 것이 가장 좋다고 생각합니다. 이것은 em와 같기 때문입니다. 단지 상대적인 요소는 뿌리 요소, 즉 html 표시입니다. 이것은 크기가rem 단위로 스타일을 설정하면 html의 삽입 정도는 중요하지 않습니다. 왜냐하면 그들은 모두 뿌리를 인용하기 때문에 모든 html 요소가 아버지 요소를 인용하는 것이 아니라 뿌리를 인용하기 때문입니다.나무 전체에서 기다리다.

뷰포트 길이
Vw와 vh는 뷰포트의 너비와 높이에 불과하며, vmin과 vmax는 둘 중 작은 것(vmin) 또는 큰 것(vmax)을 참조 길이로 선택할 뿐이다.100vh는 뷰포트 높이 크기의 100%이고, 1vh는 뷰포트 높이 크기의 1% 또는.01이다.뷰포트는 브라우저 창일 뿐이므로 본질적으로 창의 크기와 장치 화면의 크기에 따라 내용의 크기를 조정할 수 있습니다.

너 아직도 이거 읽고 있니?
만약 당신이 이 화제가 매우 유용하다고 생각한다면, 여기에 더욱 깊은 화제가 하나 있고, 좋은 시각적 보조 도구가 있어서 당신이 이해하는 데 도움을 줄 수 있다.

Key takeaways for me: 
• use rem and em as your relative length units, emphasis on rem; 
• learn more about viewport length units to understand best
 practices for adapting to different device sizes;
• avoid using absolute length units since these won’t scale well;
 only use them when it is important that something exactly represent
 real world size or stay constant in size regardless of the size of
 the device/browser window it is being viewed on;

다음 주에 봐요!