CSS 단위

절대길이 단위

• px : 고정 값 (브라우저를 확대하거나 축소해도 고정된 값이 적용되기 때문에 접근성 문제를 유발할 수 있다. 그렇기 때문에 font-size의 경우 상대길이 단위인 em,rem을 사용하는게 좋다)

상대길이 단위

글꼴

• em : 1em === 부모의 font-size 만약 부모에 font-size가 없다면 브라우저의 기본 font-size를 사용한다(16).

• rem : 1rem === root의 font-size(브라우저 기본 사이즈인 16)를 사용해 좀 더 직관적이다.

뷰포트

빨간색 영영이 뷰포트 영역이다.

디바이스의 크기에 따라 반응형으로 만들때 유용하다.

• vw : 뷰포트 가로, 50vw는 전체 뷰포트영역에서 50프로만 사용한다는 뜻이며 디바이스 크키
  가 줄어도 항상 유지된다.

• vh : 뷰포트 세로

• vmin, vmax : 뷰포트에서 가로 세로중 작은쪽이 vmin 큰쪽이 vmax를 가지며, 가로모드나 세로모드에 대응해야 하는 경우 사용한다.

함수 표기법

• calc() : 여러개의 단위를 섞어서 사용하고 싶을때 사용
  ex) width : calc(100% - 50px);
• min() : ,로 구분하여 값을 입력하며 width : min(100%,200px)이 있다면 브라우저가 둘중 작은 값을 사용한다.
• max() : ,로 구분하여 값을 입력하며 width : max(100%,200px)이 있다면 브라우저가 둘중 큰 값을 사용한다.