CSS에서 속성 값은 크기, 길이, 색상 등을 나타내는데 사용되는 단위를 포함합니다. 이러한 단위는 다양한 형식으로 사용되며, 각각의 용도에 따라 적합한 단위를 선택해야 합니다.

절대 단위

절대 단위는 고정된 크기를 표현하는 데 사용됩니다. 가장 일반적으로 사용되는 단위는 다음과 같습니다.

• px (픽셀): 화면의 해상도에 따라 크기가 조절됩니다.
• in (인치): 실제 프린터의 인치 크기에 해당합니다.
• cm (센티미터): 실제 길이에 해당합니다.

.example {
  width: 200px;
  height: 10cm;
}

상대 단위

상대 단위는 기기나 뷰포트에 상대적인 크기를 나타내는데 사용됩니다.

• em: 요소의 폰트 크기에 상대적입니다.
• rem: 최상위 요소의 폰트 크기에 상대적입니다.
• %: 부모 요소의 크기에 상대적입니다.

.example {
  font-size: 1.2em;
  width: 50%;
}

색상 단위

색상을 표현하는 데 사용되는 단위는 다음과 같습니다.

• 이름: red, blue와 같은 색상 이름
• HEX 코드: #RRGGBB 형식의 16진수 코드
• RGB 값: rgb(255, 0, 0) 형식의 RGB 값
• RGBA 값: rgba(255, 0, 0, 0.5) 형식의 투명도가 추가된 RGBA 값

.example {
  color: red;
  background-color: #00FF00;
  border: 1px solid rgba(0, 0, 255, 0.5);
}

결론

다양한 CSS 속성 값의 단위를 적절하게 활용하여 웹 페이지의 디자인을 효과적으로 구축할 수 있습니다. 각각의 단위의 특성을 이해하고 상황에 맞게 활용하는 것이 중요합니다.

MDN Web Docs - CSS Values and Units

CSS Units - W3Schools