CSS3 단위

CSS3 단위

• 스타일 값으로 입력할 수 있는 단위
  • 키워드 단위
  • 크기 단위
  • 색상 단위
  • URL 단위

키워드 단위

• 키워드 : W3C에서 미리 정의한 단어
• 키워드를 스타일 값으로 입력하면 키워드에 해당하는 스타일이 자동으로 적용됨
• 스타일 속성별로 값으로 사용할 수 있는 키워드가 따로 정해져 있음

크기 단위

• CSS3에서 가장 많이 사용하는 단위

% (백분율 단위)

• 초기 설정 단위 100%
• 크기를 상대적으로 지정

em (배수 단위)

• 부모 요소에저 지정한 글자 크기 기준으로 배율 조정
• 크기를 상대적으로 지정
• 1em = 100%
• 1.5em = 150% (1.5배)

px

• 크기를 절대적으로 지정

cm, mm, in, pt 등

색상 단위

• 색상에 해당하는 영단어 입력 -> 영단어로 표현할 수 있는 색상 제한적 -> 색상 단위 제공

RGB 색상	RGBA 색상	HEX 코드
rgb(red, green, blue)	rgba(red, green, blue, alpha)	#000000
RGB를 조합해 색상 표현 0~255 사이의 숫자 입력	RGB 색상 단위에 알파 값을 추가한 형태 (알파 값 : 투명도 0.0 ~ 1.0 ) (0.0 투명 / 1.0 불투명)	RGB 색상 단위를 딻게 입력하는 방법 RGB 색상 조합을 16진수로 표현

URL 단위

• 이미지, 글꼴 파일 불러올 때 사용

<style>
  body {
    background-image: url('main.jpg');
  }
</style>