[CSS] 크기, 색상 단위

TOC

• 크기 단위
  • px
  • %
  • em
  • rem
  • viewport
• 색상 단위
  • 색상 키워드
  • RGB 색상
  • HSL 색상
  • alpha(투명도)

크기 단위

px

• 모니터 해상도의 한 화소인 'pixel' 기준
• 픽셀의 크기는 변하지 않으므로 고정적인 단위

%

• 백분율 단위
• 가변적인 레이아웃에서 자주 사용

em

• 바로 위, 부모 요소의 크기를 상속받는다.
• 1em이면 부모와 같은 크기이며 이를 기준으로 상대적인 사이즈를 가진다.

rem

• 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가진다.
• 일반적으로 html 태그의 기본 폰트 사이즈는 16px

viewport

• 웹 페이지를 방문한 유저에게 바로 보이는 컨텐츠의 영역(디바이스 화면)
• 디바이스의 viewport를 기준으로 상대적인 사이즈 결정
• vw, vh, vmin, vmax

색상 단위

색상 키워드

• 대소문자 구분 X
• red, blue, black 과 같은 특정 색을 직접 글자로 표현

RGB 색상

• 16진수 표기법 : '#' + 16진수 (ex. #000000)
• rgb() 함수형 표기법 : rgb(0, 0, 0)

HSL 색상

• 색상, 채도, 명도를 통해 색 표현
• hsl(120, 100%, 0)

alpha(투명도)

• rgb와 hsl에서 투명도를 설정할 수 있다.

p {
  color: rgba(0, 0, 0, 0.5);
}
p {
  color: hsla(120, 100%, 0.5);
}