[CSS] 유닛 (px, em, rem, vw, vh)

CSS 유닛은 웹 페이지의 크기, 간격, 색상 등을 정의하는 데 사용되는 측정 단위입니다. 적절한 유닛을 선택하는 것은 웹 디자인의 완성도를 높이는 데 매우 중요합니다.

• 반응형 웹 디자인: 다양한 기기에서 웹 페이지가 최적화되도록 유연하게 디자인할 수 있습니다.
• 정확한 레이아웃 구현: 정확한 크기와 간격을 설정하여 깔끔하고 일관된 디자인을 만들 수 있습니다.
• 유지보수 편의성: 코드 가독성을 높여 추후 수정이 용이합니다.

CSS 유닛의 종류와 특징

1. 절대 단위

• px (픽셀): 화면 해상도에 따라 크기가 변하지 않는 고정된 크기입니다.
• pt (포인트): 인쇄 산업에서 주로 사용되는 단위로, 1pt는 약 0.35mm입니다.
• in (인치): 실제 길이를 기반으로 하는 단위입니다.
• cm (센티미터): 실제 길이를 기반으로 하는 단위입니다.

2. 상대 단위

• em: 부모 요소의 font-size를 기준으로 합니다.
• rem: 최상위 요소의 font-size를 기준으로 합니다.
• % (퍼센트): 부모 요소의 값을 기준으로 비율을 나타냅니다.
• vw (뷰포트 너비): 화면 너비의 비율을 나타냅니다.
• vh (뷰포트 높이): 화면 높이의 비율을 나타냅니다.

3. 기타 단위

• fr (분할 단위): 컨테이너 안의 아이템을 일정 비율로 나눌 때 사용합니다.
• calc(): 다른 단위를 조합하여 계산할 때 사용합니다.

다양한 CSS 유닛 활용 예시

예시 1: 반응형 웹 디자인

 

.container {
  width: 80vw; /* 화면 너비의 80% */
}

 

 

예시 2: 타이포그래피

 

body {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* body 요소의 font-size의 2배 */
}

 

 

예시 3: 레이아웃 디자인

 

.column {
  width: 33.33%; /* 세 개의 열로 나누기 */
}

 

 

CSS 유닛 선택 가이드

• 반응형 디자인: vw, vh, rem 등의 상대 단위를 사용하여 다양한 화면 크기에 적응하는 레이아웃을 구축합니다.
• 정확한 크기: px 단위를 사용하여 정확한 크기를 지정할 수 있습니다.
• 유연한 레이아웃: em, rem, fr 단위를 사용하여 유연하고 가변적인 레이아웃을 만들 수 있습니다.
• 계산: calc() 함수를 사용하여 복잡한 계산을 수행할 수 있습니다.