.png)
상대 단위란?
상대(relative)단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이의 단위를 나타내는 단위입니다.
em, rem, %, vw, vh
반면 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다.
px, pt, cm, in
em / rem의 공통점
font-size 속성값에 비례해서 결정되는 상대 단위
아래와 같이 font-size 값의 증감에 비례해서 유동적으로 길이가 결정되고 싶은 속성에 em / rem 단위를 사용해서 길이 지정을 할 수 있습니다.
ex)font-size: 16px
0.5em = 16px 0.5 = 8px
1em = 16px 1 = 16px
2em = 16px 2 = 32px
3em = 16px 3 = 48px
ex)font-size: 20px
0.5em = 20px 0.5 = 10px
1em = 20px 1 = 20px
2em = 20px 2 = 40px
3em = 20px 3 = 60px
em / rem의 차이점
어디에 있는 font-size 속성값인지에 따라 차이가 발생
em = 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준
rem = r(root), 즉 최상위 요소의 font-size 속성값이 기준(html/16px)
ex)
html {
font-size: 16px;
}
div {
font-size: 20px;
width-10em;
}위의 코드에서 div의 width 값은 200px(20px * 10)이다.
html {
font-size: 16px;
}
div {
font-size: 20px;
width-10rem;
}하지만 rem으로 width값을 주었다면 root(html)의 값을 기준으로 값은 160px(16px * 10)이다.
font-size 속성이 없을 경우
rem
root의 설정을 변경하지 않았다면, html기본 16px을 적용 받는다.
em
.class {
font-size: 10px;
}
.class li {
width: 10em;
}속성이 정이되지 않은 경우 부모의 font-size 값을 그대로 상속 받는다.
위의 예시에서 width 값은 .class의 10px에 영향받아 100px(10px * 10)가 된다.
em과 rem 중 어떤 걸 사용해야 할까?
가급적 rem을 우선적으로 쓰도록 권고
em의 경우 실제 몇 px로 변환될지에 영향을 주는 변수가 많아지기 때문에, em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지는 경향이 있기 때문이다.
