HTML,CSS
CSS의 다양한 단위들
열곰탱
2021. 7. 23. 14:08
px
절대적인 값이다. 다른 요소의 값에 영향 받지 않는다.
rem
상대적인 값이다. 하지막 오직 <html> 태그의 font-size에만 영향을 받았습니다.
ex) 8rem 은 <html> 태그의 font-size의 8배 크기이다.
em
상대적인 갑이다. em은 자기 자신의font-size를 기준으로 합니다.
2em은 자기 자신의 font-size의 2배 크기입니다. 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속 받은 값을 기준으로 합니다.
만약 자기 자신에게 정해진 font-size가 있다면 그 값을 기준으로 em이 결정됩니다.
%(퍼센트)
% 역시 상대적인 값이다. %는 어느 항목에서 쓰이냐에 따라 다른 기준이 적용됩니다.
예를 들어 font-size에서 %가 쓰일 경우, 상위 요소의 font-size에 곱해주는 방식으로 계산합니다.
%가 margin이나 padding의 단위로 사용될 경우, 상위 요소의 width를 기준으로 계산됩니다.
margin-top이나 padding-bottom 등 세로(상하) 속성를 조절할 때에도 상위 요소의 height가 아닌 width를 기준으로 계산된다는 것입니다.
