CSS : 단위

🤔 들어가기 전

px(픽셀)말고 다양한 단위들이 존재한다.

CSS 단위에 대해서 차근차근 알아가 보자!! 👈(ﾟヮﾟ👈)

---

🗂️ 절대 단위

절대(absolute) 단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다.

px

📌 참고자료
poiemaweb CSS 프로퍼티 값의 단위

픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다.

픽셀은 디바이스 해상도에 따라 상대적인 크기를 가지며 주로 요소의 크기 또는 이미지의 크기를 지정하는 데 사용한다.

🛑 주의

• px은 어떤 상황에서도 동일한 값을 유지하여 가변성이 없으며, 반응형 웹에 적합하지 않은 단위이다.

🗂️ 상대 단위

상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔수 있는 길이를 나타내는 단위를 말한다.

텍스트 크기 : em & rem

📌 참고자료
DaleSeo CSS 상대 단위 - em과 rem
CODINGFACTORY CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이
TCPSCHOOL CSS 크기 단위
드림코딩 by 엘리 (유튜브) 프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM) | Responsive CSS Units

em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다.
em은 부모 요소의 글꼴 크기, rem은 루트 요소(html 태그)의 글꼴 크기를 의미한다.

📝 em

상위 요소 크기의 몇 배인지로 크기를 정한다.

🛑 주의

• 외부 여백(margin)과 내부 여백(padding) 크기를 정할 때는 자기 자신의 글자 크기(font-size)를 기준으로 한다.

📝 rem

최상단 요소(html 태그 요소) 크기의 몇 배인지로 크기를 정한다.

🛑 주의

• html 요소 크기의 글자 크기 기본값은 16px이다.
• 단, 브라우저마다 기본값(16px)이 다를 수 있다.

뷰포트 크기 : vw & vh & vmin & vmax

📌 참고자료
MDN CSS 값과 단위
poiemaweb CSS 프로퍼티 값의 단위
김평범's OrdinaryCode
css 반응형을 위한 단위 vw, vh (svg text 반응형 처리 예시)
아 오늘 금요일인 줄 CSS 단위 vw, vh
Minim (유튜브영상) _ vh, vw, vmin, vmax: How to use CSS Viewport Units

반응형 웹 디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.

Viewport 단위는 상대적인 단위로 viewport를 기준으로 한 생대적 사이즈를 의미한다.

단위	설명
vw	viewport 너비(가로)의 1/100
vh	viewport 높이(세로)의 1/100
vmin	viewport 너비 또는 높이 중 작은 쪽의 1/100
vmax	viewport 너비 또는 높이 중 큰 쪽의 1/100

---

🗓️ 수정 및 추가

✅ 2022.03.20

• em, rem 참고자료 추가

✅ 2022.05.17

• em, rem 주의사항 추가