반응형 프로젝트 그리드
C 없는 CSS: Grid로 만드는 레이아웃
훌륭한 포트폴리오에는 작업물을 깔끔하게 보여줄 방법이 필요합니다. 가장 고전적인 패턴은 프로젝트 카드 그리드입니다 — 화면 크기가 바뀌면 자동으로 재배치되는 정돈된 행과 열이죠.
예전에는 float와 clearfix와 씨름해야 했습니다. 요즘은? 원하는 것을 설명하기만 하면 됩니다 — "간격이 있는 3개의 균등한 열" — 나머지는 Tailwind의 grid 유틸리티가 처리합니다. CSS 파일도 필요 없습니다.
이 레슨에서는 반응형 프로젝트 그리드를 만듭니다: 제목 하나, 그리고 카드 3장을 담은 grid 컨테이너. 레슨이 끝나면 앞으로 계속 쓰게 될 세 가지 도구인 grid, grid-cols-3, gap을 이해하게 됩니다.
안내
방문자가 무엇을 보고 있는지 알 수 있도록 그리드 위에 h2 섹션 제목을 추가하세요.
힌트: 이렇게 사용하세요: `<h2 class="text-3xl font-bold mb-8 text-center">주요 프로젝트</h2>`
어디에 작성하나요?
<!-- 여기에 프로젝트 그리드를 만들어 보세요 -->12번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.
카드 사이에 gap이 있는 grid 컨테이너 div를 만드세요.
중간 크기 이상의 화면에서 그리드가 3개의 균등한 열로 표시되도록 만드세요.
제목과 설명이 있는 article 요소로 그리드 안에 프로젝트 카드를 최소 1개 추가하세요.
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: 방문자가 무엇을 보고 있는지 알 수 있도록 그리드 위에 h2 섹션 제목을 추가하세요.