❓ 정의- 1차원인 flex와 달리 grid는 2차원 레이아웃 시스템으로, 웹 페이지의 요소를 행과 열 단위로 배치할 수 있도록 도와주는 CSS 기능- 부모 요소인 grid container와 자식 요소인 grid item으로 구성💠 사용법1️⃣ grid 선언- grid를 사용하기 위한 첫 번째 단계다. container에 grid를 선언해준다..container{ display:grid; }2️⃣ grid-template-columns와 grid-template-rows 선언- container에 grid를 선언한 후, grid-template-columns와 grid-template-rows 속성을 사용해 grid의 (열과 행)크기를 지정해준다.- grid-template-columns : c..

❓ 정의- Flexbox(Flexible Box)는 CSS의 1차원 레이아웃 방식으로, 컨테이너 내부의 아이템을 가로 또는 세로 방향으로 정렬하고 배치할 때 사용된다.- 반응형 웹 디자인에 필수적인 기능이며, float이나 position을 사용하지 않고도 쉽게 정렬을 조정할 수 있다.❗ 특징✅ 부모와 자식 태그가 필요하고, 부모 요소(flex-container)와 자식 요소(flex-item)에 적용하는 속성이 구분되어 있다!- 속성은  컨테이너의 직계자식까지만 영향을 준다는 특징이 있으니 주의해야 함!- flex-container의 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content 등- flex-item의 속성 : ..

반응형 웹을 구현할 때 가장 헷갈리는 것 중 하나가 적절한 단위 선택이다.%, vw/vh, rem/em은 각각 다른 기준점과 동작 방식을 가지고 있어서, 제대로 이해하지 못하고 사용하면 의도한 디자인과 완전히 다른 결과물이 나올 수 있다...!각 단위들의 특징과 실제 프로젝트에서 언제, 어떻게 활용하면 좋을지 정리해보고자 한다.✅ % (퍼센트) - 부모 요소 기준- 부모 요소의 크기를 기준으로 상대적인 크기를 설정🤔 언제 사용할까?  1️⃣ 컨테이너나 박스의 너비나 높이를 부모 요소에 비례하여 조정해야 할 때  2️⃣ 반응형 그리드 레이아웃을 구현할 때 (예: 12칼럼 그리드 시스템)  3️⃣ 다양한 화면 크기에서 일관된 비율을 유지해야 하는 요소들 .container { width: 80%; /* ..