px (픽셀)
픽셀은 고정된 값을 출력하며 절대 크기가 변하지 않는다. 해당 단위는 크기가 가변적인 웹사이트가 아닌 경우에는 유용하지만 반응형 사이트에 적용하기에는 굉장히 복잡하다는 단점이 있다.
- 픽셀은 절대단위에 속한다.
font-size : 80px과 같이 사용함.
상대 단위
상대(relative)단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다.
em과rem을 포함해%등이 대표적인 CSS의 상대 단위라고 할 수 있다.
% (percentage)
percentage 는 CSS의 데이터 형식이 백분율 값을 나타낸다. 종종 요소의 부모 객체를 기준으로 크기를 정의할 때 사용한다. 주로 박스의 길이를 화면 크기에 맞추어야 할 때 사용한다.
- 해상도가 300px 인 모니터가 있다고 가정하자.
- 화면에 꽉차는 박스를 만들고 싶을 때 해상도 크기가 변해도 그 상태가 유지되기 위해 고정된 px 값이 아닌 % 값을 이용한다.
--> 항상 너비가 화면에 꽉 찬다.
em & rem 은 무엇이 다를까 ?
em과 rem 단위의 기준은 font-size 속성 값이다. 두 단위의 차이라고 한다면, 정확하게 어디에 있는 font-size 속성 값을 기준으로 하느냐에 있다.
em과 같은 경우 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 된다.
rem과 같은 경우 r은 root, 즉 최상위 요소를 의미하기 때문에 결국 최상위 요소의 font-size 속성 값이 기준이 된다.
예시
예를 들어, 다음과 같이 html 요소의 font-size 속성 값이 16px 라고 가정해보자.
html {
font-size: 16px;
}이후 다음과 같이 div 요소가 스타일링 된다면 width 속성의 값은 200px이 된다. 그 이유는 em은 해당 요소의 font-size를 기준으로 값이 정해지기 때문에 해당 div 요소의 font-size : 20px 를 기준으로 10em ( 20px X 10 = 200px )이 결국 200px이 되는 것이다.
div {
font-size: 20px;
width: 10em; /* 200px */
}그러나 다음과 같이 em대신 rem 단위를 이용하여 div요소를 스타일링 한다면, width 속성 값은 160px이 된다. 루트 요소인 html의 font-size:16px이기
때문에 16 x 10rem = 160px이 된다.
div {
font-size: 20px;
width: 10rem; /* 160px */
}즉, rem단위를 사용하면 해당 요소의 font-size는 고려하지 않는 것이다.
그렇다면 em과 rem중 무엇을 써야할까?
많은 CSS 가이드들이
em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적rem을 우선적으로 사용하는 것을 권장하고 있다. 왜냐하면em의 경우 실제 몇px로 변환될지에 영향을 주는 변수가 많아지기 때문에 재사용이 어렵고 유지보수가 힘들어지는 경향이 있기 때문이다.
em의 문제점
- 다음과 같은 경우를 살펴보자
ul요소를 중첩해서 사용하는 경우em단위를 썼을 때ul의 내부ul은 바깥의ul에 영향을 받게 되기 때문에 위처럼 글자 크기가 점점 커지는 현상이 발생하게 된다.
