[Korean FE Article] CSS 길이 단위 이해하기

글 링크: https://imnotadevleoper.tistory.com/371

소개

CSS를 막 배우기 시작하면 가장 먼저 부딪히는 벽 중 하나가 바로 길이 단위입니다. px, em, rem 같은 단위들은 어디선가 들어본 듯 익숙하면서도, 막상 사용할 때마다 헷갈리기 마련이죠. 특히 “px는 쓰면 안 된다던데, 정말 그럴까?” 같은 고민에 빠지기 쉽습니다.

이번 글에서는 절대 단위와 상대 단위의 차이, 레티나 디스플레이 이후 픽셀이 가진 새로운 의미, 그리고 실무에서 자주 쓰이는 rem과 뷰포트 단위까지 차근차근 정리했습니다. 복잡한 개념을 단순하게 풀어내며, 어떤 상황에서 어떤 단위를 선택하면 좋은지도 명확히 알려줍니다.

CSS 단위 때문에 머리가 아프셨다면, 이번 글이 분명히 큰 도움이 될 거예요. 모든 상황에 맞는 정답을 주진 않지만, 각 단위가 어떤 특징을 가지고 있고 언제 고려할 수 있는지 이해하는 데 큰 밑거름이 될 겁니다. 이제 길이 단위를 바라보는 시야가 한층 넓어질 거예요.

목차

• 절대 단위

• 상대 단위

• 특이한 단위 (모든 브라우저에서 지원되는 것은 아님)

• 핵심 정리