1. styles.css 열기

06편 색·배경 규칙 아래에 이어서 작성합니다.

2. 섹션 사이 여백을 margin-top으로 통일

/* web-practice/portfolio/css/styles.css */
/* ...03~06편 리셋·타이포그래피·색 유지... */
 
.about,
.skills,
.career,
.contact-form,
.faq {
  margin-top: var(--space-16);
}
 
.site-header + * {
  margin-top: 0;
}

.site-header + *는 헤더 바로 다음 요소(주로 .hero)의 margin-top을 0으로 눌러, 헤더와 히어로 사이에 이중 여백이 생기지 않게 합니다.

3. 카드 내부 padding 정리

.project-card {
  padding: var(--space-4);
  border-radius: var(--radius);
}
 
.project-card > * + * {
  margin-top: var(--space-2);
}

.project-card > * + *는 카드 안에서 첫 번째 자식을 제외한 나머지 요소에만 margin-top을 줘, 카드 맨 위에 불필요한 여백이 생기지 않게 하는 패턴입니다.

4. 카드 사이 마진 상쇄 확인하고 회피

카드를 아직 Grid로 배치하기 전(11편 이전)에는 .project-card가 세로로 쌓입니다. 이때 위아래 카드의 margin을 각각 지정하면 상쇄가 일어나 간격이 예상보다 좁아 보일 수 있습니다.

.project-card {
  margin-top: var(--space-6);
}
 
.project-card:first-child {
  margin-top: 0;
}

카드 양쪽에 margin을 다 주는 대신 margin-top 한쪽만 쓰고 첫 카드만 예외 처리하면, 11편에서 gap으로 전환할 때도 규칙을 그대로 지우기만 하면 됩니다.

5. 실행

파일을 저장하고 index.html·projects.html을 브라우저로 새로고침합니다.

6. 확인

• 헤더와 히어로 사이에 빈 틈이 생기지 않습니다(이중 여백 없음).
• index.html의 소개·기술 스택·경력 섹션 사이 간격이 모두 동일하게 --space-16(4rem)만큼 벌어집니다.
• 프로젝트 카드 안에서 썸네일과 제목, 제목과 설명 사이에 --space-2만큼의 여백이 보입니다.
• 개발자 도구에서 .project-card를 선택하면 Computed 패널의 박스 모델 다이어그램에 padding·border·margin 값이 지정한 대로 표시됩니다.