유효성 검사는 페이지가 웹 표준에 따라 제작되었는지 확인하기 위한 가장 간단한 방법이자 향후 웹 플랫폼을 통해 디자인한 대로 구현되도록 하기 위한 가장 신뢰할 수 있는 옵션입니다.
이 튜토리얼에서는 결과 패널과 관련 기능을 사용하여 워크플로우를 향상시키고 웹 사이트 유효성을 검사하는 방법을 살펴보겠습니다.
먼저 디자인 작업 영역으로 전환해보죠.
유효성 검사를 진행하기 위해 우선 사이트 보고서 패널을 열고 코드 상태에 대한 보고서를 수집하겠습니다.
윈도우 > 결과 > 사이트 보고서를 선택합니다.
사이트 보고서 패널에서 재생 버튼을 클릭하고 페이지 사이트 보고와 보고할 세부 정보에 대한 옵션을 선택합니다.
현재 문서를 선택한 다음 모든 HTML 보고서 옵션을 체크 표시하고 실행을 클릭합니다.
보고서에 몇 가지 문제가 있는데요.
몇 가지 단계를 통해 이러한 문제를 해결해보겠습니다.
Dreamweaver는 HTML 코드를 정리하는 데 사용할 수 있는 두 개의 유용한 명령을 제공합니다.
그럼 살펴보죠.
선택된 코드를 보면 div 태그가 비어 있고 중첩된 font 태그가 중복되어 있는데요.
HTML 정리 명령을 사용하여 이 문제를 해결할 수 있습니다.
명령 > HTML 정리를 선택합니다.
HTML 정리 대화 상자에서는 다양한 옵션이 제공됩니다.
비어 있는 태그를 자동으로 제거하거나 중첩된 font 태그를 결합할 수 있고 지저분하거나 읽을 수 없는 HTML 코드 문제를 해결할 수 있습니다.
처음 두 개의 옵션을 선택하고 확인을 누릅니다.
그러면 이 명령이 작업을 수행하고 요약 팝업 창이 표시됩니다.
다음으로 웹 글꼴 스크립트 태그가 글꼴을 올바르게 임베드하고 있는지 검사해 보죠.
단락 스타일을 보면 글꼴이 open-sans 웹 글꼴로 설정되어 있습니다.
그런데 HTML 페이지 상단에 있는 웹 글꼴 스크립트 태그를 살펴보면 open-sans 글꼴을 참조하지 않는데요.
이 문제를 해결하기 위해 웹 글꼴 스크립트 태그 정리 명령을 실행하겠습니다.
명령 > 웹 글꼴 스크립트 태그 정리를 선택하면 스크립트 태그가 올바른 상태로 업데이트되어 페이지의 CSS와 일치하게 됩니다.
다음으로 링크 확인기 패널을 사용하여 페이지에 있는 링크를 검사해보죠.
링크 확인기는 사이트에서 끊긴 링크, 외부 링크, 고립된 링크를 보고합니다.
윈도우 > 결과 > 링크 확인기를 선택하고 메뉴를 끊긴 링크로 설정한 다음 재생 버튼을 클릭하고 현재 문서에서 링크 확인 옵션을 선택하면 링크 확인기가 끊긴 링크를 보여줍니다.
이 문제를 해결한 다음 Enter를 눌러 코드 뷰를 업데이트합니다.
또한 외부 링크를 확인할 수 있고 필요에 따라 보고서를 다운로드할 수 있습니다.
W3C 유효성 검사 서비스를 통해 페이지의 유효성을 검사하여 프로세스를 완료해볼 텐데요.
그러면 누락된 사항을 확인하고 페이지가 브라우저에서 잘 표시되도록 표준을 준수하는지 확인할 수 있습니다.
파일 > 유효성 검사 > 현재 문서를 선택하면 유효성 검사를 위해 Dreamweaver에서 문서를 W3C 유효성 검사 서비스로 보낼 것이라는 팝업 창이 표시됩니다.
확인을 클릭하면 유효성 검사 패널에 결과가 나타나면서 오류 및 경고와 문제 해결을 위한 제안이 표시됩니다.
이 경우 주요 오류는 이메일 주소에서 닫는 anchor 태그가 누락되었다는 것인데요.
코드 뷰에서 이 문제를 해결해보죠.
여기에서 다시 유효성 검사 서비스를 실행하고 경고를 해결하거나 보고서를 다운로드하고 이동할 수 있습니다.
또한 HTML5 표준에 대한 유효성 검사를 수행하고 doctype을 변경하기 위해 유효성 검사 패널에서 설정을 선택하고 환경 설정에서 W3C 유효성 검사기를 편집합니다.
보시다시피 Dreamweaver CC에서 유효성 검사 툴을 사용하면 코드를 정리하거나 코드 문제를 해결하고 사이트가 웹에서 잘 구현되는지 확인할 수 있습니다.
지금까지 결과 패널을 확인하고 유효성 검사 기능을 통해 제작 워크플로우를 향상시키는 방법을 살펴보았습니다.
