웹 디자인 여행을 시작할 때 한 가지 분명 해집니다. 다른 화면에서 요소 규모와 크기가 올바르게 스케일링하는 방법이 중요합니다. 대규모 데스크탑 화면이나 가장 작은 휴대 전화에서 작업하든, 디자인을 어디에서나 좋아 보이게하는 열쇠는 CSS 크기 단위를 이해하는 것입니다. 그러나 그들은 정확히 무엇입니까? 그리고 어떻게 그들이 당신에게 유리하게 일하게 할 수 있습니까? 분해하고 게임을 바꾸는 도구를 최대한 활용할 수 있도록 도와 드리겠습니다.

CSS 크기 단위가 중요한 이유

CSS 크기 단위는 디자인의 반응의 중추입니다. 이 장치는 다른 사람이나 뷰포트 자체와 관련하여 요소가 크거나 작은 요소를 정의합니다. 웹 사이트에 다른 화면 크기로 행동하는 방법을 알려주는 마법 공식과 같습니다. 이 장치가 없으면 디자인이 어색하거나 특정 장치에서 너무 비좁아 보이거나 너무 비좁을 수 있습니다.

하지만 여기에는 다음과 같습니다. 다른 유형의 크기 단위가 있으며 모두 동일하지는 않습니다. 일부는 고정되어 있고 다른 일부는 화면이나 주변 콘텐츠에 따라 변경됩니다. 작업에 적합한 것을 선택할 수 있도록이 단위로 뛰어 들자.

절대 대 상대 단위 : 차이점은 무엇입니까?

다른 크기 단위를 이해하려면 먼저 두 가지 기본 범주를 알아야합니다 : 절대 및 상대 단위.

절대 단위는 매우 간단합니다. 화면 크기에 관계없이 고정되어 있고 변경되지 않습니다. 변하지 않는 통치자처럼 생각하십시오.
상대 단위는 반면에 사용 된 환경에 따라 변경됩니다. 이것은 유연성이 들어오는 곳이며 반응 형 디자인을 가능하게합니다. 두 범주를 모두 살펴 보겠습니다.

절대 단위 : 구식 길

절대 단위는 그들이 소리를내는 것입니다. 화면 크기, 레이아웃 또는 기타 요인은 신경 쓰지 않습니다. 절대 단위를 사용하면 요소 크기가 고정됩니다. 이것은 전체 제어를 제공하지만 디자인은 다른 화면에 적응하지 못할 수도 있습니다.

가장 일반적인 절대 단위는 다음과 같습니다.

• 픽셀 (px) :
정확한 크기를위한 고전적인 선택. 하나의 픽셀은 화면의 한 점에 해당합니다.
• 센티미터 (cm), 밀리미터 (mm), 인치 (in) :
이 장치는 인쇄 설계에 더 일반적이지만 필요한 경우 웹 디자인에 사용할 수 있습니다.
• Points (PT), Picas (PC) :
인쇄 세계에서 빌린 이들은 인쇄 스타일과 같은 것에 유용하지만 종종 웹 디자인에 사용되지는 않습니다. 절대 단위는 사물을 날카 로워 보이게하는 데 도움이 될 수 있지만 현대적인 반응 형 웹 사이트에는 많은 유연성을 제공하지 않습니다. 그리고 그것이 상대 단위가 들어오는 곳입니다.

상대 단위 : 실제 유연성의 힘

상대 단위는 마법이 일어나는 곳입니다. 이 단위는 주변 컨텐츠 또는 화면 크기를 기반으로 스케일링하여 작은 화면에서 거대한 모니터에 이르기까지 모든 곳에서 멋진 디자인을 만드는 데 적합합니다.

주요 상대 단위를 살펴 보겠습니다 :

백분율 (%)

백분율 단위는 유연성에 관한 것입니다. 요소의 너비를 50%로 설정하면 컨테이너의 크고 작든 상관없이 부모 컨테이너의 절반을 차지합니다. 사용 가능한 공간에 따라 조정하려는 응답 레이아웃에 이상적입니다.

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

. 컨테이너 { 너비 : 100%; / * 부모 컨테이너의 100%를 차지 */ }

EM 및 REM : 텍스트로 스케일링

em과 rem 단위는 모두 글꼴 크기를 기반으로하지만 다르게 작동합니다.

