단위와 값

CSS 속성에 사용되는 단위와 값을 알아보자!

<length>

절대길이 단위

• px( 고정값 )을 주로 사용, pt ( 문서 출력을 가정 하에 사용 )
• px을 사용해 지정하면 고정값이기 때문에 확대 축소등의 접근성 문제 발생 유발

상대길이 단위

글꼴 상대길이

• em : 1em == 부모의 font-size 크기, 부모 크기에 따라 값이 변하므로 사용이 번거로움
• rem : 1rem == root(body 기본값)의 font-size 크기, 접근성 용이

뷰포트 백분율길이 ( 반응형 )

• vh : 100vh = 뷰포트의 전체 높이
• vw : 100vw = 뷰포트의 전체 너비
• vmin : vh와 vw을 비교해 작은 값 고정
• vmax : vh와 vw을 비교해 큰 값 고정

퍼센트

• 백분율 %, 부모 객체의 값에 따른 상대적 계산

함수 표기법

calc()

width : calc(100% - 80px);
width : calc(100% / 2);

• 사칙연산을 모두 지원, 연산자 좌 우에 공백

min()

width : min(100%, 500px);

• 작은 값을 선택해 사용, 호환성 문제가 있음

max()

width : max(100%, 500px);

• 큰 값을 선택해 사용, 호환성 문제가 있음