목록% (1)

dev_or_alive

[CSS][길이 단위] %, vw, vh

웹 레이아웃을 유연하게 만들려면 고정값보다는 상대 단위를 적극적으로 활용해야합니다.이번 포스팅에서는 이전에 알아보았던 em, rem와 다른 상대 단위인 %, vw, vh에 대해서 간략하게 알아보겠습니다.✅ %🔥 정의상대단위중 하나인 %는 부모 요소의 너비와 높이를 100%로 삼아 상대적인 크기를 계산합니다.가로치수는 width를 참조하고, 세로치수는 height를 참조합니다.margin-, padding- 는 width를 기준으로 참조합니다🔥 기본 사용법/* 부모 폭의 80 % */.wrapper { width: 80%;}/* 부모 높이의 5 % */ .item { margin-top: 5%;}레이아웃이 부모 크기에 맞춰 자연스럽게 비레하여 늘어납니다.🔥 사용 권장 상황카드 그리드처럼 부모 컨테..
Web Programming/CSS 2025. 5. 19. 19:54
이전 Prev 1 Next 다음