CSS => 길이 단위

소개

CSS 거리 측정은 바로 뒤에 길이 단위 (px, em, pc, in ...)가 오는 숫자입니다.

CSS는 여러 가지 길이 측정 단위를 지원합니다. 그들은 절대적이거나 상대적입니다.

통사론

가치 단위
1em

매개 변수

단위	기술
%	부모 개체 또는 속성에 따라 현재 개체의 관점에서 크기 정의
여자 이름	요소의 글꼴 크기에 비례하여 (2em은 현재 글꼴 크기의 2 배를 의미 함)
rem	루트 요소의 글꼴 크기에 상대적
폭스 바겐	뷰포트 너비의 1 %에 상대적 *
VH	뷰포트 높이의 1 %에 비례 *
vmin	뷰포트의 * 더 작은 치수의 1 %에 상대적
vmax	뷰포트의 * 큰 차원의 1 %에 상대적
센티미터	센티미터
mm	밀리미터
...에서	인치 (1 인치 = 96 픽셀 = 2.54cm)
픽셀	픽셀 (1px = 1 / 96th of 1in)
태평양 표준시	포인트 (1pt = 1 / 72 in 1in)
pc	피카 (1pc = 12pt)
에스	초 (애니메이션 및 전환에 사용)
ms	밀리 초 (애니메이션 및 전환에 사용)
전의	현재 글꼴의 x 높이에 상대적
ch	영 (0) 문자의 너비를 기준으로합니다.
fr	소수점 단위 (CSS 그리드 레이아웃에 사용)

비고

공백은 숫자와 단위 사이에 나타날 수 없습니다. 그러나 값이 0이면 단위를 생략 할 수 있습니다.
일부 CSS 속성의 경우 음수 길이를 사용할 수 있습니다.

Rem와 함께 글꼴 크기

CSS3에서는 "root em"을 나타내는 rem 단위를 비롯하여 몇 가지 새로운 단위가 도입되었습니다. rem 이 어떻게 작동하는지 살펴 보겠습니다.

먼저 em 과 rem 의 차이점을 살펴 보겠습니다.

em : 부모의 글꼴 크기에 상대적입니다. 이로 인해 합성 문제가 발생합니다.
rem : 루트 또는 <html> 요소의 글꼴 크기를 기준으로합니다. 즉, html 요소에 대해 단일 글꼴 크기를 선언하고 모든 rem 단위를 그 비율로 정의 할 수 있습니다.

글꼴 크기 조정을 위해 rem 을 사용할 때의 주요 문제점은 값을 사용하기가 다소 어렵다는 것입니다. 다음은 기본 단위가 16px라고 가정 할 때 rem 단위로 표현 된 일반적인 글꼴 크기의 예입니다.

10 픽셀 = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (기본)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

암호:

삼

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

rem과 em을 사용하여 확장 가능한 요소 생성하기

삼

html 태그의 font-size 로 정의 된 rem 을 사용하여 font-size 를 rem 값으로 설정하여 요소의 스타일을 지정하고 요소 내부의 em 사용하여 전역 font-size 확장되는 요소를 만들 수 있습니다.

HTML :

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

관련 CSS :

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

가능한 결과 :

vh 및 vw

CSS3는 크기를 나타내는 두 개의 단위를 도입했습니다.

viewport height 를 나타내는 vh 는 viewport height 1 %를 기준으로합니다.
viewport width 를 나타내는 vw 는 viewport width 1 %를 기준으로합니다.

삼

div { 
  width: 20vw; 
  height: 20vh;
}

위의 경우 div의 크기는 뷰포트의 너비와 높이의 20 %를 차지합니다.

vmin 및 vmax

vmin : 뷰포트의 더 작은 치수의 1 %에 상대적
vmax : 뷰포트의 더 큰 치수의 1 %에 상대적

즉, 1 vmin 은 1 vh 및 1 vw 중 작은 값과 같습니다.

1 vmax 는 1 vh 및 1 vw 중 큰 값과 같습니다.

참고 : vmax 는 다음에서 지원되지 않습니다 .

모든 버전의 Internet Explorer
버전 6.1 이전의 Safari

% 사용 %

반응 형 응용 프로그램을 만들 때 유용한 단위 중 하나입니다.

크기는 상위 컨테이너에 따라 다릅니다.

방정식:

(부모 컨테이너의 너비) * (백분율 (%)) = 출력

예 :

자녀 가 50 % 인 동안 부모 는 100px 너비 를가 집니다.

출력시 , Child 의 너비는 부모 의 절반 (50 %)으로 50px 입니다.

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

산출

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

CSS
길이 단위

수색…

소개

통사론