EM은 부모 요소의 글꼴 크기와 관련이 있습니다.
rem은 루트 요소 ()에 설정된 글꼴 크기와 관련이 있습니다. 이 단위는 특히 사용자가 브라우저의 기본 글꼴 크기를 변경할 때 웹 사이트 전체에서 일관성이있는 확장 가능한 타이포그래피 또는 간격을 만드는 데 적합합니다.

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

html { 글꼴 크기 : 16px; / * 기본 글꼴 크기 설정 */ } H1 { 글꼴 크기 : 2REM; / * 32px */ } p { 글꼴 크기 : 1.5EM; / * 24px, 부모 요소의 글꼴 크기를 기준으로 */ }

뷰포트 장치 (VW, VH)

Viewport 장치는 브라우저 창의 실제 크기에 따라 조정되는 전체 화면 섹션 또는 요소를 작성하는 데 환상적입니다. 이 장치는 뷰포트의 너비 또는 높이에 따라 스케일이므로 사용자의 화면 크기에 응답하는 전체 화면 영웅 섹션 또는 동적 타이포그래피를 설계 할 수 있습니다.

• vw :
1VW는 뷰포트 너비의 1%입니다.
• vh :
1VH는 뷰포트 높이의 1%입니다. 이들은 현대적이고 유동적 인 레이아웃에 특히 유용합니다.

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

.영웅 { 너비 : 100VW; / * 뷰포트의 전체 너비 */ 높이 : 100VH; / * 뷰포트의 전체 높이 */ }

어떤 장치를 사용해야합니까?

그래서 디자인에 어떤 장치를 사용할 것인지 어떻게 결정합니까? 다음은 몇 가지 포인터입니다.

• 고정 요소의 경우
: 절대 제어가 필요할 때 px를 사용하십시오. 정확한 치수가 필요한 아이콘, 경계 및 기타 작은 요소와 같은 것들과 같은 것들이 픽셀에 적합합니다.
유체 레이아웃의 경우 : 컨테이너 크기에 따라 요소가 적응하기를 원하는 경우 % 사용하십시오. 이것은 화면 크기로 확장 또는 아래로 확장 해야하는 그리드, 열 또는 섹션에 적합합니다.
타이포그래피의 경우 : 사이트 전체의 일관성을 위해 REM을 사용하고 부모 컨테이너의 글꼴 크기를 기반으로 한 로컬 조정을 위해 EM을 사용하십시오.
전체 화면 섹션의 경우 : VW와 VH를 사용하여 화면 치수에 관계없이 전체 뷰포트 크기를 차지하는 섹션을 만듭니다.

피해야 할 일반적인 실수

숙련 된 디자이너조차도 CSS 크기 단위를 사용할 때 때때로 실수를합니다.

픽셀에 너무 많은 의존 : PX는 사용하기 쉽지만 반응 형 디자인에는 큰 도움이되지 않습니다.
루트 글꼴 크기를 무시하십시오 : REM을 사용하는 경우 HTML 요소에서 기본 글꼴 크기를 설정하십시오. 그렇지 않으면 타이포그래피가 일관성이없는 것처럼 보일 수 있습니다.
일관되지 않은 단위 사용 : 명확한 전략없이 PX, %및 EM을 혼합하면 예측할 수없는 결과가 발생할 수 있습니다. 장치 사용량을 일관되게 유지하십시오.

마무리 : CSS 크기 단위

CSS 크기 단위는 모든 화면에서 잘 작동하는 웹 사이트를 만드는 데 필수적입니다. PX와 같은 절대 장치 및 %, EM, REM 및 Viewport 장치와 같은 유연한 장치를 사용하면 장치 전체에 아름답게 적응하는 반응 형 레이아웃을 설계 할 수 있습니다.

열쇠는 각 장치를 사용하는시기와 서로 상호 작용하는 방법을 이해하는 것입니다. CSS 크기 단위를 마스터하면 반응 형 웹 디자인의 잠재력을 최대한 활용하고 모든 곳에서 놀라운 사이트를 만듭니다.
따라서 나가서이 유닛을 실험하고 디자인을 그 어느 때보 다 유동적이고 반응성이 좋게 만드십시오!

행복한 디자인!