사이즈를 결정하는 유닛
절대적인 유닛
- 픽셀: 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위
=>절대적인 유닛을 사용하면 브라우저의 크기를 바꾸어도 텍스트의 크기가 유동적으로 변하지 않음.
상대적인 유닛
- em, ex, ch, rem 등등 아주 많이 있음.
반복적으로 흔하게 쓰이는 것은 em, rem, vw,vh, %임. - em: 타이포그래피에서 현재의 지정된 폰트의 사이즈를 나타내는 단위, 즉 지금 폰트사이즈를 나타내는 단위임. 폰트패밀리에 따라서 텍스트의 크기가 달라 보일 수 있는데, em은 폰트에 상관없는 단위!
※ em이 상대적인 단위인 이유: em은 부모의 폰트 사이즈를 곱한 값으로 계산이 된다. %와 비슷한 개념이다. 부모 요소에 상대적으로 크기가 결정됨.
- rem: r은 root를 뜻함. 루트에 지정된 폰트 사이즈에 따라서 크기가 결정됨. html의 16px을 기본으로 함. 루트 요소에 상대적으로 크기가 결정된다고 생각하면 됨.
- vw: viewport, 즉 브라우저의 너비에 상대적으로 반응함
- vh: 뷰포트의 높이에 상대적으로 반응함.
- %: 부모요소의 상대적인 개념. em과 비슷함.
어떻게 써야할까?
- 부모요소에 따라서 사이즈가 변경되어야한다면 %, em, 브라우저 사이즈에 따라 반응해야한다면 V*, rem을 사용하면 됨
- 요소의 너비와 높이에 따라서 변경이 되어야한다면 %, v*, 폰트의 사이즈에 따라 변경이 되어야 한다면, em, rem을 사용하면 됨!
em과 rem의 차이
예를 들어 좋아요 버튼의 컴포넌트에 따라(즉, 부모 요소에 따라서) 유동적으로 변경되어야 한다면 em을 쓰는 것이 좋다.
