4. 단위와 값
💡 참고 : length
🔷 절대길이
절대길이 단위는 프린트 등 출력 수단의 크기를 알 수 있을 때의 물리적 측정 거리를 나타낸다.
❐ px
1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 in을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.
❐ in
1 인치, 1in = 2.54cm = 96px.
❐ cm
1 센티미터, 1cm = 96px/2.54.
❐ pt
1 포인트. 1pt = 1/72nd of 1in.
🔷 상대길이
상대길이는 어떤 다른 거리와의 상대적 비율을 표현한다.
❐ em & rem
em
요소 font-size의 계산값. 요소의 font-size 속성에 사용한다면 상속받는 font-size 값을 나타냅니다.
rem
루트 요소(보통 <html>)의 font-size를 나타냅니다. 루트 요소의 font-size에 사용할 경우 최초값(보통 브라우저 기본값은 16px이나 사용자 설정으로 변할 수 있음)을 나타냅니다.
❐ vw & vh
vh
뷰포트의 초기 컨테이닝 블록 높이 1%와 같습니다.
vw
뷰포트의 초기 컨테이닝 블록 너비 1%와 같습니다.
❐ vmin & vmax
vmin
vw와 vh 중 작은 것과 같습니다.
vmax
vw와 vh 중 큰 것과 같습니다.
🔷 %
백분율 값을 나타낸다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용한다.
💡 참고 : percentage
🔷 함수 표기법
❐ calc( )
calc( ) 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다.
매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.
💡 +와 - 연산자는 좌우에 공백이 있어야 한다.
❐ min( ) & max( )
min( ) 함수는 괄호 안의 값들 중 가장 작은 값을 선택한다.
max( ) 함수는 괄호 안의 값들 중 가장 큰 값을 선택한다.
💡 min( ) & max( )는 IE에서는 지원하지 않기 때문에 주의해서 사용해야 한다.
