[CSS] 반응형을 위한 단위 정리: %, em & rem, vw & vh

반응형

💋 단위

✔️ %

• %는 부모 요소 기준으로 적용된다.
• 부모에 padding 있으면 그 영역은 빼고 %를 때려서 계산함
• max-width 와 함께 자주 사용한다.
• Relative to the parent element 

 

margin /  padding

 

 

 

✔️ em & rem

• em
• 가장 근접한 상위 요소의 폰트 사이즈의 몇 배인지를 기준으로 정하는 단위
• 상위 요소의 폰트 사이즈가 24px인 경우, 하위의 2em은 48px이다.
• 상위 요소의 폰트 사이즈에 따라서 변화하기 때문에 초보자(=깃짱)에게는 조금 어려울 수 있다.
• Relative to the font-size of the element (2em means 2 times the size of the current font)
• rem
• root를 기준으로 하는 em
• 여기서 root는 최상위 요소이고, html 이다.
• html의 기본 font-size는 16px이다.
• pc에서 모바일로 갈 때 일일이 다 만지기 피곤하니깐 html의 폰트 사이즈만 변경하면 되도록 많이 사용한다.
• 실제로 값이 몇인지 알기 어려울 때는 개발자도구의 styles 옆에 computed를 보자!
• Relative to font-size of the root element

 

✔️ vw & vh

• vw
• view port width
• view port는 우리가 보는 브라우저
• 20vw는 현재 보고있는 뷰포트 기준으로 20%를 말한다.
• Relative to 1% of the width of the viewport*
• vh
• view port height
• view port는 우리가 보는 브라우저
• %와 마찬가지로, max-width, min-width 이런거랑 같이 활용할 수 있다.
• Relative to 1% of the height of the viewport*

 

* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

 

💋 브라우저 호환

이제 거의 다 되긴 하는데 그래도 혹시 모르니 좀 찾아봐야 한당

 

💋 참고자료

• https://blog.hubspot.com/website/css-margin-vs-padding
• https://www.youtube.com/watch?v=SmzghM3l228
• https://www.inflearn.com/blogs/3759?gad_source=1&gclid=Cj0KCQiAy9msBhD0ARIsANbk0A-AHSb3qK-pMrl0ECAf2RSxLk4O2L3xRPNtzcEIOACMjOduybxF5ckaAvOPEALw_wcB
• https://www.daleseo.com/css-em-rem/ ⇒ 설명 잘해주심
• https://www.w3schools.com/cssref/css_units.php

 

도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!