4-1. px, em, rem 차이점
px은 값이 고정되어있는 절대값의 단위, em 과 rem은 환경에 따라 변하는 상대단위
상대단위 & 절대단위
상대단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바뀌는 길이를 나타내는 단위이다
ex ) em , rem, % , vw ,vh 등..
절대단위란 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다.
보편적으로 책이나 신문과 같은 인쇄 콘텐츠는 항상 그 크기가 고정적이므로 절대단위를 사용해야 하지만, 웹이나 디바이스나 사용자 환경에 따라 콘텐츠 크기가 유동적으로 변하기 때문에 절대 단위를 사용하면 콘텐츠의 유연성이 저하된다.
ex ) px ( 웹에서 절대 단위는 px을 제외하고는 잘 쓰이지는 않음)
PX
픽셀은 절대값을 사용하는 단위. 즉 1Px은 고정된 물리적 크기에 해당함.
PX 사용의 문제점
모든 브라우저는 사용자가 font-size 설정이 가능하다. 따로 font-size를 지정하지 않은 경우에는 일반적으로 16px로 표시 되는데 개발자가 만약 font-size를 px로 고정하면, 사용자가 브라우저 설정에서 font-size를 변경하려고 해도 개발자가 정해둔 font-size에서 변경이 되지 않는다.
예를 들어 css에서 font-size를 24px로 설정해두고 브라우저에서 사용자가 font-size를 40px로 바꾸려고 해도 화면에 표시되는 크기는 24px에서 변하지 않는다.
한마디로 px은 사용자의 설정값을 덮어쓴다는 뜻이다.
em
em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 px로 바뀌어 화면에 표시된다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우에는 상위 요소의 폰트 사이즈가 기준이 된다.
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10em;/* 200px */
}중첩인 경우
!https://pf-emoji-service--cdn.us-east-1.prod.public.atl-paas.net/atlassian/warning_64.png
<style>
.container {
font-size: 14px;
}
.container.title {
font-size: 2em; // 28px
}
.container.subtitle {
font-size: 1.5em; // 21px
}
.container.subtitle.leading {
font-size: 0.5em;
}
</style>
<body>
<div class="container">
<div class="title"></div>
<div class="subtitle"></div>
</div>
</body>leading의 글꼴의 크기는 container안에 subtitle안에 있기 때문에, 14x1.5x0.5 = 10.5px이 된다.
rem
rem에서 r은 root, 즉 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환된다. HTML에서 최상위 요소는 html태그이다. 따라서 rem의경우, html 요소의 font-size 속성값이 기준이 된다. 만약 별도의 font-size를 설정하지 않았을 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받는다. (일반적으로 16px)
