[CSS] Responsive CSS units

REACT로 프로젝트를 할 때, 모든 CSS 요소들에 절대적인 유닛을 적용하는 것보다 상대적인 유닛을 쓰는 것이 맞는 줄 알았고, 강의 때도 그렇게 들은 기억이 있었다.

또한, 같이 공부한 팀원들도 당연히 같은 마음이어서 상대적인 유닛 (vw, vh, %)을 제공받은 wireframe을 토대로 프로젝트에 적용하였는데, 나중에 알고보니 프로젝트 디자인해주시는 디자이너분들께서 (현업에 계심) 모두 px로 사이즈를 주셔서 유닛들을 전부 다시 px로 바꾼 기억이 있다.(그 후에 미디어 쿼리로 하나하나 변경)

나는 아직 배우는 입장이다보니 현업에서 둘 중 무엇을 사용하는지 잘 모르겠다..

어쨌든 프로젝트때도 Relative length units을 사용하긴 했지만, 정확한 개념이 아직 덜 잡힌 것 같아서 한번 짚고 넘어가는 것이 좋을 것 같단 생각을 하였다.

---

✨ 절대적인 유닛 - Absoulte Unit 

 

px : 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위

문제점 : 1. Container 사이즈가 변경되어도 Contents가 그대로 고정된 값으로 유지됨.

           2. 사용자가 브라우저에서 폰트 사이즈를 변경해도 반응이 없음.

 

 

✨ 상대적인 유닛 - Relative Unit

 

1. parent related - em :

• 타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위. 즉, 지금의 폰트 사이즈를 나타내는 단위.
• 폰트 패밀리에 따라서 사용자에게 보여지는 텍스트의 크기가 달라질 수 있음
• em을 사용할 경우 직관적으로 폰트 사이즈가 계산되지 않는 어려움이 있음.
• 선택된 폰트에 전혀 상관없이 항상 고정된 폰트 사이즈를 갖고 있음. 1em == 16px
• 그럼에도 불구하고 em이 상대적인 이유 : 부모의 폰트 사이즈에 상대적으로 크기가 계산이 된다.

ex) parent의 font-size : 8em / child의 font-size : 0.5em 인 경우 => 1em은 16px이므로 16px * 8 = 128px 이고,

child를 구할 때, child의 부모인 parent의 0.5배 => 즉, 128px * 0.5 = 64px로 계산됨.

또한, parent의 8em은 800% 와도 같고 child의 0.5em은 50% 와도 같다고 볼 수 있다.

정리하자면 parent의 font-size: 8em == 800% == 128px , child의 font-size: 0.5em == 50% == 64px

 

2. root related - (root) rem : 

• em과 비슷하지만, 부모에 따라서 사이즈가 계산되는 것이 아니라, 루트 요소에 상대적으로 크기가 계산이 된다.

ex) parent의 font-size : 8em / child의 font-size : 0.5em 인 경우 =>

parent의 font-size는 16px * 8 = 128px , child의 font-size는 16px * 0.5 = 8px

 

3. viewport related - vw (viewport width) :

• 100vw 일 경우 => viewport width (브라우저 너비)의 100%를 쓰겠다
• 50vw 일 경우 => viewport width (브라우저 너비)의 반, 50%에만 적용하겠다.

4. viewport related - vh (viewport height) :

• vw와 마찬가지로, 100vh 일 경우 => viewport height (브라우저 높이)의 100%를 쓰겠다
• 50vh 일 경우 => viewport height (브라우저 높이)의 반, 50%에만 적용하겠다.

5. parent related - % :

• 부모의 폰트 사이즈에 상대적으로 크기가 계산이 된다.
• em 대신 %를 사용할 수 있다.

---

🤔 상대적인 유닛을 적용하는 기준

 

1. 요소의 사이즈

• 부모 요소의 사이즈에 따라서 사이즈가 변경이 되어야 한다면 => %, em
• 부모 요소와는 상관없이 브라우저 사이즈에 따라서 변경이 되어야 한다면 => vw, vh, rem
• 요소의 너비와 높이에 따라서 사이즈가 변경이 되어야 한다면 => %, vw, vh
• 폰트 사이즈에 따라서 사이즈가 변경이 되어야 한다면 => em. rem

2. em과 rem을 사용하는 기준

• rem : 나의 컴포넌트가 페이지 어디에서 사용돼도 사이즈가 그대로 고정이 되어야 할 경우
• em : 나의 컴포넌트가 어디에서 사용되냐에 따라서 사이즈가 유동적으로 변경이 되어야 할 경우

---

⚡ 오늘의 정리

 

1. 보통 font-size는 rem을 사용하고 그에 따른 padding 같은 경우는 em을 사용하는 것 같음.

2. 미디어 쿼리를 적용할 때도 max-width 같은 경우, px로 적용하지 말고 rem을 이용해보자.

 

 

 

※ 참고 : 프론트엔드 강의 - 프론트엔드 개발자 되기 입문 편 / 드림코딩 by 엘리

※ px과 em을 계산해주는 사이트 : http://pxtoem.com/