dev_or_alive

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

✅ CSS 개요와 필요성CSS(Cascading Style Sheets)는 HTML 문서의 시각적 영역을 담당하는 스타일 시트 언어입니다.HTML이 구조를 정의한다면 CSS는 색상·여백·폰트·레이아웃 등 디자인 요소를 지정해 화면을 완성하는 역할을 합니다.콘텐츠와 스타일 분리: HTML 구조와 스타일 규칙을 분리해 유지보수성을 높인다.재사용성과 일관성: 하나의 스타일시트가 여러 페이지에 적용될수 있기 때문에 사이트 전반의 디자인을 통일할 수 있다.접근성 향상: 미디어쿼리를 통해 다양한 기기와 사용자 요구에 대응할 수 있다.✅ CSS 작성법 및 HTML과 연결 방법CSS를 적용하는 방법은 세 가지이며, 각 방법은 적용 범위와 우선순위에 차이가 있습니다.🔥 1. 인라인 스타일HTML 요소 내부에서 styl..