1. 마크업 확인

index.html(다른 두 페이지도 동일)의 헤더 구조는 다음과 같습니다(마크업은 수정하지 않고 확인만 합니다).

<!-- web-practice/portfolio/index.html (헤더 부분 발췌, 수정하지 않음) -->
<header class="site-header">
  <a class="logo" href="index.html">Zeno Kim</a>
  <nav class="site-nav">
    <a href="index.html" aria-current="page">소개</a>
    <a href="projects.html">프로젝트</a>
    <a href="contact.html">연락</a>
  </nav>
</header>

<nav class="site-nav"> 안에는 <ul>·<li> 없이 <a> 3개가 바로 들어 있습니다. flex container로 만들 대상은 이 <a>들의 직계 부모인 .site-nav 자체입니다.

2. styles.css 열기

07편 여백 규칙 아래에 이어서 작성합니다.

3. .site-nav를 flex container로 전환

/* web-practice/portfolio/css/styles.css */
/* ...03~07편 리셋·타이포그래피·색·여백 유지... */
 
.site-nav {
  display: flex;
  gap: var(--space-6);
}
 
.site-nav a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}
 
.site-nav a[aria-current='page'] {
  color: var(--color-primary);
  font-weight: 700;
}

.site-nav의 자식이 <a>뿐이므로 flex container도 .site-nav 자체에 지정합니다(<ul>이 없으니 list-style 제거는 필요 없습니다). aria-current="page"는 마크업에 이미 있는 접근성 속성으로, 현재 페이지 링크를 시각적으로도 구분하는 데 그대로 활용합니다.

4. 헤더 전체를 가로 배치로 정리

.site-header 자체도 로고와 내비를 양 끝으로 배치해야 합니다.

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  height: var(--header-height);
}

justify-content: space-between은 첫 item(로고)과 마지막 item(내비)을 양 끝에 붙이고 그 사이 공간을 균등하게 벌립니다. align-items: center는 로고와 내비 항목의 세로 중앙을 맞춥니다.

5. 실행

파일을 저장하고 세 페이지를 모두 브라우저로 새로고침합니다.

6. 확인

• 로고 “Zeno Kim”이 왼쪽, 내비 메뉴 3개(소개·프로젝트·연락)가 오른쪽에 가로로 나란히 보입니다.
• 메뉴 항목 사이 간격이 --space-6(1.5rem)만큼 일정합니다.
• 현재 열려 있는 페이지의 메뉴 링크만 파란색(--color-primary)과 굵은 글씨로 구분됩니다.
• 개발자 도구에서 .site-nav를 선택하면 Layout 탭(Chrome 기준)에 파란 flex 배지가 표시되고, 자식 <a> 3개에 노란 flex item 표시가 뜹니다.