CSS 단위

CSS는 다양한 종류의 단위를 가지고 있습니다. 스타일시트에서 사용되는 단위들에 대해서 알아 봅니다.

키워드

CSS의 값으로 키워드를 사용하는 방법입니다. 키워드는 속성별로 적용되는 값이 틀립니다. 하지만, vscode와 같은 도구를 사용하게 되면 키워드를 예시로 보여주기 때문에 보다 쉽게 선택하여 적용할 수 있습니다.

크기단위

CSS값으로 사용할 수 있는 크기 단위 입니다.

  • px : 절대적으로 크기를 지정할 때는 px 단위를 시용합니다.

  • % : 퍼센트 단위는 기본 설정된 크기에서 상대적으로 크기를 지정합니다.

  • em : em 단위는 배수를 나타내는 단위입니다.

  • rem

색상단위

  • 색상 키워드

RGB 단위는 R(빨간색), G(초록색) , B(파란색) 의 조합을 사용하여 색상을 표현하는 단위입니다.

  • Hex 코드
  • rgb 단위
  • rgba
  • hsl
  • hsla

URL 단위

미지 파일이나 폰트 파일을 불러올 때는 URL 단위를 사용합니다.

body {
    background-image: url ('파일') ;
}

url()함수 내부에 경로를 입력하면 됩니다.