비율에 기반한 크기 조절
- em을 이용해 상대적인 크기의 폰트를 적용할 때처럼, 레이아웃에도 비율에 기반한 개념을 적용할 수 있음.
- 부모 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식임.
- 상대적이고 비례적인 단위는 : %
- % 단위는 백분율 값을 나타냄. 보통 부모 요소와의 상대적 크기를 지정할 때 사용.
- 너비와 높이, 여백 뿐 아니라 글자 크기에도 사용할 수 있음.
- 예시) 부모 요소의 글자 크기가 100% 일 때.. font-size:50%;
- 예시) 부모 요소의 높이가 100% 일 때.. height:50%;
- 예시) 부모 요소의 너비가 100% 일 때.. width:50%; margin:50%; padding:50%;
- 너비와 여백은 부모 요소의 너비에 비례해 계산됨.