너비와 높이를 사용한 CSS 크기 조정

여기서는 이러한 각 측정 단위를 자세히 살펴보는 동시에 최소값 및 최대값, 오버플로 관리, 개체 맞춤 속성과 같은 개념도 살펴보겠습니다.

특히 이 강의에서는 다음 내용을 다룹니다.

1. 자동 크기 조정
2. 픽셀
3. 백분율 값
4. 엠스
5. 렘
6. 뷰포트 기반 단위
7. 분수 단위
8. 문자 단위
9. 최소 및 최대 크기
10. 종횡비
11. 오버플로 처리
12. 개체 맞춤 사용법

자동 크기 조정

기본적으로 웹 요소는 콘텐츠에 따라 크기를 자동으로 조정합니다.

픽셀

픽셀 값은 비례적으로 확장될 수 있으며, 특히 특정 픽셀 값으로 설정된 이미지와 요소를 처리할 때 더욱 그렇습니다.

기본 픽셀 값을 활용하려면:

1. 숫자 값을 입력하세요
2. 을 치다 입력하다 열쇠

백분율 값

em과 유사하게 백분율은 상위 요소의 글꼴 크기를 기준으로 합니다. 예를 들어, 패딩된 섹션 내에서 너비를 25%로 설정하면 요소 내부 공간의 1/4이 할당됩니다.

엠스

Em은 텍스트 요소의 패딩을 비례적으로 조정할 때 유용합니다. 각 브라우저의 기본 글꼴 크기는 일반적으로 16px입니다. Ems는 부모 요소를 기반으로 글꼴 크기를 계산하고 이에 따라 텍스트 크기를 조정합니다.

글꼴 크기가 16픽셀인 경우:

• 1em은 16픽셀과 같습니다.
• 2em은 32픽셀과 같습니다.
• 1.5em은 24픽셀과 같습니다.

다음과 같이 단락 상위 요소의 글꼴 크기를 변경할 수도 있습니다. Div 블록:

1. 상위 요소 선택
2. 글꼴 크기(예: 20픽셀)를 조정합니다. 스타일 패널 아래에 타이포그래피

상위 요소를 20픽셀로 설정한 경우:

• 1em은 20픽셀에 해당합니다.
• 2em은 40픽셀로 변환됩니다.
• 3em은 60픽셀로 변환됩니다.

렘

Rems는 HTML 글꼴 크기를 기준으로 계산됩니다.

각 rem 값은 사용자의 브라우저 설정을 고려하여 HTML 글꼴 크기를 곱하여 결정됩니다(코드에서 재정의되지 않는 한). 이 접근 방식은 개별 텍스트 크기 기본 설정과의 일관성을 보장합니다.

Rems는 수정되지 않는 한 HTML 수준에서 지정된 기본 글꼴 크기에 맞춰 루트 em 단위(root ems)를 참조합니다. em과 달리 rems는 개별 요소나 그 부모로부터 글꼴 속성을 상속받지 않고 대신 브라우저의 글꼴 크기에 따라 크기가 조정됩니다.

뷰포트 기반 단위

VW(뷰포트 너비)는 브라우저 창의 너비를 측정하여 뷰포트 너비에 비례하여 조정됩니다.

분수 단위

분수 단위(fr)는 Quick Stack 요소와 같은 그리드 레이아웃 속성 내에서 효과적입니다.

4열 그리드에서 작업하는 경우 각 열은 기본적으로 1fr로 설정되어 그리드 공간의 1/4을 할당합니다. 열을 추가하면 각 fr이 1/5로 조정됩니다. 이러한 장치의 유연성은 열 간격을 포함한 계산을 자동으로 처리합니다.

분수 단위에 대해 자세히 알아보세요.

문자 단위

문자 단위(CH)는 단락이나 제목과 같은 요소의 너비를 설정하여 줄당 문자 수를 제어하는 데 이상적입니다.

예를 들어 단락의 최대 너비를 60ch로 제한하면 선택한 글꼴(문자 너비 0)을 기준으로 60자를 수용할 수 있도록 상자 크기가 조정됩니다. 이 장치를 사용하면 특히 문자 기반 제약 조건의 경우 텍스트 너비를 정밀하게 제어할 수 있습니다.

최소 및 최대 크기 제약

요소의 너비를 50%로 지정하면 상위 요소 내 공간의 절반을 차지합니다( 부분). 뷰포트의 크기가 조정되면 요소의 크기도 그에 맞춰 조정됩니다.

최소(예: 200px) 및 최대(예: 500px) 너비 제한을 도입하면 요소가 다양한 뷰포트 크기에 맞춰 200~500픽셀의 너비 범위를 유지할 수 있습니다.

일반적인 방법에는 전체 높이 섹션(예: 100vh) 설정이 포함됩니다. 그러나 이 접근 방식은 요소가 뷰포트 하단에서 오버플로되거나 잘리기 시작할 때 시각적 문제를 일으킬 수 있습니다. 

팁: 최소 높이 속성을 활용하여 고정 섹션 높이를 제거하고 대신 최소 높이 100vh를 적용합니다. 이렇게 하면 섹션이 항상 전체 뷰포트 높이 이상으로 확장됩니다.

예를 들어 섹션 높이를 최소 높이로 800픽셀로 설정하면 800픽셀 높이가 보장되는 동시에 콘텐츠 너비 조정이 가능합니다(필요한 경우 수직 확장 허용).

단락 너비를 약 60자로 제한하려는 경우 최대 너비(예: 60ch)를 적용하도록 개별 단락을 구성할 수 있습니다. 이는 단락 너비 제한을 약 60자로 표준화합니다.

종횡비 설정

종횡비 설정은 사이트 전체의 요소 크기 조정에 대해 사전 정의되고 사용자 정의 가능한 비율을 제공하며, 특히 특정 비율이 필요한 이미지, 비디오 및 그리드 레이아웃에 유용합니다.

5개가 있다 비율 사용 가능한 사전 설정:

• 자동 — 필요에 따라 크기를 조정하고 유연한 레이아웃에 적합합니다.
• 아나모픽(2.39:1) — 넓은 크기가 필요한 영화적 경험에 이상적입니다.
• 유니비시움/넷플릭스(2:1) — 최신 TV 및 스트리밍 콘텐츠에 적합
• 와이드스크린(16:9) — 넓은 레이아웃 요소에 최적
• 풍경(3:2) — 약간 더 큰 웹 요소에 유용합니다.
• 인물(2:3) — 키가 큰 레이아웃 요소에 이상적
• 정사각형(1:1) — 균형 잡힌 레이아웃 항목에 적합
• 관습 — 맞춤형 비율을 설정할 수 있는 유연성 제공

너비 및 높이와 같은 기존 크기 조정 속성과 함께 종횡비를 통합하면 일관성이 보장됩니다. 예를 들어 미리 정의된 치수가 있는 요소에 특정 비율을 적용하면 그에 따라 반대 치수도 조정됩니다. 비율을 적용하기 전에 너비와 높이 값을 모두 설정한 경우 지정된 크기가 지정된 비율보다 우선합니다.

내부 내용에 관계없이 요소 비율을 유지하려면 과다 재산 숨겨진 유익할 수 있습니다.