css 길이단위

절대 길이 단위

다음은 모두 절대 길이 단위이며  다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주하며 보통 사용하는 단위는 px (픽셀) 입니다.

• px

: 글꼴의 크기를 고정하는 단위, 작은 글씨글 보기 힘든 사용자가 브라우저의 기본 글꼴의 크기를 더 크게 설정하더라도 초기값으로 고정된다.

 

 

상대 길이 단위

상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있다

• %
  : 상대적으로 부모요소의 사이즈에 영향을 받아 크기가 조절된다.
  
  
• em
  : em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말한다
  =>폰트사이즈가 10px이면 width = 30em 입력 시 width = 30 * 10 = 300이 된다. 폰트사이즈에 따라 크기가 결정된다
  
• rem
  :rem은 root em의 약자이다 가장 최상단(root) 기준인 최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미한다
• vh/vw
  :vh와 vw는 각각 뷰포트(화면의 크기)의 높이와 너비에 비례한다 이 단위는 반응형 페이지를 만들 때  유용하게 사용될 수 있다
  =>1vh는 실제 높이값의 1/100을 나타냅니다. 즉 눈에 보이는 화면 높이가 100px일 때 1vh는 1px이 된다