CSS 레이아웃 & 반응형

1주차 미션에서는 HTML과 CSS를 사용해 하나의 자기소개 카드를 구조화하고 스타일링하는 데 집중했습니다.

이번 미션에서는 그 카드를 여러 개로 확장해, 아기 사자 명단을 한 눈에 살펴볼 수 있는 메인 대시보드 화면을 만들어 봅니다. 화면 상단에는 여러 명의 자기소개 요약 카드가 목록 형태로 배치되며, 화면 크기에 따라 카드의 개수와 정렬 방식이 자연스럽게 바뀌도록 반응형 레이아웃을 적용합니다.

화면 하단에는 각 부원의 상세 자기소개 정보가 읽기 좋은 흐름으로 정리되어 표시됩니다. 이 과정에서 반복되는 카드 UI를 효율적으로 배치하는 방법을 익히고, 화면 크기 변화에도 전체 구조가 무너지지 않도록 CSS로 레이아웃을 안정적으로 설계하는 경험을 하게 됩니다.

또한 카드 내부의 일부 요소를 강조하거나 겹쳐 배치하는 표현을 추가하면서, 같은 요소에 여러 스타일이 적용될 때 우선순위를 조절해 원하는 결과를 만들어 내는 방법도 함께 다룹니다.