[CSS] 단위 px, em, rem, vw, vh, %

기준

1. 절대적인 값 VS 상대적인 값
2. 만일 상대적인 값이라면 무엇을 기준으로 둘 것인가?

기준 1.

• 절대적인 값 : px
• 상대적인 값 : em, rem, vw, vh, %

기준 2.

상대적인 값이라면, 그 기준은 무엇인가?

• em : 부모요소
• rem : 최상위 요소 (HTML의 root)
• vw : 뷰포트의 너비(1vw는 뷰포트 너비의 1%)
• vh : 뷰포트의 높이(1vh는 뷰포트 높이의 1%)
• 퍼센트(%) : 부모 요소의 크기에 대한 비율

상대적인 값들을 사용함으로써, 반응형 웹 디자인 구현 시 유연한 레이아웃을 만들 수 있다.

1. px

• 가장 기본적인 화면 단위
• 화면의 한 점을 나타내며, 각 디스플레이의 해상도에 따라 크기가 달라질 수 있다
• 고정된 크기를 가지며, 확대/축소 시에도 동일한 크기를 유지
• 예: width: 20px는 너비가 항상 20px인 요소를 의미

2. em

• 상대적인 단위로, 주로 글꼴 크기에 사용
• em의 값은 부모 요소의 글꼴 크기에 비례
• 예를 들어, 부모 요소의 글꼴 크기가 16px이고 자식 요소의 글꼴 크기가 2em인 경우, 자식 요소의 글꼴 크기는 32px (16px * 2)
• 레이아웃의 크기를 부모 요소에 따라 동적으로 조절할 때 유용

3. rem

• rem도 상대적인 단위지만, em과 달리 최상위 요소 (HTML의 root)의 글꼴 크기에 기반하여 계산
• 이는 rem을 사용할 때 모든 요소가 동일한 참조점을 가진다는 것을 의미
• 예를 들어, 최상위 요소의 글꼴 크기가 16px이면 1rem은 16px
• 일관된 크기 조정이 필요할 때 유용하며, CSS에서 글꼴 크기, 여백, 너비 등 다양한 속성에 사용

4. 퍼센트(%)

• 상대적인 단위로, 부모 요소의 크기에 대한 비율로 크기 정의
• 레이아웃의 크기를 부모 요소의 크기에 따라 유동적으로 조절하고자 할 때 유용

5. vw(viewport width)

• 뷰포트의 너비에 기반한 상대적 단위
• 1vw는 뷰포트 너비의 1%에 해당
• 화면의 크기에 따라 요소의 크기가 변하게 하고 싶을 때 사용

6. vh(viewport height)

• 뷰포트의 높이에 기반한 상대적 단위
• 1vh는 뷰포트 높이의 1%에 해당
• 화면 높이에 따라 요소의 크기를 조정하고자 할 때 사용