HTML 유효성 검사
1. HTML 유효성 검사
- HTML 문서의 유효성 검사는 문서가 웹 표준에 부합하는지 확인하는 과정임
- 다양한 온라인 도구 or 브라우저의 내장 도구를 사용하여, 유효성 검사를 수행할 수 있음
2. 유효성 검사의 목적
- 크로스 브라우징 지원
- 모든 브라우저에서 일관된 방식으로 페이지를 표시하려면, 표준을 준수해야 함
- 웹 접근성
- 장애인 or 특정 기기를 사용하는 사용자에게 웹 페이지를 쉽게 이해하고 사용할 수 있도록 지원하기 위해 웹 접근성 표준을 준수
- SEO (검색 엔진 최적화)
- 검색 엔진은 웹 페이지를 크롤링하고 색인화할 때, 표준을 준수하는 페이지를 선호함
※ 크롤링 : 웹 페이지에서 정보를 추출하는 프로세스
3. 유효성 검사 방법
- HTML 문서의 유표성을 검사하는 방법은 다음과 같음
- W3C Markup Validation Service
- 브라우저 개발자 도구
- 커맨드 라인 도구
4. W3C Markup Validation Service
- W3C에서 제공하는 온라인 서비스
- HTML, XHTML, SMIL, MathML 등의 웹 문서 유형에 대한 유효성을 검사하는 도구
- 사용 방법
- #1. 브라우저에서 W3C Markup Validation Service 웹사이트에 접속
- #2. 유효성을 검사하려는 HTML 문서를 업로드하거나, 문서가 온라인 상에 공개되어 있다면, 해당 문서의 URL을 입력
- test.html 파일 안에 다음과 같이 입력 후, 업로드
<!-- 다음과 같이 입력 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 유효성 검사를 위해 오류 코드를 작성함 -->
<div class="box"></div></div>
</body>
</html>
- #3. 'Check' or 'Validate' 버튼을 클릭하여, 검사 시작
- #4. 검사 결과 확인
- 다음과 같이 오류가 발생하였고, 오류 내용을 표시해줌
- 오류가 없을 시, 다음과 같이 표시됨
5. 브라우저 개발자 도구
- 웹 페이지를 디버깅하고 분석하며, 웹 애플리케이션을 개발 및 테스트 하는 데 도움을 주는 도구 모음
- 사용자는 웹 페이지의 HTML, CSS, JavaScript 등의 코드를 검사 및 수정 가능
- 웹 브라우저에서 F12 키를 누르거나 우클릭하여 검사 or 요소 검사와 같은 메뉴를 선택하여 열람 가능
- Chrome, Firefox, Safari 같이 주로 모든 주요 웹 브라우저에서 제공
- 브라우저 개발자 도구에는 다음과 같은 주요 기능이 포함
| 기능 | 설명 |
| 요소 검사 (Element Inspection) |
- 웹 페이지의 HTML 및 CSS를 검사 및 편집 가능한 도구 - 웹 페이지에서 특정 요소를 선택하고, 해당 요소의 스타일 및 속성을 확인 및 변경 가능 |
| 콘솔 (Console) |
- JavaScript 코드를 실행하고 디버깅할 수 있는 콘솔 창이 제공 - 개발자는 여기에서 변수를 확인하고, 오류를 식별하여, 코드 테스트 및 디버깅 가능 |
| 네트워크 모니터링 (Network Monitoring) |
- 웹 페이지의 네트워크 요청 및 응답을 모니터링하고 분석할 수 있음 - HTTP 요청 및 응답 헤더, 본문 등을 확인할 수 있음 |
| 소스 코드 디버깅 (Debugging) |
- JavaScript 코드를 디버깅하고 중단점을 설정하여, 코드의 실행을 일시 중지할 수 있음 - 변수의 값을 확인하고 스텝 인/아웃/오버 등의 디버깅 작업 수행 가능 |
| 성능 분석 (Performance Analysis) |
- 웹 페이지의 성능을 분석하고 최적화할 수 있는 도구가 포함되어 있음 - 로딩 시간, 자원 사용 등 확인 가능 |
| 응용 프로그램 저장소 (Application Storage) |
- 쿠키, 로컬 스토리지 등과 같은 웹 애플리케이션의 로컬 저장소를 검사하고 관리할 수 있는 도구 |
| 디바이스 모드 (Device Mode) |
- 다양한 디바이스 및 화면 크기에서 웹 페이지를 시뮬레이션하고 테스트할 수 있는 기능이 제공 |
| 보안 (Security) |
- 웹 페이지의 보안 상태를 확인하고, 보안 문제를 식별하는 데 도움이 되는 도구가 포함되어 있음 |
6. 커맨드 라인 도구
- 명령 줄에서 'html5validator'와 같이 HTML 문서의 유효성을 검사하는 도구
'Front-End Study > HTML+CSS' 카테고리의 다른 글
| HTML 규약 및 관례 (0) | 2023.10.28 |
|---|---|
| HTML SEO(검색 엔진 최적화) 기본사항 (1) | 2023.10.21 |
| NHN CSS 컨벤션 (0) | 2023.10.12 |
| role 속성 (0) | 2023.09.25 |
| CSS 기술 순서 (0) | 2023.06.26 |