CSS에서 요소의 스타일을 지정할 때 선택할 수 있는 단위 카테고리는 두 가지입니다. 절대 단위와 상대 단위. 다음은 각 항목에 대한 세부정보와 차이점입니다.

1. 절대 단위

절대 단위는 고정된 측정 단위입니다. 다른 요소나 화면 크기의 영향을 받지 않습니다. 즉, 사용되는 상황에 관계없이 크기가 일정합니다.

공통 절대 단위:

• px(픽셀): 픽셀은 화면의 작은 정사각형입니다. 고정 레이아웃에 가장 일반적으로 사용되는 단위입니다.

  • 예:

  h1 {
    font-size: 24px;
  }
  

• pt(포인트): 일반적으로 인쇄 매체에 사용되며 1pt는 1/72인치와 같습니다.

• cm(센티미터) 및 in(인치): 웹 디자인에서는 거의 사용되지 않으며 이 단위는 물리적 치수를 기반으로 합니다.

절대 단위의 장점:

• 일관성: 장치나 화면 크기에 관계없이 크기는 항상 동일합니다.
• 예측 가능: 디자인이 모든 플랫폼에서 정확히 동일하게 보이도록 하는 고정 레이아웃을 만드는 데 이상적입니다.

단점:

• 유연성 부족: 절대 단위는 다양한 화면 크기나 확대/축소 설정에 잘 적응하지 못하여 응답성이 떨어집니다.

2. 상대 단위

상대 단위는 유연하며 사용되는 상황에 따라 크기가 조정됩니다. 크기는 상위 컨테이너, 뷰포트 또는 기본 글꼴 크기와 같은 다른 요소에 따라 달라집니다.

공통 상대 단위:

• em: 사용된 요소의 글꼴 크기를 기준으로 합니다. 상위 요소의 글꼴 크기가 16px인 경우 1em은 16px과 같습니다. 상위 요소의 크기가 변경되면 em의 크기도 변경됩니다.

  • 예:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem(루트 em): 루트 요소(일반적으로 요소)의 글꼴 크기를 기준으로 합니다. 이것은 em에 비해 더 예측 가능하게 만듭니다.

기본적으로 브라우저는 달리 지정하지 않는 한 일반적으로 루트 글꼴 크기를 16px로 설정합니다. 요소에 대한 사용자 정의 글꼴 크기를 정의하면 모든 rem 값은 해당 새 크기를 기준으로 계산됩니다.

• 예:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • %(퍼센트): 상위 요소의 크기를 기준으로 합니다. 예를 들어 width: 50%는 요소를 상위 컨테이너 너비의 50%로 만듭니다.

• 예:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw(뷰포트 너비) 및 vh(뷰포트 높이): 이 단위는 브라우저의 뷰포트를 기준으로 합니다. 1vw는 뷰포트 너비의 1%이고, 1vh는 뷰포트 높이의 1%입니다.

• 예:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

상대 단위의 장점:

• 반응형 디자인: 상대 단위는 화면 크기, 글꼴 크기, 컨테이너 크기에 따라 자동으로 크기가 조정되므로 디자인이 더욱 유연해집니다.
• 유지 관리가 더 간편함: 루트 요소의 글꼴 크기를 변경하면(rem 사용) 전체 디자인의 크기를 조정할 수 있습니다.

단점:

• 제어하기가 더 어려울 수 있습니다.: 상속과 크기가 요소를 통해 계단식으로 배열되는 방식을 잘 이해하지 못하면 상대 단위가 때때로 예상치 못한 결과를 생성할 수 있습니다.

절대 단위와 상대 단위를 사용해야 하는 경우

• 절대 단위(예: px)는 정확하고 고정된 측정이 필요할 때 가장 좋습니다. 어디에서나 동일한 크기를 원할 때 사용하세요(예: 작은 로고 또는 아이콘).
• 상대 단위(예: em, rem, vw, %)는 반응형 디자인에 이상적입니다. 화면 크기나 상위 요소에 따라 요소의 크기를 조정하고 조정할 수 있으므로 디자인이 더욱 유연해집니다.

예: 실제 절대 단위와 상대 단위

This is 24px text
This is 1.5rem text (24px based on root size)

이 예에서는:

• 절대 글꼴 크기(24px)는 항상 동일하게 유지됩니다.
• 상대 글꼴 크기(1.5rem)는 루트 글꼴 크기(16px)를 기준으로 조정되어 24px가 됩니다.

결론:

• 기기 간 일관성이 필요할 때 절대 단위를 사용하세요. 하지만 반응이 없다는 점에 유의하세요.
• 특히 다양한 화면 크기와 장치용으로 개발할 때 더욱 유연하고 반응이 빠른 디자인을 위해 상대 단위를 사용하세요.