이번 편의 결과물: 3페이지 포트폴리오가 완료 기준 5가지를 모두 통과한 상태로 커밋할 준비가 끝난다. · 다루는 개념: 완료 기준 자가 점검, 구조·접근성·유효성 재확인
이 편에서 만드는 파일
web-practice/portfolio/
├ index.html (변경 없음 — 점검만)
├ projects.html (변경 없음 — 점검만)
└ contact.html (변경 없음 — 점검만)개념 정리
새 개념은 없다. 01_학습방향.md가 정한 완료 기준 다섯 가지를 순서대로 다시 확인하는 편이다. 지금까지 03편부터 15편까지 조각조각 만든 것을 한 번에 훑어 CSS 없이도 완성된 상태임을 스스로 증명한다.
| 번호 | 완료 기준 | 담당 편 |
|---|---|---|
| 1 | 세 페이지가 CSS 없이도 시맨틱 요소만으로 구조화되어 있다 | 03, 09 |
| 2 | contact.html 폼이 label의 for와 입력의 id, name/value로 정확히 연결되어 제출 데이터를 예측할 수 있다 | 10, 11, 12 |
| 3 | index.html의 표가 caption·thead/tbody/tfoot·th scope로 구성되어 있다 | 07 |
| 4 | 모든 이미지가 장식용/정보성을 판단해 적절한 alt를 채우고 있다 | 06, 14 |
| 5 | Nu HTML Checker에서 세 페이지 모두 오류 0건이다 | 15 |
실습
1. 기준 1 — 시맨틱 구조 확인
세 파일을 열어 각 페이지의 최상위 구조가 header(로고+nav) → main → footer(SNS nav)인지 확인한다.
index.html: header → main(hero, about, skills, career) → footer
projects.html: header → main(h1, p, project-grid) → footer
contact.html: header → main(h1, p, form, 연락처 섹션) → footerdiv로만 감싼 곳이 있으면 목적에 맞는 시맨틱 요소로 바꿀 자리인지 다시 판단한다.
2. 기준 2 — 폼 데이터 흐름 재확인
contact.html을 브라우저에서 열고 각 필드에 값을 채운 뒤 제출한다. 12편에서 확인했던 대로 요청에 담기는 문자열을 다시 예측해 본다.
name=김제노&email=zeno%40example.com&inquiryType=collab&message=...&agree=on&로 필드가 구분되고 공백은 + 또는 %20으로 인코딩되는지 확인한다.
3. 기준 3 — 표 구조 확인
index.html의 경력 표를 열어 다음이 모두 있는지 확인한다.
<table>
<caption>...</caption>
<thead><tr><th scope="col">...</th></tr></thead>
<tbody><tr><th scope="row">...</th><td>...</td></tr></tbody>
</table>4. 기준 4 — alt 전수 점검
세 파일에서 img 태그를 모두 찾아 alt 값이 “이미지”·“사진” 같은 무의미한 문구가 아닌지 하나씩 확인한다.
index.html: profile.svg → "Zeno Kim의 프로필 사진"
projects.html: project-01~06.svg → 각 프로젝트 화면을 설명하는 문구 6개5. 기준 5 — 최종 검증
세 파일을 다시 한 번 Nu HTML Checker에 올려 “No errors or warnings to show.”를 확인한다.
6. 확인
- 다섯 기준을 모두 통과했다
git status로 변경된 세 파일이 커밋 대기 상태인 것을 확인한다(실제 커밋은 학습자 재량)- 브라우저에서 세 페이지를 CSS 없이 봤을 때도 제목·문단·표·폼이 순서대로 읽혀 무엇을 하는 페이지인지 알 수 있다
직접 해보기
브라우저 확장 프로그램이나 개발자 도구의 “접근성 트리” 패널로 contact.html을 열어, 폼 필드마다 스크린 리더가 읽어줄 이름(accessible name)이 레이블 문구와 정확히 일치하는지 확인해 보자.
정답 보기
접근성 트리에서 각 입력의 이름이 “이름”·“이메일”·“문의 유형”·“메시지”·“개인정보 수집·이용에 동의합니다.”로 나오면 정상이다. 빈 문자열이거나 “textbox”처럼 역할만 나오면 label의 for/id 연결이 빠진 것이다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| 점검할 때마다 새로운 오류가 발견된다 | 편별로 만들 때는 통과했지만 이후 편에서 구조를 고치며 깨짐 | 15편처럼 세 파일 전체를 다시 검증기에 돌린다 |
| CSS 없이 보면 뭔가 부족해 보인다 | 스타일링과 구조를 혼동함 | 이 편의 점검 대상은 구조·접근성·유효성이지 시각적 완성도가 아니다 |
| 커밋 전에 스타터 zip의 이미지 경로가 깨져 있다 | 파일 이동·이름 변경 후 경로 미수정 | img src 값과 실제 images/ 폴더 파일명을 다시 대조한다 |