웹 표준은 웹 페이지를 세 가지 독립적인 구성 요소로 나눕니다.
* 구조: HTML, XHTML, XML
* 성능: CSS1, CSS2
* 동작: ECMAScript, DOM
지금까지의 웹 표준에는 외관이나 미학에 대한 지침이나 규정이 없으며, 사이트의 외관이나 느낌에 어떠한 제한도 두지 않습니다. 단지 디자이너가 만든 사이트를 브라우저에 올바르게 표시하고 고객이 회사의 요구 사항을 충족할 수 있도록 도와줄 뿐입니다. 시장 요구와 요구 사항을 분석하여 목표를 설정합니다.
웹 표준은 다음을 수행할 수 있습니다.
* 그래픽 브라우저에서 보다 정확한 제어, 위치 지정 및 레이아웃
* 복잡한 상호 작용 동작
*접근성
* 여러 브라우저 지원
* 이전 브라우저와 새 브라우저 모두에서 작동합니다.
* 향후 브라우저에서도 작동 보장
* 웹사이트 재설계 시간 단축
* 비전통적인 장치 지원
* 모든 웹페이지의 인쇄용 버전을 쉽게 제공
* 릴리스 프로세스 중에 문서를 쉽게 다시 디자인할 수 있습니다.
* HTML을 XML 기반 마크업 언어로 변환
웹 표준을 사용하는 이유:
* 상호작용 능력 강화
* 접근성 향상
* 유지보수 작업량 감소
* 대역폭 감소
* 비용 절감
XHTML은 HTML과 유사해 보이지만 몇 가지 작지만 중요한 차이점이 있는 XML 기반 마크업 언어입니다. 이렇게 보면 XHTML은 HTML과 비슷한 역할을 하는 XML이다.
본질적으로 XHTML은 XML의 강력한 기능(다소)과 HTML의 단순성(대부분)을 결합한 연결(전환) 기술입니다.
----제프리 젤드먼
XHTML로 전환해야 하는 10가지 이유:
*XHTML은 현재 HTML4 마크업 언어를 대체하는 표준입니다.
* XHTML은 다른 XML 기반 마크업 언어, 애플리케이션 및 프로토콜과 잘 상호 작용할 수 있습니다.
* XHTML은 HTML보다 일관성이 더 좋습니다.
* XHTML1.0은 XHTML의 향후 버전에 대한 다리입니다.
* 이전 브라우저는 XHTML에 적응할 수 있습니다.
* 새로운 브라우저는 HTML보다 XHTML을 선호합니다.
* XHTML은 무선 장치 및 기타 사용자 에이전트에서 잘 작동합니다.
* XHTML은 웹 표준 제품군의 일부입니다.
* XHTML은 프레젠테이션 레이어 코드의 나쁜 습관을 제거하는 데 도움이 될 수 있습니다.
* XHTML은 페이지가 작동하는지 테스트하기 위해 태그 확인 습관을 들이는 데 도움이 될 수 있습니다.
XHTML 규칙:
* 올바른 DOCTYPE 및 네임스페이스로 시작하세요.
* META 콘텐츠 요소를 사용하여 콘텐츠 인코딩 언어를 선언하세요.
* 모든 요소 및 속성 이름은 소문자로 작성
* 모든 속성 값에 따옴표를 추가하고 속성을 공백으로 구분합니다.
* 모든 속성에 값을 할당
* 모든 탭을 닫습니다
* 빈 태그를 공백과 슬래시로 닫습니다.
*댓글 내용에는 사용하지 마세요.
* < 및 &에는 반드시 < 및 &를 사용하세요.
XHTML1에서 제공하는 DTD에는 세 가지 유형이 있습니다.
* 전환, 전환, 가장 관대한 DTD, 프리젠테이션 레이어 태그, 정크 요소 및 속성을 허용하는 유일한 DTD
* 엄격하다, 엄격하다,
* 프레임셋, 프레임,
XHTML 선언 콘텐츠 인코딩 방법:
* XML 프롤로그, 즉 대부분의 브라우저는 이를 처리하지 않습니다.
* 인코딩 언어를 지정하려면 Content-Type 요소를 삽입하세요.
* 웹 서버에서 반환되는 HTTP 헤더를 통해 인코딩 언어를 설정합니다. 이 방법은 w3c에서 권장합니다.
구조 추가를 위한 일반적인 메커니즘
* id 및 class 속성과 결합된 DIV 및 SPAN 요소는 문서에 구조를 추가하기 위한 공통 메커니즘을 제공합니다.
* 이러한 요소는 컨텐츠에 다른 프리젠테이션 계층을 도입하지 않고 내장 컨텐츠(SPAN) 및 블록 레벨(DIV)을 정의합니다.
* ID 속성은 코드의 특수 영역 라벨과 유사하며 해당 영역에 특수 처리가 필요함을 나타냅니다. 특별히 설정된 CSS에서 ID 속성 값을 사용하는 경우 이를 CSS 선택자라고 합니다. ID는 선택기를 만드는 가장 쉽고 다양한 방법입니다.
* 아이디 이름은 반드시 문자와 밑줄로 시작해야 하며, 숫자로 시작할 수 없습니다.
ID 기능
* 스타일 시트 선택기로 XHTML 페이지 파일을 최소화합니다.
* 하이퍼링크의 앵커로서 오래된 이름 속성을 대체합니다.
* DOM 스크립트의 요소를 참조하는 방법;
* 선언된 개체 요소 이름으로;
* 범용 프로세스 처리를 위한 도구입니다.
# 스타일 시트는 선택한 요소가 표시되는 방식을 결정하는 하나 이상의 규칙 정의 모음입니다.
# CSS 정의는 선택자와 선언이라는 두 부분으로 구성됩니다. 그 중 선언도 컬렉션입니다. 컬렉션 요소는 {} 쌍 내에 배치됩니다. 각 요소는 속성과 값의 두 부분으로 구성됩니다.
# #으로 시작하는 선택자는 id 선택자이고, 로 시작하는 선택자는 선택자입니다.
# 여러 선택기가 동일한 명령문을 공유할 수 있으며, 이 경우 다른 선택 사항은 쉼표로 구분됩니다.
# CSS에 따르면 페이지의 하위 요소는 상위 요소의 속성을 상속하지만 일부 이전 브라우저에서는 이를 지원하지 않습니다(예: Netscape 4). 하위 요소가 상위 요소의 특성을 상속받지 않도록 하려면 하위 요소가 관련 속성을 자유롭게 정의할 수 있습니다.
# CSS는 대소문자를 구분하지 않지만 HTML 파일과 연결될 때 카테고리 및 ID 이름은 대소문자를 구분합니다.
# CSS 편집을 용이하게 하기 위해 공백이나 줄 바꿈을 추가할 수 있습니다.
# 스타일 시트는 세 가지 방식으로 페이지 표시에 영향을 줄 수 있습니다.
1. 홍보/수입
<link rel=StyleSheet href=/styles/mystylesheet.css type=text/css media=all />
또는
<스타일 유형=텍스트/css 미디어=모두>
@import /styles/mystylesheet.css;
</style>
또는
<스타일 유형=텍스트/css 미디어=모두>
@import url(/styles/mystylesheet.css);
</style>
참고: @Import 메서드는 5.0 이상의 브라우저에서만 지원됩니다.