px? em? rem? CSS 다양한 단위 정리

썸네일

🚀 단위

---

코딩을 하다 보면 px을 써야 하나? em?? em은 또 뭐지 rem? rem은 뭐고 em은 뭐야!! 할 때가 있다. 나도 그렇기 때문에 지금 이 글을 정리하려고 한다. px, em, rem은 뭔지 araboja.

 

우선 CSS에서 사용할 수 있는 단위는 크게 세 가지이다.

• 절대 길이 단위 : cm, mm, px 등
• 상대 길이 단위 : em, rem, vw, vh 등
• 백분율 : %

세 가지 중 절대 길이 단위부터 살펴보겠다. 왜냐고?? 내가 px만 쓰면서 했으니까~ 반성하는 걸루다가 그냥

 

1. 절대 길이 단위

 

px

'화소'를 의미하는 Pixel(Picture + Element)의 약자로 디바이스 화면에서 이미지를 표현하는 가장 작은 단위이다. 컴퓨터 모니터 설정을 보면 1920 x 1060 인가 무튼 이런 거 이게 바로 픽셀이다 가로 1920px 세로 1060px 이런 느낌이다.

px은 CSS에서 많이 쓰이는 기본 단위이다. 진짜 많이 썼다 내가.. ㅎ 상대 길이 단위와는 달리, 고정된 크기 그대로를 그리기 때문에 직관적으로 쉽게 사용할 수 있다.

px는 요소의 넓이나 높이, 패딩, 마진, 보더 값, 폰트 사이즈 등 값의 단위로 사용된다.

대부분의 브라우저에서 폰트의 초기 기본 px의 크기는 16px이다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

2. 상대 길이 단위

상대 길이 단위 종류

em

em은 부모의 font-size에 따라 기준점을 세우고 기준점에 따라 크기가 달라진다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

위에서도 보면 알 수 있듯이 부모 요소인 body 요소의 30px의 영향을 받아서 div와 p태그의 font-size가 변하는 걸 알 수 있다. div안의 div는 이제 body요소의 영향을 받은 첫 번째 div가 두번째 div의 부모이기때문에 첫번째 div의 font-size에 영향을 받는 것을 알 수 있다.

 

rem

rem은 em과 생긴 것이 비슷하지만 이제 em은 부모 요소가 기준이었다면 rem은 최상위 엘리먼트인 html의 폰트 사이즈를 기준으로 잡는다. 보통 기본 폰트 사이즈가 (16px)이라서 디자이너 분들이 0.5 rem 이런 단위를 많이 쓰신다면 8px로 찰떡같이 알아들으시는 개발자가 되시길 바란다.

나름대로 난.. em을 element mother, rem을 real element mother 진짜 엄마인 html, 부모인 줄 알았는데 양엄마였던.. 

 

📌 여기서 궁금한 점 그럼 rem과 em 중 누가 더 좋아요??
상황에 따라 쓰는 게 다르겠지만 rem이 좀 더 접근성이 좋다. em은 이제 부모 요소가 바뀔 때마다 바뀌는 단위이기 때문에 유지보수 측면에서 조금 부족하지만, rem은 최상위 요소에 따라 크기가 바뀌기 때문에 거의 고정돼 있다고 보면 되는 부분이라 rem을 사용하는 것을 추천한다.

 

vw, vh

각각 viewport width, viewport height의 약자로 지금 내가 위차하고 있는 웹사이트에서 보이는 영역을 뜻한다. 창의 사이즈를 축소한다면 그만큼 작아지고, 키운다면 넓어진다.

꼭 vh는 height에, vw는 width에 넣으라는 법은 없다. 그렇지만 헷갈리니까~ 그런 짓은 자제 plz

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

3. %

 

말 그대로 %를 계산해서 넓이의 값을 낸다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

. parent 요소의 넓이와 높이가 각각 500px 이니까. child 요소의 width: 50%, height: 50%를 주게 된다면 넓이와 높이가 각각 250px이 되는 것이다.

 

📘 정리를 하고 느낀 점
여러 단위들을 알아보았는데 사실 나는 px 위주로 코드를 짰었는데 이건 정말 무식한 거였다.. 그리고 vw, vh도 뭣도 모르고 막 썼는데 이제 신경 써가면서 단위 사용을 해야겠다. 프런트엔드 개발자라면 반응형 웹 개발은 그냥 필수!! 무조건 필수라고 생각하면 되기 때문에 반응형을 잘하기 위해서는 기본적인 단위의 개념부터 확립해 나가야 한다고 생각한다.

📘 다음엔 뭘 해볼까?
여태 짜 왔던 코드들을 살펴보면서 잘못된 단위는 없었는지 내가 왜 이 단위로 코딩을 했는지 명확하게 이유를 생각해 볼 필요가 있을 것 같다. 어찌 보면 코드 리팩터링..? 을 하고 싶다.