이 편에서 만드는 파일

web-practice/portfolio/
└── css/
    └── styles.css   ~ (.project-grid, img, .project-card 반응형 규칙 추가)

11~12편에서 만든 .project-grid·.project-card는 지금 데스크톱 3열 기준으로만 되어 있습니다. 이 편에서 모바일·태블릿 구간을 채웁니다.

개념 정리

13편에서 배운 모바일 우선 방식을 그대로 씁니다. 그리드는 기본을 1열로 두고, min-width 조건이 붙을 때마다 열 수를 늘립니다.

타이포그래피는 05편에서 이미 h1(--text-3xl)과 .hero h1의 모바일 축소(max-width: 767px에서 --text-2xl)를 정해 뒀으므로 이 편에서 다시 건드리지 않습니다. 이 편은 카드 제목(.project-card h2) 하나만 좁은 화면에서 한 단계 낮춥니다.

이미지 반응형 처리는 한 줄이면 충분합니다.

img {
  max-width: 100%;
  height: auto;
  display: block;
}

max-width: 100%는 이미지가 부모 요소보다 커지지 않게 막고, height: auto는 가로세로 비율을 유지합니다. .project-card img처럼 비율을 고정하고 싶은 이미지는 aspect-ratio 대신(이 과목 범위 밖) object-fit: cover와 고정 높이를 함께 씁니다.

흔한 오해: 그리드 열 수를 미디어 쿼리마다 새로 쓰면 gap 같은 공통 값을 중복 선언하기 쉽습니다. 공통 값은 기본 규칙에 한 번만 쓰고, 미디어 쿼리 안에는 바뀌는 값만 씁니다.

실습

/* web-practice/portfolio/css/styles.css */
 
/* ...기존 리셋·토큰·헤더·내비 규칙 유지... */
 
img {
  max-width: 100%;
  height: auto;
  display: block;
}
 
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
 
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
 
.project-card img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}
 
.project-card p {
  font-size: var(--text-sm);
}
 
@media (max-width: 767px) {
  .project-card h2 {
    font-size: var(--text-base);
  }
}
 
@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
@media (min-width: 1024px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

직접 해보기

1. 카드 3열 사이 gap을 데스크톱에서만 var(--space-8)로 넓혀 봅니다.
2. 카드 설명(.project-card p)의 줄 수를 2줄로 제한하는 방법을 찾아 적용해 봅니다(힌트: -webkit-line-clamp는 이 과목 범위 밖이므로, 대신 max-height와 overflow: hidden으로 근사치를 만들어 봅니다).

@media (min-width: 1024px) {
  .project-grid {
    gap: var(--space-8);
  }
}
 
.project-card p {
  max-height: calc(var(--text-sm) * var(--leading) * 2);
  overflow: hidden;
}

자주 하는 실수

확인 문제

참고 자료

• MDN — CSS media queries