CSS Unclear to Clear

모호함을 명확함으로, 낯설음을 익숙함으로 바꾸며 이해로 나아가기 위한 기록

CSS 단위

px: 화면의 고정된 크기를 의미, 디바이스 화면 크기에 상관없이 일정하게 유지된다. 상대 단위
em: 부모 요소의 글꼴 크기에 비례한다. 상속받은 글꼴 크기에 따라 변한다.
rem: 루트 요소(html)의 글꼴 크기에 비례한다. 전체 문서에 일관된 기준
%: 부모 요소 크기에 비례한다. 크기 비율로 반응형 설계에 활용된다.
vw: 뷰포트의 너비에 비례한다.
vh: 뷰포트의 높이에 비례한다.

px (픽셀)

절대적인 크기를 지정하는 단위
화면 해상도와 관계없이 고정된 크기를 가짐
예측 가능한 디자인을 만들기 쉬움
고정 크기이므로 반응형 디자인에서는 유연성이 부족할 수 있음
해상도에 따라 다르게 보일 수도 있음

em (부모 요소 기준 상대 단위)

부모 요소의 font-size를 기준으로 크기가 결정됨
가변적인 크기를 설정할 때 유용함
1em은 부모 요소의 font-size 값과 동일
부모 요소의 크기에 따라 변하므로 중첩될 경우 크기가 예상보다 커질 수 있음

rem (루트 요소 기준 상대 단위)

최상위 요소 <html>의 font-size를 기준으로 크기가 결정됨
em과 다르게 부모 요소의 영향을 받지 않음, 부모 요소와 상관없이 일관된 크기 유지 가능

% (비율 단위)

부모 요소의 크기에 따라 달라지는 비율 단위
반응형 디자인에서 많이 사용됨
요소의 크기가 부모 요소에 상대적
width, height, 글꼴 크기 등 다양한 속성에 사용 가능
반응형 레이아웃에 유용하지만, 부모 크기에 따라 예상과 다르게 적용될 수도 있음

vw, vh (뷰포트 단위)

1vw: 브라우저 너비의 1%
1vh: 브라우저 높이의 1%
화면 크기에 따라 유동적으로 변함
브라우저 창 크기에 따라 실시간으로 유동적인 값을 가지므로,
반응형 웹 디자인에서 매우 유용
- 화면 가로/세로 크기에 맞춰 자동 조절됨
- 헤더, 섹션 레이아웃 등에 자주 사용

단위 비교 요약

단위	기준	특징	사용 예
`px`	절대 크기	고정된 크기, 예측 가능	버튼, 테두리, 작은 UI 요소
`em`	부모 요소의 `font-size`	부모 크기에 따라 변함, 중첩 시 크기 증가 가능	버튼 내부 폰트, 패딩
`rem`	`<html>`의 `font-size`	부모 영향 없이 일관된 크기 유지	전체적인 폰트 크기 설정
`%`	부모 요소의 크기	반응형 디자인에 유용	박스 레이아웃, 너비 조절
`vw`/`vh`	브라우저 창	화면 비율 기반	풀스크린 섹션 등

CSS 우선 순위 (Specificity)

우선순위 계산 방식 (낮은 → 높은)

!important – 우선순위 계산을 무시하고 강제 적용
1000점 - 인라인 스타일 (style="")
100점 - ID 선택자 (#header)
10점 - 클래스 / 속성 / 가상 클래스 (.btn, [type="text"], :hover 등)
1점 - 태그 선택자 (div, p, h1 등)

우선순위	요소	비고
1	`!important`	최우선
2	선택자 특이성	점수로 비교
3	스타일 위치	인라인 > 내부 > 외부
4	선언 순서	나중 것이 우선