CSS] 사이즈 px, %, em, rem

고정된 사이즈

px

font-size: 90px 

픽셀은 다이나믹 사이즈가 아니다.

고정된 사이즈로 기기 설정에서 폰트를 크고, 작게 하거나 화면을 크고, 작게 만들어도 그에 맞게 변하지 않는다. 

 

다이나믹 사이즈 

%

font-size: 100%; 이라고 설정하면 기본 값은 16px이다. 

90px만큼 원한다면 90/16 = 562.5 % 정도가 된다. 

font-size: 562.5%; 로 해주어야 한다.

 

em

html에서 em태그는 emphasize로 글자를 이탈릭 사이즈로 바꿀때 사용하였지만 

크기를 조절할 때는 완전히 다르다.

여기서 em은 M을 발음하는 것이고 예전에 M사이즈 만큼을 말했다고 한다.

지금은 1em(M)= 16px이다. 

90px을 원하면 

font-size: 5.625em; 

또는 %으로 설정해도 같다. 

font-size: 562.5%; 

 

다이나믹 사이즈는 부모 태그의 영향을 받는다. 

부모 태그인 body 태그에 이미 사이즈가 설정되어 있는데 

자식 태그인 h1에 또 사이즈를 설정하면 

둘 다 영향을 받아서 사이즈가 배로 커진다.

 

 

rem

화면 사이즈에 따라 변하기는 하는데 

root em 부모 태그에 설정된 사이즈를 무시해라. 

그냥 적어준대로만 효과 줘라