번역가의 서문: 이 원문 시리즈는 웹 표준의 대중화에서 시작하여 표준을 준수하는 웹을 구축하기 위해 Dreamweaver 8을 사용하는 방법을 설명합니다. 원저자의 글은 "Build Your"에 대한 리뷰입니다. Dreamweaver 8을 이용한 자체 표준 준수 웹사이트'(본 글은 유료발췌) 내용을 적절하게 삭제하였습니다. 순서는 원문과 일치하나, 길이가 조정될 예정임을 알려드립니다. 번역 수준이 제한되어 있으니 양해해 주시기 바랍니다.
이 기사를 읽고 있다면 이미 웹 표준에 관심이 있고 DW(Dreamweaver의 약어)로 구축된 사이트에 표준을 적용하는 것에 대해 매우 궁금할 것입니다.
어쩌면 당신은 이미 WS(Web Standards의 약어)에 대해 어느 정도 이해하고 있지만 DW를 사용하여 호환 가능한 코드를 작성하는 방법을 알지 못할 수도 있습니다. 또는 DW 사용자이고 WS를 준수하고 CSS를 보다 광범위하게 사용하며 보다 사용자 친화적인 문서를 만들고 싶습니다. 귀하가 어떤 유형이든지 간에 이 기사는 귀하가 원하는 답변을 제공할 것입니다. 즉, DW를 사용하여 WS를 처리하는 방법을 알려줍니다.
웹 표준의 정의
이 기사 전체에서 우리가 우려하는 WS에 관해 먼저 우리가 말하는 내용을 명확하게 설명하겠습니다.
WS는 웹 개발 언어를 안내하는 사양이며 W3C에 의해 공식화되었습니다. 이러한 사양에는 HTML, XHTML 및 CSS와 같은 여러 언어뿐만 아니라 수학에서 방정식을 표현하는 데 사용되는 MathML과 같은 일부 기타 관련 언어가 포함되어 있습니다. . W3C는 또한 WAI를 통해 웹 페이지의 접근성을 촉진하는 WCAG(웹 콘텐츠 접근성 지침)를 게시합니다.
팁: 이 지침은
W3C 웹사이트에서 직접 읽을 수 있지만 때로는
다소
어렵습니다
. 읽을내용
:
HTML
4.01
W3C 문서를 너무 많이 읽을 필요는 없습니다.WS가 필요한 사람은 누구입니까?
WS가 좋은 것이라는 막연한 생각만 갖고 있을 수도 있지만, 많은 유명 사이트를 포함하여 많은 사이트가 WS를 준수하지 않으며 잘 관리되는 것 같습니다. 그렇다면 WS를 준수하기 위해 노력해야 하는 이유는 무엇입니까? WS가 필요한 사람은 누구입니까? W3C 사양 및 권장 사항에 주의를 기울여야 하는 사람은 누구입니까
? 웹
개발자 및 디자이너
: 웹 사이트 구축 개발자 및 디자이너. WS를 사용하여 개발하는 방법을 배우는 데 시간을 투자할 가치가 있습니까?깨끗한 마크업을 사용하면 버그 수정이 더 빨라집니다.
W3C로 페이지의 유효성을 검사하면 적어도 불규칙한 마크업이 발생한 오류의 원인이 아니라는 사실을 알게 될 것입니다. 때로는 페이지를 검증하고 발견된 오류를 수정하는 과정을 통해 끝나지 않는 요소나 철자가 틀린 태그로 인해 발생한 표시 문제를 해결할 수 있습니다.
문서를 확인해도 문제가 해결되지 않더라도 적어도 정식 문서에 문제가 있다는 사실은 알 수 있습니다. 이제 이 문제가 버그가 아니라는 것을 알았으므로 다른 브라우저에서 CSS 처리의 차이점과 같은 다른 문제에 집중할 수 있습니다.
접근성 요구 사항을 준수하는 것은 쉽습니다.
표준 XHTML 마크업을 작성하면 문서가 의미상 올바른지 확인할 수 있고 문서의 내용을 프레젠테이션에서 분리할 수 있으므로 많은 작업을 수행할 수 있습니다. WCAG1.0에 나열된 접근성 문제. 접근성이 장애가 있는 사람들만을 위한 것이 아니라는 점을 인식하는 것도 중요합니다. 친숙한 사이트는 분산된 비표준 마크업을 처리할 수 있는 처리 능력이 없는 휴대폰, PDA 등 다양한 장치에서 액세스할 수 있습니다.
상위 호환성
현재 브라우저에서 새로 개발된 페이지의 성능만 고려한다면 향후 새 브라우저에서 페이지의 성능을 어떻게 보장할 수 있습니까? 새 브라우저로 인해 페이지가 변경될 수 있습니다. 디스플레이가 형편없어서 어려움을 겪게 됩니다. 성가신 문제를 찾아서 해결합니다.
WS를 준수한다고 해서 이 문제가 완전히 근절되는 것은 아닙니다. 그러나 표준 호환성은 설계 실패 위험을 크게 줄이고 오늘날의 브라우저 소프트웨어 회사도 표준을 지원하기 시작했습니다. 실수로 사양의 일부를 잘못 해석할 수도 있지만 완전히 반대할 수는 없습니다. 최악의 상황이 발생하고 새 브라우저가 표준화된 사이트에 이상한 영향을 미치는 경우 호환되지 않는 사이트보다 문제를 해결하는 것이 훨씬 쉽습니다. 문제가 발생하면 다른 표준 준수 사이트에도 영향을 미칩니다. 웹 커뮤니티의 집단적 지혜가 이를 지적하고 이를 해결하기 위한 기사를 작성할 것입니다. 따라서 호환되지 않는 문서보다 호환되는 문서에서 이 BUG를 수정하는 것이 더 쉽다는 점에 대해 모두가 집단적으로 논의했습니다.
더욱 쉬워진 리팩토링
사이트에서 텍스트를 제거하고 리팩토링한 후 처음부터 다시 시작해야 했던 적이 있습니까? 글꼴 레이블과 작은 표 셀(처음부터 시작해야 함)로 어지러워진 레이블을 본 적이 있습니까? 이 사이트의 리팩토링.
문서의 내용과 표현을 분리하면 표준 준수의 장점이 있습니다. 즉, 다음에 누군가가 사이트를 리팩터링하려고 할 때 웹 문서를 복사할 필요가 없다는 의미입니다. 사이트의 모든 텍스트는 시맨틱(X)HTML로 마크업되며 웹마스터가 변경하려는 모든 프레젠테이션 정보는 쉽게 교체할 수 있는 CSS 파일에 저장됩니다.
일부 클라이언트는 리팩토링이 완료될 때까지 기다리지 않고 변경을 요청하기 시작합니다. 그들은 Mammoth Fossil Pit을 방문할 때까지 기다린 다음 "왼쪽 열을 오른쪽으로 이동하세요"라고 말하도록 요청할 것입니다. ." 표준화된 호환 사이트의 경우 모든 페이지는 CSS로 제어됩니다. 복잡한 테이블 구조를 가진 많은 페이지에서 트릭을 생각할 필요 없이 페이지의 태그를 쉽게 이동할 수 있습니다. 이렇게 하면 페이지 레이아웃을 더 쉽게 변경할 수 있습니다.
프리젠테이션에서 구조를 분리하면 일부 시청자에게 더 매력적일 수 있는 고대비, 작은 이미지 버전의 사이트와 같은 새로운 요소를 더 쉽게 추가할 수 있습니다. 스타일 시트를 쉽게 변경할 수 있는데 왜 별도의 텍스트 전용 페이지 버전을 만들어야 합니까?
브라우저 소프트웨어 회사
브라우저 소프트웨어 회사가 WS에 주목하기 시작했습니다. 과거에는 브라우저 소프트웨어 회사가 자체 독점 태그와 속성을 기본 언어에 추가했습니다. 그러나 이제 이전과는 달리 모두 표준을 준수하기 시작했으며 일부 최신 브라우저는 이미 사양에 정의된 (X)HTML 및 CSS에 따라 이를 표시하려고 노력하고 있습니다.
가까운 미래에 브라우저는 대부분의 비표준 마크업과 코드를 표시할 수 있게 될 것입니다. 그렇지 않으면 수천 개의 비표준 사이트가 제대로 표시되지 않을 것이기 때문입니다. 그러면 대중은 브라우저를 비난하기 시작할 것입니다. 웹 디자이너가 아닙니다. 그러나 다른 장치(데스크톱의 처리 능력이 없는 장치)는 발생하는 코드의 표준화된 호환성에 더 많이 의존합니다.
저작 도구 소프트웨어 공급업체
Dreamweaver를 만드는 Macromedia와 같은 저작 도구 소프트웨어 공급업체도 WS를 준수하기 시작했습니다. 예를 들어 웹 디자이너도 마찬가지입니다. 점점 더 많은 고객이 이러한 저작 도구에서 정식 마크업을 출력하도록 요구하기 때문입니다. 원래 이러한 시각적 개발 환경은 혼란스럽고 비표준적인 마크업을 생성했기 때문에 좋은 평판을 얻지 못했습니다. 그러나 최신 주요 시각적 개발 환경에서는 호환성 및 접근성의 표준화된 요소를 호출했으며 이는 또한 주요 판매 포인트가 되었습니다. 소프트웨어 공급업체는 시장 요구에 귀를 기울이고 대응해야 합니다.
웹 사용자
우리가 설계한 사이트의 사용자는 비록 깨닫지 못하더라도 오늘날의 인기 있는 브라우저용으로 특별히 개발된 사이트를 무의식적으로 사용하고 있을 수도 있습니다. 이러한 사용자가 다른 브라우저로 전환하면 해당 독점 태그가 새 브라우저에서 허용되지 않기 때문에 온라인 경험이 더 이상 즐겁지 않다는 것을 알게 될 수 있습니다. 표준화되고 호환 가능한 사이트는 기존 브라우저든 향후 브라우저든 다양한 브라우저에서 잘 작동합니다.
또한 접근성 권장 사항을 따르는 웹 사이트는 웹 탐색이 만족스럽지 못한 사용자에게 더 쉽게 다가갈 수 있습니다. 웹은 시각 장애나 기타 장애가 있는 사람들에게 보다 편리한 쇼핑, 독서, 검색 조건을 제공해야 합니다. 사이트가 독점 태그나 기타 독점(브라우저 참조) 기술을 사용한다고 해서 사이트 탐색을 방해해서는 안 됩니다.
WS를 사용할
때 WS의 올바른 사용을 어떻게 보장할 수 있습니까
? 표준을 준수하려면 어떻게 해야합니까
?이는 사양에 정의된 요소와 속성만 사용해야 하며 IE의 marquee 태그 및 Netscape의 깜박임 태그와 같은 특정 브라우저별 속성은 사용하지 않아야 함을 의미합니다. 또한 이전 사양(예: HTML 3.2)에 나타났거나 이후 사양에서 제거된 요소를 사용하지 마십시오.
표준 XHTML 문서 만들기
이 기사에서는 XHTML을 사용할 것이므로 W3C의 XHTML 1.0 권장 사항(W3C에 따른 권장 사항은 사양을 의미함)을 따를 것입니다. XHTML은 기본적으로 HTML의 최신 버전으로, 웹 마크업 언어인 HTML을 대체하도록 설계되었습니다. XHTML은 XML의 HTML 변형이지만 HTML과 거의 동일하지만 미묘한 차이점은 나중에 XHTML 및 의미론에서 논의할 것입니다.
Dreamweaver의 새 문서 대화 상자(파일>새로 만들기...)를 통해 XHTML 문서를 생성할 수 있습니다. 그림 2.1, "Dreamweaver에서 새 XHTML 문서 만들기"에 표시된 대로 범주 목록에서 기본 페이지가 선택되어 있는지 확인한 다음 기본 페이지 목록에서 HTML을 선택합니다. 그런 다음 드롭다운 목록에서 문서 유형을 선택할 수 있습니다.
그림 2.1: Dreamweaver에서 새 XHTML 문서 만들기
그림 2.2: 코드 보기에 새 XHTML 문서 표시
새 문서를 생성하려면 "만들기"를 클릭하세요. 문서 창 상단의 코드 버튼을 클릭하고 "코드 보기"로 이동하면 간단한 XHTML 문서에 어떤 코드가 포함되어 있는지 명확하게 확인할 수 있습니다. 그림 2.2에 표시된 것처럼 "코드 보기에 새 XHTML 문서 표시"
문서
의 첫 번째 줄에는<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: / /www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
이를 문서 유형 선언 또는 DOCTYPE이라고 합니다. 이름에서 알 수 있듯이 DOCTYPE은 문서가 무엇인지, 즉 어떤 (X)HTML 사양을 준수하는지 선언합니다. 이 예에서는 DW 8의 기본 설정인 XHTML 1.0 Transitional을 따릅니다. 전환 섹션에서는 XHTML 버전에 대한 몇 가지 추가 정보를 알려줍니다. XHTML1.0에는 Strict, Transitional 및 Frameset의 세 가지 "특성"이 있습니다. DW는 기본적으로 Transitional 유형을 사용하며, 문서에 프레임을 삽입하려는 경우 Frameset을 사용합니다.
XHTML Strict는 짐작할 수 있듯이 가장 엄격한 XHTML 형식입니다. 엄격한 문서 유형은 다음과 같습니다:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
엄격한 DOCTYPE을 사용하는 경우 문서에서 사용할 수 없습니다. 모든 요소 (태그) 또는 지원 중단을 선언하는 속성은 프레임에서 사용할 수 없습니다. 더 이상 사용되지 않는다고 선언된 요소는 XHTML의 향후 버전에서 제거될 예정입니다. 이러한 요소 중 다수는 CSS로 완전히 대체될 수 있는 페이지의 모양을 제어하는 데 사용됩니다. Strict와 Transitional의 가장 큰 차이점은 Strict DOCTYPE을 사용할 때 성능에 사용할 수 있다고 생각했던 속성과 요소가 크게 제한된다는 것입니다.
참고: DW에서 Strict DOCTYPE 사용
DW는 표준 준수에 있어서 그다지 엄격하지 않습니다. Strict DOCTYPE을 사용하는 경우 문서 유효성을 검사하고 불규칙한 속성을 수정하는 데 특별한 주의를 기울이세요. 기본적으로 CSS로 대체하는 것은 쉽습니다.
프레임셋 DOCTYPE은 프레임 사용을 지원합니다. 문서에 프레임을 삽입하면 DW는 자동으로 이 유형을 사용합니다. 프레임 페이지는 적어도 두 개의 다른 페이지와 관련되어 있어야 하며, 관련 페이지의 문서 유형에는 제한이 없습니다. Frameset DOCTYPE의 코드는 다음과 같습니다:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4.01은 또한 문서 유형의 세 가지 "특성"인 Transitional, Strict 및 Strict를 제공합니다. 프레임셋 - 위에서 언급한 XHTML DOCTYPE과 정확히 동일하게 작동합니다. 두 유형 중 하나를 사용하는 경우 HTML(XHTML 아님) 문서에 이를 표시해야 합니다. 나중에 웹 사이트 만들기 섹션에서 HTML과 XHTML의 차이점에 대해 자세히 설명하겠습니다.
원본: Dreamweaver 8 Does Standards 작성자: Rachel Andrew
편집: x5