이번에 프로젝트를 진행하면서
정확한 단위의 차이를 모르고 썼는데 이번 기회에 찾아서 정리
추후 내가 다시 보고 쓰기 위해

📌CSS 단위

1. 절대 길이 단위

• 어떤 브라우저나 다른 기기에 화면에서도 항상 동일한 크기를 갖고 있음.
• cm, mm, Q, in, pc, pt
• 보통 99.9% CSS에서 사용하는 유일한 값 : px
  

px

• 1px은 모니터의 화면을 구성하는 사각형 1개의 크기 단위를 의미
  
  
  

2. 상대 길이 단위

• 텍스트나 다른요소의 크기가 페이지의 다른 모든 것에 비례
• CSS에서 자주 사용하는 상대 단위 크기는 %, em, rem, vw, vh
  

%

• 해당 속성의 상위 요소 속성값에 상대적인 크기를 가짐

em

• 부모 요소의 텍스트 크기에 상대적인 값
• 1em = 부모의 font-size

rem(root em)

• html 태그의 텍스트 크기에 상대적인 값
• 1rem = 16px(html 태그의 텍스트 크기)

vw

• 뷰포트(viewport)의 너비를 기준으로 상대적인 크기를 가짐
• 1vw = 뷰포트 너비의 1%

vh

• 뷰포트(viewport)의 높으릴 기준으로 상대적인 크기를 가짐
• 1vh = 뷰포트 높이의 1%

❓viewport

브라우저 화면에 표시되는 웹사이트 영역의 크기
즉, 실제 우리 눈에 보이는 화면의 크기

---

참고자료
Mdn
CSS에서 사용되는 단위 알이보기