CSS 절대 단위와 상대 단위

CSS를 작성하다보면 크기 단위를 통일하는 것이 정말 중요하다.
반응형 디자인을 적용할 때도 그렇고 합의된 단위로 작성되지 않은 코드는 예측 불가능한 결과를 낳기 때문이다.

(개인적으로 어떤 로직에 대한 에러를 고쳐나가는 것보다 CSS에서 발생하는 예상 밖의 오류가 고치기 더 까다롭다고 생각한다.)

1. 절대 단위와 상대 단위

1-2. 정의

CSS에는 절대 단위와 상대 단위가 존재한다.

다른 요소에 의해 상대적으로 결정되는 것이 상대 단위, 다른 요소에 영향 받지 않고 고정된 값이 절대 단위다.

1-2. 종류

상대 단위

상대 단위에는 em rem % vw vh 등이 있다.

절대 단위

절대 단위에는 px cm 등이 있다.

2. 상대 단위 종류

2-1. vw, vh

사용자의 viewport(브라우저창)의 크기를 기준으로 하는 단위다.

vw 는 viewport의 너비(width)를, vh는 viewport의 높이(height)를 의미한다. 50vw라고 한다면 뷰포트 전체 너비의 50% 크기를 의미한다.

2-2. %

부모 요소 크기를 기준으로 하는 단위다.

다음과 같은 코드가 작성되었을 때 div의 너비는 부모 요소 너비의 50%를 말한다.

div {
	width: 50%;
}

2-3. em, rem

가장 헷갈리는 단위인 em, rem이다.

em

해당 요소의 글꼴 크기를 기준으로 한다.

해당 요소의 글꼴 크기가 정해져 있지 않다면, 부모 요소의 글꼴 크기를 기준으로 한다.

다음과 같은 코드에서 div의 너비는 30px이 될 것이다.

div {
	font-size: 30px;
	width:1rem;
}

해당 요소의 글꼴 크기가 정해지지 않았다면 부모 요소의 글꼴 크기를 참조한다.
아래 예시에서 child 요소의 너비는 20px, 높이는 (20 * 3) 60px이 될 것이다.

.parents {
	font-size: 20px;
}

.child {
	width:1rem;
    height:3rem;
}

그럼 다음과 같이 복잡한 상황에서 child 요소의 글꼴 크기는 얼마일까?

24 1.5 2 = 72px이 된다.

.grand-parents {
	font-size: 24px;
}

.parents {
	font-size: 1.5rem;
}

.child {
	font-size: 2rem;
}

여기서 child 요소의 너비와 높이가 주어진다면 각각의 크기는 얼마일까?

해당 요소의 글꼴 크기를 기준으로 하기 때문에 너비는 72 0.5 px, 높이 72 1 px이 된다.

.child {
	font-size: 2rem;
    width: 0.5rem;
    height: 1rem;
}

중첩이 반복적으로 일어날 경우 em 단위는 요소의 크기를 예측하기 난해해질 수 있기 때문에 주의해야 한다.

rem

HTML 루트 요소의 글꼴 크기를 기준으로 한다. 일반적으로 브라우저의 폰트크기는 16px이다.

rem은 상속을 고려하지 않기 때문에 em에 비해 크기를 예측하기 용이하며 폰트 크기를 변경했을 때에도 레이아웃이 일관되게 유지된다.

다음과 같은 코드에서 div의 글꼴 크기는 16 1.5 px이고, 너비는 16 3 px 이다.

html{
	font-size: 16px;
}

div {
	font-size: 1.4rem;
    width: 3rem;
}

3. 결론

앞선 예시로 접했듯 em을 사용하는 경우 상속으로 인해 요소의 크기를 예측하기가 굉장히 어려워진다. 또한 어떤 요소의 글꼴 크기를 변경했을 때 레이아웃이 틀어져 겉잡을 수 없는 CSS 지옥이 시작될 수 있다. 따라서 개발을 할 땐 rem으로 통일하는 것이 CSS를 수정할 때도, 반응형 UI를 만들 때도 훨씬 수월하겠다.