본문 바로가기
CSS/CSS 응용

[em]반응형을 좀 더 편하게 할 수 있는 폰트사이즈 단위/쉽게 알아보기

by 알찬 퍼블리셔 2022. 8. 10.
728x90
반응형

em 은 상위 요소가 기준이 되는 단위 

 

하단 예시를 보면 1줄에 4개의 p를 넣고 4개씩 1개의 박스로 묶었다 

 

첫번째 박스부터 순서대로  16px / 20px / 30px / 40px 

이고 왼쪽부터 순서대로 0.5em / 1em / 1.5em / 2em 이다 

 

모두 폰트 사이즈가 다르다 

 

16px 기준의 1em 이 16px 이고

20px 기준의 1em 은 20px 이다

 

박스별로 기준 크기를 정해두고 반응형작업시 박스별 폰트사이즈만 조정해주면 하단의 딸려있는 아이들의 폰트사이즈는 상위에 맞춰 자동 조절된다!! 편하게 반응형 조절이 가능하다 

 

 

728x90
반응형

댓글