W3C 마크업 검사기
W3C 마크업 유효성 검사 서비스로 HTML 오류 찾고 수정하기
W3C 마크업 검사기은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
검사기가 확인하는 것
W3C 마크업 검사기(validator.w3.org)는 공식 명세에 맞춰 HTML을 구문 분석하고 모든 명세 위반을 보고합니다. 닫히지 않은 태그, 잘못된 중첩(한 <p> 안에 또 다른 <p>가 있는 경우), 필수 속성 누락(alt가 없는 이미지 요소), 인식할 수 없는 요소와 그 밖의 많은 문제를 확인합니다.
검사가 중요한 이유
유효하지 않은 HTML도 오늘날 모든 브라우저에서 표시될 수 있지만, 브라우저마다 복구 방식이 다를 수 있습니다. Chrome에서 정상적으로 보이는 것이 Firefox에서는 깨질 수 있습니다. 유효한 HTML은 예측 가능하고 일관된 렌더링을 만들며, 화면 낭독기, 검색 크롤러 및 이메일 클라이언트에서 예기치 않은 동작이 발생하는 것을 방지합니다.
제출하는 세 가지 방법
주소로 제출하거나(페이지 주소를 붙여넣기), 파일을 업로드하거나, 직접 입력할 수 있습니다(HTML을 붙여넣기). 운영 중인 페이지에는 주소 제출이 가장 좋고, 개발 중인 파일이 아직 어디에도 공개되지 않았을 때는 직접 입력이 유용합니다.
결과 읽기
오류에는 줄 번호, 문제가 있는 마크업의 일부, 설명이 표시됩니다. 위에서부터 수정하세요. 많은 오류가 앞선 하나의 실수로 인해 연쇄적으로 발생합니다. 처음 몇 개를 수정한 후 다시 실행하여 남은 경고 중 실제로 타당한 것이 몇 개인지 확인하세요.
경고와 오류
오류는 렌더링을 중단시킬 수 있는 명세 위반입니다. 경고는 기술적으로는 유효하지만 의도하지 않았을 가능성이 높은 의심스러운 패턴입니다(오타로 의심되는 속성 이름, 접근성 관련 단서 등). 오류는 반드시 수정하고, 경고는 조사할 가치가 있는 항목으로 다루세요.
일반적인 오류
img 요소의 alt 누락. 자체 닫힘 태그가 닫히지 않음 (`<br>`; 기존 방식인 `<br/>`도 유효함). 페이지에서 id가 중복됨. input의 id와 일치하는 for 속성이 없는 폼 레이블. 중첩된 대화형 요소(a 안에 있는 button). 이 다섯 가지가 검사기 출력의 대부분을 차지합니다.
템플릿 검증
HTML이 템플릿으로 생성된다면 템플릿 소스가 아니라 최종 출력(렌더링된 페이지)을 검증하십시오. `{{ }}` 플레이스홀더는 유효한 HTML이 아니며, 중요한 것은 엔진이 생성하는 결과뿐입니다. 테스트 빌드에서 렌더링된 페이지를 대상으로 지속적 통합 환경에서 검사기를 실행하십시오.
html-validate CLI
지속적 통합에 연동하려면 html-validate npm 패키지를 사용하십시오. npx html-validate "public/**/*.html"은 빌드의 모든 페이지를 검증합니다. 규칙은 .htmlvalidate.json에서 구성하십시오. 이를 사용하면 검증 회귀가 발생할 때 빌드가 실패하도록 할 수 있습니다.
소스 단계의 Stylelint 및 린팅
작성 시점의 린팅(CSS에는 stylelint, React에는 eslint-plugin-jsx-a11y 사용)은 많은 문제를 검사기에 도달하기 전에 찾아냅니다. 지속적 통합에서 종단 간 검증과 결합하여 여러 겹의 방어를 구성하십시오. 대부분의 문제는 일찍 발견하고, 나머지는 배포 전에 찾아내는 방식입니다.
검증이 포착하지 못하는 항목 NOT
검증은 의미론이 아니라 마크업의 정확성을 확인합니다. 모든 제목을 <h6>으로 작성한 페이지는 유효한 HTML이지만 의미론은 잘못되었습니다. Lighthouse 접근성 감사와 수동 검토를 통해 검사기가 포착하지 못하는 의미론적 문제를 찾아낼 수 있습니다.
Quirks Mode 경고
<!doctype html>이 누락되면 Quirks Mode가 활성화됩니다. 브라우저는 최신 CSS를 깨뜨리는 레거시 호환성 계층을 사용합니다. 검사기는 doctype 누락을 첫 번째 오류로 표시하므로 doctype 선언 없이 페이지를 배포하지 마십시오.
지속적 검증
GitHub Actions를 통해 모든 PR에서 검증을 실행하십시오. html-validate를 설치하고 빌드된 사이트를 대상으로 실행한 다음, 오류가 있으면 PR을 실패 처리하십시오. 새 오류를 수개월 동안 누적되어 나중에 수정하기 어려워지기 전에 검토 시점에 발견할 수 있습니다.
지식 확인
W3C 검사기에서 <!doctype html> 선언 누락을 그토록 중요하게 여기는 이유는 무엇입니까?
요약
W3C 마크업 검사기는 명세에 따라 HTML을 분석하고 유효하지 않은 마크업을 보고합니다. 일회성 검사는 웹 UI로, 지속적인 검사는 지속적 통합 환경의 html-validate CLI로 실행하십시오. 일반적인 문제로는 alt 누락, id 중복, doctype 누락, 중첩된 대화형 요소가 있습니다. 검증은 마크업 오류를 찾아내므로, 의미론과 접근성 품질을 확인하려면 Lighthouse 및 수동 검토와 함께 사용하십시오.
자주 묻는 질문
“W3C 마크업 검사기” 강의는 무료인가요?
네 — “W3C 마크업 검사기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“W3C 마크업 검사기”에서 뭘 배우나요?
W3C 마크업 유효성 검사 서비스로 HTML 오류 찾고 수정하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“W3C 마크업 검사기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.