유효성 검사는 CSS2.1 또는 CSS3 사양에 대해 CSS 코드를 확인하는 것을 말합니다. 따라서 오류가 없는 올바른 코드를 유효한 코드라고 하고 사양을 충족하지 않는 코드를 잘못된 코드라고 합니다. 코드를 확인하는 가장 편리한 방법은 http://jigsaw.w3.org/css-validator/ 사이트를 통해 문서의 주소를 지정하거나 파일을 업로드하거나 입력된 텍스트를 확인할 수 있는 이 서비스를 사용하는 것입니다. 이 서비스의 큰 장점은 러시아어와 우크라이나어를 지원한다는 것입니다.
URI 확인
이 탭을 사용하면 인터넷에서 호스팅되는 페이지의 주소를 지정할 수 있습니다. http:// 프로토콜은 생략할 수 있으며 자동으로 추가됩니다(그림 20.1).
쌀. 20.1. 주소로 문서 확인
주소를 입력한 후 "확인" 버튼을 클릭하면 "축하합니다! 오류가 발견되지 않았습니다." 성공하면 "불행히도 발견했습니다. 다음 오류» 잘못된 코드의 경우. 오류 또는 경고 메시지에는 행 번호, 선택기 및 오류 설명이 포함됩니다.
업로드된 파일 확인
이 탭에서는 HTML 또는 CSS 파일을 로드하고 오류를 확인할 수 있습니다(그림 20.2).
쌀. 20.2. 업로드 시 파일 확인
서비스는 파일 유형을 자동으로 인식하고 HTML 문서가 지정된 경우 유효성 검사를 위해 해당 문서에서 스타일을 추출합니다.
입력한 텍스트 확인
마지막 탭은 HTML 또는 CSS 코드를 직접 입력하기 위한 것으로 스타일만 검증된다(그림 20-3).
쌀. 20.3. 입력한 코드 확인
이 옵션은 코드에 대한 다양한 실험을 수행하거나 빠른 확인작은 조각.
CSS 버전 선택
CSS3에는 다음과 비교하여 많은 새로운 스타일 속성이 있습니다. 이전 버전, 따라서 버전을 고려하여 코드를 확인해야 합니다. 기본적으로 CSS3가 서비스에 지정되어 있으므로 코드에서 CSS2.1을 준수하는지 확인하려면 이를 명시적으로 지정해야 합니다. 이렇게 하려면 텍스트를 클릭하십시오. 추가 기능"그리고 열리는 블록의 "프로필" 목록에서 CSS2.1을 선택합니다(그림 20.4).
쌀. 20.4. 확인할 CSS 버전 지정
사이트를 만들고 필요한 모든 것을 채운 후 사이트에 오류가 있는지 확인해야 합니다. html 및 css에서 철자 오류를 찾기 위해 W3 유효성 검사기가 도와줄 것입니다. World Wide Web Consortium, 번역: World Wide Web Consortium. 모든 오류를 찾고 오류가 있는 위치를 표시하며 제거 옵션을 제공합니다.
W3C Validator로 코드를 수정하는 이유
사실 이것의 장점은 많지 않고 모두 조건부이지만 불행히도 각 사이트에는 최소한의 오류가 있어야 하고 이상적으로는 오류가 없어야 합니다. 필요한지 여부를 결정하려면 다음과 같은 이점이 있습니다.
- 페이지 로드 속도가 빨라지지만 조금은 눈에 띄지 않을 것입니다.
- 사이트는 모든 브라우저에서 동일하게 표시됩니다.
- 디렉토리에 사이트를 추가할 때 html 및 css 작성 능력에 주의하십시오.
장점이 많지는 않지만 수정 HTML 및 CSS 오류 W3C 유효성 검사기를 사용하는 것은 그만한 가치가 있습니다!
Validator로 오류를 수정하는 방법
유효성 검사기로 오류를 수정하는 원리는 복잡하지 않고 누구나 처리할 수 있습니다! 우리는 링크를 따라갑니다. 영어를 이해하기 어려운 경우 번역기를 사용하거나 사용하는 것이 좋습니다. 이것, 러시아어로 오류 유형을 표시합니다. 검증인에 의한 수정의 예를 고려하십시오.
1. 사이트 이름 전체를 입력합니다. 
2. 목록에서 우리는 어디에서 어떤 종류의 오류와 수정이 필요한지 살펴보기 시작합니다. 
사진에서 볼 수 있듯이 내 실수는 링크에 있습니다. 공유 버튼 플러그인에서 이 문제를 찾았습니다. 종종 오류를 찾기 위해 모든 파일을 파헤쳐야 합니다.
3. 오류가 발견된 행에 요소를 추가하고 유효성 검사기로 다시 확인합니다.
버그가 수정되면 좋은 것입니다. 그렇지 않다면 더 지켜봐야 할 것입니다.
웹 코드의 유효성을 확인하는 것은 W3C 표준 및 인증에 대해 확인하는 것입니다.
W3C(컨소시엄 월드 와이드 웹)는 코드 작성을 위한 표준과 규칙을 개발하는 웹의 기술 입법자입니다. W3C 인증 및 표준은 웹에서 일하는 모든 사람에게 필수입니다. 모든 네트워크 응용 프로그램이 단일 언어 공간에서 표준 언어로 통신하고 웹 문서를 작업하는 동안 서로를 이해하려면 코드 철자의 통일된 표준이 필요합니다.
W3C는 웹 표준을 만들 뿐만 아니라 그 구현을 적극적으로 촉진합니다.
W3C는 HTML/XHTML 및 CSS 코드를 검증하기 위한 온라인 서비스를 제공합니다.
W3C 유효성 검사기를 사용하여 W3C 표준에 대해 코드를 확인하는 것이 가장 좋은 방법입니다.
코드의 유효성을 확인하기 위한 W3C의 무료 온라인 서비스.
W3C 검증인은 직관적인 명확한 인터페이스. 그들과 함께 일하는 것은 쉽고 간단합니다.
서비스를 통해 세 가지 모드를 확인할 수 있으므로 세 가지 버튼만 있습니다.
URL 확인
(확인을 위해 웹에서 사용할 수 있는 사이트의 모든 페이지 주소를 지정해야 합니다.)
업로드된 파일 확인
(확인을 위해 확인 중인 파일의 경로를 지정해야 함)
입력한 텍스트 확인
(확인을 위해서는 확인하고자 하는 코드를 복사하여 Validator 창에 붙여넣어야 함)
마지막 두 가지 방법은 로컬 컴퓨터에 있는 웹 문서나 텍스트를 확인할 때 특히 유용합니다. 이들은 웹 페이지이거나 웹에서 이미 다운로드하여 로컬 컴퓨터, 또는 에 위치한 엔진에 의해 생성 로컬 서버, "덴버"처럼. 덴버의 경우 브라우저를 통해 페이지를 확장자가 .html인 파일로 저장한 후 별도의 파일로 확인하거나 복사해야 합니다. 원천브라우저에서 직접 웹 페이지를 열고 텍스트를 입력한 방법을 확인합니다.
W3C 온라인 유효성 검사기를 사용하는 방법.
검증인에게 다음 주소로 연락하십시오.
(http://validator.w3.org/ - HTML 또는 XHTML 유효성 검사
http://jigsaw.w3.org/css-validator/ - CSS 유효성 검사용)
열리는 유효성 검사기 창에서 세 가지 확인 방법 중 하나를 선택합니다.
(웹 페이지 URL, 로컬 파일 또는 입력된 텍스트)
해당 탭으로 이동
검증 대상 지정
(확인한 웹페이지의 url-address를 입력하고,
또는 로컬 컴퓨터의 파일 경로,
또는 검사할 코드를 각각 붙여넣기)
"확인" 버튼을 클릭하고 확인 결과를 봅니다.
W3C의 서비스는 코드의 유효성을 검사하고 오류가 있으면 즉시 지적합니다. 각 오류는 주석 처리됩니다. 불행히도 댓글은 영어로 되어 있습니다. 따라서 Google 번역이 도움이 됩니다. 필요한 경우 코드를 수정하고 준수 여부를 다시 확인하는 것만 남아 있습니다.
W3C 유효성 검사기는 완전 무료이며 자동화되어 있습니다. 따라서 오랜 시간 동안 실수에 대한 작업으로 처벌을받지 않고 망치질 수 있습니다. 이를 위해 이러한 서비스가 생성됩니다.
W3C 유효성 검사기의 일반적인 대안입니다.
웹 코드를 확인하는 W3C 온라인 서버 외에도 매우 좋은 결과브라우저에 HTML 유효성 검사기 확장을 제공합니다. 모질라 파이어 폭스. 브라우저에 이러한 추가 기능이 있으면 웹 마스터의 작업이 용이해지고 Mozilla Firefox가 "방향타" 브라우저임을 다시 한 번 증명합니다.
여기에서 mazilka 확장을 다운로드할 수 있습니다. http://users.skynet.be/mgueury/mozilla/
다음과 같이 확장 프로그램을 설치할 수 있습니다.
- 파이어폭스를 실행합니다.
다음: 메뉴 - 도구 - 추가 기능 - 확장 프로그램.
그리고 다운로드한 파일(xpi 확장자)을 열리는 창으로 끌어다 놓기만 하면 됩니다.
그 후에 확장 프로그램이 자동으로 설치됩니다.
또는 (두 번째 방법):
- 파이어폭스를 실행합니다.
다음: 메뉴 - 파일 - 파일 열기 - 다운로드한 파일의 경로를 지정합니다.
그런 다음 확장 프로그램이 다시 자동으로 설치됩니다.
설치가 완료되면 브라우저를 다시 시작해야 합니다.
다시 시작하면 웹 페이지를 확인하는 방법을 선택할 수 있는 창이 나타납니다.
"HTML Tidy" 또는 "SGML 파서" 또는 "직렬"
가장 편리하고 수용 가능한 옵션으로 "SGML Parser" 방법을 선택합니다. 해당 버튼을 누르면 이제 브라우저 창에 추가 기능의 바로 가기 아이콘이 표시되고 그 옆에는 추가 기능 설정 메뉴 버튼이 표시됩니다.
나는 - 위와 오른쪽에 있습니다.
HTML 유효성 검사기 모질라 브라우저 Firefox는 다음에서 완전히 실행됩니다. 자동 모드. 그는 무엇을 확인할 필요가 없습니다. Mozilla Firefox에서 열릴 모든 문서를 확인합니다. 그것은 매우 편안합니다. 열려 있는 문서에 문제가 있는지 없는지 알기 위해서는 프로그램의 바로가기 색만 봐도 충분하다.
확인 결과에 따라 아이콘의 색상은 녹색, 노란색 또는 빨간색이 될 수 있으며 이는 다음을 의미합니다.
녹색 - "오류 없음", 모든 것이 "정상"
노란색 - "오류는 없지만 경고가 있습니다"
빨간색 - "오류가 있습니다"
바로 가기를 클릭하면 보고 있는 페이지의 소스 코드가 포함된 창이 열리고 오류 및 경고에 대한 설명과 설명이 있습니다(있는 경우).
대략 이렇습니다.
이 컬렉션에는 놀라운 컬렉션이 포함되어 있습니다. 온라인 서비스 CSS 코드 작업을 위해. 이 모든 서비스는 웹 개발자의 삶을 훨씬 더 쉽게 만듭니다. 도움을 받아 사이트에 대한 CSS 그리드를 생성하고, 코드에 오류가 있는지 확인하고, 다양한 브라우저, 생성하다 CSS 스타일 Photoshop 레이어 스타일을 기반으로 배경 및 그라디언트에 대한 패턴 코드를 가져오고 CSS를 압축하여 사이트 로딩 속도를 높입니다. 글꼴 및 시각적 표현 작업을 전문으로 하는 서비스가 많이 있습니다.
1Kb CSS 그리드
3개의 매개변수만 설정하면 CSS 그리드도 생성됩니다. 또한 너비를 픽셀 단위로 지정합니다. 
그리드 디자이너
더 복잡한 서비스. CSS 그리드는 여러 가지 방법으로 구성됩니다. 두 번째 블록은 열에 표시될 텍스트를 생성합니다. 출력에는 기성품 CSS 및 HTML 템플릿이 있습니다. 
CSS 린트
웹사이트 코드에 오류가 있는지 확인하는 서비스입니다. 
입문서 CSS
HTML 코드를 대화 상자에 붙여넣으면 CSS에서 언급된 언급된 모든 클래스 및 ID 목록을 얻을 수 있습니다. 
접두사MyCSS
입력하면 소스 CSS코드를 입력하고 출력에서 다양한 브라우저에 맞게 조정된 코드를 얻을 수 있습니다. 
모더니저
이 서비스는 다운로드 및 설치를 제공합니다. 자바스크립트 라이브러리사이트를 만들 때 어떻게든 도움이 될 오픈 소스입니다. 제가 직접 해보지 않아서 확답은 못드리겠네요. 
레이어 스타일
고도로 유용한 서비스. 레이어 스타일 대화 상자의 설정에 따라 Photoshop은 CSS 코드를 생성합니다. 
궁극적인 CSS 그라디언트 ColorZilla의 생성기
선택할 수 있는 많은 수의 그라디언트가 있습니다. CSS 코드다른 브라우저에 맞게 조정되었습니다. 
스프라이트 박스
단일 이미지에서 클래스와 ID를 빠르고 쉽게 생성할 수 있습니다. 
자동 CSS 인라이너
메일링 리스트에서 사용하기 위해 모든 로컬 스타일을 인라인 CSS로 자동 변환합니다. 
유형 테스터
다른 글꼴의 철자를 비교하고 선택한 쓰기 스타일의 CSS 코드를 가져올 수 있습니다. 
웹 글꼴 조합기
이 서비스를 사용하면 다양한 글꼴 조합이 제목, 부제목 및 본문에서 어떻게 보이는지 시각적으로 볼 수 있습니다.
최근에 나는 사용자들로부터 내 테마의 유효성과 일반적인 유효성에 관한 몇 가지 질문을 받았습니다. 이 포스트에서 나는 그들에게 대답하고 싶다.
유효성이란 무엇입니까?
코드의 유효성은 모든 코드의 단일하고 보편적인 특성이라고 믿어집니다.
사실 타당성은 일치이다. HTML 코드 doctype에 지정되거나 HTML5에 암시된 특정 규칙 집합으로 문서를 작성합니다.
즉, 유효성은 규칙과 요구 사항이 다르기 때문에 상대적인 개념입니다.
더 명확하게 하기 위해 css-live.ru 사이트에서 찾은 예를 보여 드리겠습니다.
주거용 건물 및 원자력 발전소 건설에는 서로 다른 SNiP(건축법 및 규칙)가 적용되므로 한 세트의 규칙에 따라 유효한 문서가 다른 규칙(표준에 따라 건설된 원자력 발전소)에 따라 유효하지 않을 수 있습니다. 주거용 건물이 좋을 것입니다!).
doctype은 일반적으로 html 유효성 검사가 계획된 문서를 가리키지만 최적의 브라우저 모드를 선택하기 위해 실용적인 이유로 선택할 수 있습니다.
XHTML5에는 doctype이 전혀 없을 수 있지만 유효합니다.
유효성 검사 - 무엇입니까?
간단히 말해서 유효성 검사는 코드를 확인하고 선택한 문서 유형(DTD)을 준수하도록 만드는 프로세스입니다.
유효성은 어떻게 확인됩니까?
HTML 코드의 유효성은 유효성 검사기라는 도구에 의해 확인됩니다.
가장 유명한 w3c 유효성 검사기는 https://www.w3.org입니다.
w3c 유효성 검사기는 여러 코드 검사를 수행합니다.
주요 것들:
- 구문 오류 확인:
habrahabr.ru/post/101985의 예:올바른 구문이지만 잘못된 HTML 태그입니다.
따라서 구문 검사는 좋은 HTML 코드를 작성하는 데 최소한으로 유용합니다. - 태그 중첩 확인:
에 HTML 문서태그는 열림의 역순으로 닫아야 합니다. 이 검사는 닫히지 않았거나 잘못 닫힌 태그를 감지합니다. - DTD에 따른 HTML 유효성 검사:
코드가 지정된 DTD - 문서 유형 정의(doctype)에 어떻게 대응하는지 확인합니다. 여기에는 태그 이름, 속성 및 "임베딩" 태그(다른 유형의 태그 내부에 한 유형의 태그) 확인이 포함됩니다. - 이물질 확인:
코드에는 있지만 doctype에는 없는 모든 것을 찾습니다.
예를 들어, 사용자 정의 태그 및 속성.
CSS 코드의 유효성을 확인하기 위해 CSS 유효성 검사기가 있습니다. http://jigsaw.w3.org/css-validator.
코드 유효성- 이것은 지정된 규칙 세트에 따라 공식적인 OB가 없는지 기계적 검사의 결과입니다.
유효성 검사는 그 자체가 가치가 아니라 도구라는 것을 이해해야 합니다.
숙련된 레이아웃 디자이너는 일반적으로 HTML 또는 CSS 유효성 검사 규칙을 위반할 수 있는 부분과 그렇지 않은 부분, 이 오류 또는 그 유효성 검사 오류를 위협하는(또는 위협하지 않는) 부분을 알고 있습니다.
아닐 때의 예 유효한 코드사이트를 만듭니다:
- 더 편리하고 빠르게 - Javascript/AJAX 또는
- SEO 최적화 - ARIA 마크업.
타당성을 위한 타당성이 없다는 것은 명백하다.
일반적으로 숙련 된 레이아웃 디자이너는 다음 규칙을 준수합니다.
- 코드에 중대한 오류가 없어야 합니다.
- 미성년자는 허용되지만 정당한 사유가 있는 경우에만 가능합니다.
html/CSS 유효성 검사 오류 관련:
검증 오류(VF)는 다음과 같은 그룹으로 나눌 수 있습니다.
- 템플릿 파일의 OV:
그것들을 찾아서 고치는 것은 어렵지 않습니다.
작은 오류가 사이트의 기능을 향상시키거나 속도를 높이는 데 도움이 된다면 그대로 둘 수 있습니다. - 사이트에 연결된 타사 스크립트의 OV:
예를 들어, Vkontakte 위젯, Twitter 스크립트 또는 YouTube 비디오 파일.
이러한 파일과 스크립트는 다른 사이트에 있으며 액세스 권한이 없기 때문에 수정할 방법이 없습니다. - 유효성 검사기가 이해하지 못하는 CSS 규칙:
유효성 검사기는 사이트 코드가 특정 HTML 버전또는 CSS.
템플릿에서 CSS 버전 3 규칙을 사용하고 유효성 검사기가 버전 2.1에 대해 검사하는 경우 모든 CSS3 규칙을 오류로 간주하지만 오류는 아닙니다. - 원하는 결과를 얻으려면 무의식적으로 사이트에 남겨 두어야 하는 OV. 예를 들어:
- NOINDEX 태그. 그것들은 유효하지 않지만 매우 필요하며 우리는 그것을 참아야 합니다.
- 카키색 옷감. 일부 브라우저에서 사이트를 올바르게 표시하려면 특정 브라우저만 이해할 수 있는 코드인 해킹을 사용해야 하는 경우가 있습니다.
- 유효성 검사기 오류.
종종 그는 태그(예: 닫는 태그)를 보지 못하고 존재하지 않는 OB에 대해 보고합니다.
작업 현장에는 거의 항상 일종의 OV가 있는 것으로 나타났습니다.
게다가 많이 있을 수 있습니다.
예를 들어 Google, Yandex 및 mail.ru의 기본 페이지에는 각각 수십 개의 오류가 있습니다.
그러나 브라우저에서 사이트 표시를 중단하지 않고 작업을 방해하지 않습니다.
위에 작성된 모든 내용은 내 주제에 적용됩니다.
복잡한 주제에는 다음이 포함됩니다.
- WordPress 기능(예: the_category()), 잘못된 코드를 제공합니다.
- 예를 들어 YouTube와 같은 비디오 호스팅 사이트의 비디오 출력과 YouTube 코드에는 많은 OB가 있습니다.
- 버튼 소셜 네트워크, 이러한 네트워크의 스크립트를 사용하여 연결되고 OB가 포함됩니다.
- CSS3 및 HTML5 규칙은 이전 버전 유효성 검사기에서 버그로 간주했습니다.
동시에 CSS3 및 HTML5 버전의 유효성 검사기는 이전 규칙을 오류로 간주합니다. :) - 때로는 정확한 표시를 위해 인터넷 브라우저 Explorer 또는 이전 버전의 다른 브라우저는 특정 브라우저에 대한 사이트 표시 규칙을 작성하기 위해 특정 브라우저만 이해할 수 있는 코드인 소위 핵을 사용해야 합니다.
결과적으로 매우 간단한 주제를 배치할 때만 완전히 유효한 코드를 얻을 수 있습니다. 최소한의 기능을 포함하는 것.
내 토픽의 레이아웃을 마친 후에는 항상 유효성 검사기로 확인하고 토픽의 기능을 잃지 않고 수정할 수 있는 모든 OB를 수정합니다.
즉, 작동하는 기능과 유효성 중 하나를 선택해야 하는 경우 기능을 선택합니다.
자신만의 테마를 만들면 똑같이 하는 것이 좋습니다.
내 관점에서(또한 대다수의 레이아웃 디자이너 관점에서) html/CSS 유효성 검사를 궁극적인 진리로 보는 태도는 잘못된 것입니다. 다음과 같은 OB만 수정해야 합니다.
- 브라우저가 페이지를 올바르게 표시하지 못하게 합니다(닫히지 않고 잘못 중첩된 태그).
- 페이지 로딩 속도를 늦춥니다(잘못 연결된 스크립트).
- 테마의 기능을 손상시키지 않고 수정할 수 있습니다.
유효성 검사에 대한 모든 질문에 답변이 되었기를 바랍니다.