728x90 300x250 em2 폰트 사이즈 em, rem 구하는 방법 em 폰트 크기를 설정하는 값 중 em은 동적으로 변경되는 사이즈를 가집니다. em은 부모 엘리먼트 크기와 같고 만약 폰트 사이즈를 따로 설정하지 않았다면 기본 폰트로 지정되는데 기본 폰트는 보통 16px입니다. 즉 1em = 16px이고 2em = 32px이 되고 2.5em은 2.5*16 해서 40px이 됩니다. 만약 body 엘리먼트 font-size가 20px로 설정된 경우 1em=20px이 되고 2em은 40px이 되는 것입니다. em표현을 픽셀 값으로 표현하면 아래와 같이 표현할 수 있습니다. em = 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값 예를 들어 폰트 크기가 1em이고 브라우저 기본값이 16px로 정의돼 있을 때 만약 12px폰트로 지정하.. 2021. 6. 13. 가변글꼴과 폰트 사이즈 em 간편하게 변경하기 폰트 사이즈- em : 부모 요소에서 지정한 폰트의 대문자M 너비를 기준으로 크기를 조절한다. 대문자 M의 너비를 1em으로 놓고 상대적으로 계산하는데 만약에 지정크기가 없다면 16px이 1em이 된다. font: 100% = 16px - rem : em 요소는 부모요소에 따라 사이즈계 계속 변경되기 때문에 계산이 복잡해 지는데 이런 단점을 극복하기 위해 만들어진 단위가 rem 이다 여기서 r은 루트를 뜻하며 맨 처음에 설정한 기본크기에 따라 적용되기 때문에 중간에 값이 변경되지 않고 계산하기도 편하디. 그러나 em으로 사용했을때는 확대시에 같은 비율로 늘어나고 줄어들지만 rem 단위는 결국 루트에 따라 고정된 값이라서 확대축소시에 비율이 깨진다는 얘기가 있다. - ex : x-height, 소문자 x의.. 2018. 12. 3. 이전 1 다음 728x90 반응형
