728x90
반응형
em 은 상위 요소가 기준이 되는 단위
하단 예시를 보면 1줄에 4개의 p를 넣고 4개씩 1개의 박스로 묶었다
첫번째 박스부터 순서대로 16px / 20px / 30px / 40px
이고 왼쪽부터 순서대로 0.5em / 1em / 1.5em / 2em 이다
모두 폰트 사이즈가 다르다
16px 기준의 1em 이 16px 이고
20px 기준의 1em 은 20px 이다
박스별로 기준 크기를 정해두고 반응형작업시 박스별 폰트사이즈만 조정해주면 하단의 딸려있는 아이들의 폰트사이즈는 상위에 맞춰 자동 조절된다!! 편하게 반응형 조절이 가능하다
728x90
반응형
'CSS > CSS 응용' 카테고리의 다른 글
다양한 css 애니메이션/레이아웃 참고 사이트 (3108) | 2022.08.23 |
---|---|
로딩 (2986) | 2022.08.22 |
css를 이용한 focus 효과 애니메이션 (0) | 2019.12.12 |
[CSS]한줄로 길게 늘어트리기 (가로로 스크롤 되도록 ) (418) | 2019.07.15 |
[css]이미지 가운데부터 커지면서 보이기-clip-path (0) | 2019.07.08 |
댓글