CSS 단위

참으로 오랫만에 올리는 React 포스트이다.

한번에 여러가지 일을 벌이려고 하니 다 지켜지지도 않고, 힘에 부치는게 사실이다.
알고리즘도 중요하지만 포트폴리오로 쓸 프로젝트도 중요하고, 내 성과물도 보여줘야 하는 바 서버에 앞서 좀 더 익숙한 UI를 틈틈이 하기로 결정했다. 서버는 언제...?

오늘은 그 첫 단계로 CSS 단위에 대한 포스팅이다.

필자가 뭣도 모르고 화면을 개발하면서 단위가 들어가는 곳에는 무조건 px를 남발했던 기억이 있다. 이제는 단위를 쓰더라도 좀 알고 쓰자! 하는 의미에서 CSS 단위에 대해 정리해본다.

1. PX

: 픽셀단위로, 절대값이다. 즉, 요소에 지정된 사이즈의 영향을 받지 않고 독립적인 값을 가진다는 것. 그러나 해상도의 영향을 받기 때문에, 화면을 보는 디바이스의 영향을 받는다.

2. %

: 상대값으로, 요소에 지정된 사이즈의 상대적인 크기를 결정한다.

3. em

: 상대값으로, 요소에 지정된 사이즈의 배수 단위이다.

4. rem

: em과 마찬가지로 상대값이지만, 최상위 요소의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.

이상이다. 즐개발!