[CSS] 단위

단위

1. 절대단위
   외부 요인에 영향 받지 않고 절대적인 값을 지닌 단위
   • px = pixel = 화소 (화면을 구성하는 가장 기본이 되는 단위)
   • pt : 인쇄를 위한 단위 (1pt = 1/72인치)
2. 상대단위
   외부 요인에 영향을 받아 유동적인 값을 지닌 단위
   • % : 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용
   • em : 스타일 지정 요소의 font-size 속성 값에 비례하여 값을 결정
     font-size : 16px인 경우,
     1em = 16 x 1 = 16px / 0.8em = 16 x 0.8 = 12.8px
   • rem : ★최상위★ html 요소의 font-size 속성 값에 비례하여 값을 결정
     vw / vh : 요소의 규격을 viewport의 너비값과 높이값에 비례하여 결정
     ( * viewport : 브라우저에서 실제로 화면이 그려지는 영역)
     

viewport-width
viewport-height
viewport 1200(px) x 920(px)인 경우,
10vw => 12000.1 = 120px
50vh => 9200.5 = 460px
100vw => 1200*1 = 1200px

 

Calc()

CSS에서 함수를 사용할 수 있을까?

calc() : 괄호안 사칙연산을 수행한 결과를 속성값으로 사용한다.
calc 안의 계산식은 +,  -,  *,  / 앞뒤로 공백을 주어야한다.

calc() 사용법