우선, 서두르지 말고 시작하세요! 어떤 일을 하기 전에 두 가지 정신적 준비를 하십시오. 이것이 학습 과정에서 가장 중요한 것입니다.
학습에는 시간이 걸리며 단계별로 수행되어야 합니다.
도중에 좌절도 있을 것입니다.
하지만 여러분은 혼자가 아닙니다. 우리 중 많은 사람들이 웹 표준을 배우고 사용하는 데 투자하고 있습니다. 더 쉽게 배울 수 있도록 끊임없이 확장되는 커뮤니티, 기술과 기술을 배우는 데 많은 어려움을 겪은 베테랑, 그리고 그들의 땀과 눈물로 혜택을 받을 행운의 후발자들(나 포함)이 있습니다.
마침내 웹 표준 기반 디자인 방법(전통적인 테이블 기반 방법이 가려진 것처럼 보이도록 만들기)을 사용하는 데 능숙해지면 CSS를 사용하여 페이지를 레이아웃하는 것이 그리 어렵지 않다는 사실에 놀라게 될 것입니다. 아, 물론 주류 브라우저가 CSS2 사양의 일부 작업을 더 잘 지원한다면 실제로 사용하기가 더 쉬울 수도 있습니다.
글쎄요, 제가 좀 주제에서 벗어난 것 같군요.
그럼, 실제로 유용한 정보로 바로 시작하겠습니다. 우선, "웹 표준으로 디자인하기"(참고 1) 사본을 구입하고 너무 많이 생각하지 말고 즉시 수행하십시오. 이미 가지고 계십니까? 자, 지금 읽고 먼지가 쌓이지 않도록 하세요. 내가 말하고 싶은 모든 사항은 책에 자세히 설명되어 있습니다. 이 책은 선언문(당신이 이 일을 해야 하는 이유)과 튜토리얼(어떻게 해야 하는지)의 두 부분으로 나누어져 있습니다. 이것은 당신에게 유용할 수 있습니다.
이제 가장 먼저 할 일은 HTML4.01을 선택하든, A mind-numbing jobs를 선택하든 XHTML의 이데올로기적 시스템 개념을 확립하는 것입니다. 모든 문서는 DOCTYPE을 선택하는 것부터 시작됩니다. 문서에서 사용하는 마크업 언어를 브라우저에 알려주면 열악한 페이지 표시 결과로 인해 미칠 수 있는 불필요한 성능 오류를 방지할 수 있습니다. 예를 들어, 시카고로 비행기를 타고 가고 싶다면 여행사에 가고 싶은 곳을 알려야 합니다. 그렇지 않으면 목적 없이 비엔나로 비행기를 타고 갈 수도 있습니다. HTML이나 XHTML을 표시하려면 먼저 DOCTYPE을 설정하면 "목적지"에 도달할 수 있다고 브라우저에 알려야 합니다.
다음 목표: 엄격한 형식의 로고. 이것은 마스터하기가 매우 쉽습니다. 모든 속성을 인용하세요(예: <a href="link">). 태그를 올바르게 중첩하세요. 열려 있는 모든 태그를 닫으세요(예: <input type="text" />). 모든 로고나 요소는 닫혀야 합니다.
참고 사항: 태그가 언제 요소가 되었는지는 알 수 없습니다. 의미는 같지만 표현 방식이 다릅니다. 뭐라고 부르든 지금은 정확한 이름이 "요소"인 것 같습니다. 어쩌면 처음에는 그랬을지도 모르겠지만, 아무도 나에게 말해주지 않았습니다.
그럼에도 불구하고 모든 요소는 올바르게 닫혀야 합니다. HTML4.01을 사용하는 경우 <br>, <hr> 및 <input>과 같은 개별 요소를 무시할 수 있습니다. XHTML을 사용하는 경우 끝에 슬래시를 추가하여 개별 요소도 닫아야 합니다. 예: <br >에<br />가 됩니다.
다음으로 XHTML 속성에 대해 다소 혼란스러운 규칙이 있습니다. 모든 속성에는 값이 있어야 하며 값이 없으면 값 자체가 사용됩니다. 예를 들어 <input type="radio" check="checked" />입니다. HTML4.01에서는 체크된 값이 필수가 아니지만 XHTML에서는 필수입니다.
마지막으로 XHTML에서는 모든 코드를 소문자로 작성해야 합니다. HTML은 대소문자를 구분하지 않지만 XHTML은 대소문자를 구분하며 XML 구문 규칙을 따릅니다.
로고 변경에 관한 모든 것입니다! 당신은 이미 모든 것을 알고 있습니다! 심호흡을 하고, 맥주를 마시고, 긴장을 풀어보세요. 왜냐하면 그것은 단지 첫 번째 단계에 불과하기 때문입니다.
섹션 2
이제 올바른 HTML/XHTMLL을 작성하고 W3 조직의 유효성 검사기(validator)에서 유효성을 검사하는 방법을 배우기 시작합니다. 올바르게 작성하셨다면 파란색 배경에 노란색 글씨로 성공 메시지가 뜰 것입니다. 이 색상/글꼴 조합을 좋아해 보세요. 가장 친한 친구가 될 것입니다.
검증이 왜 그렇게 중요한가요? 그것은 중요합니까? 잘못 작성된(무작위, 부정확한) 로고는 완전한 예측 불가능성을 가져오기 때문입니다. 페이지의 "생사"는 전적으로 브라우저의 오류 처리 방법에 따라 달라집니다. 대부분의 브라우저도 잘못 작성된 로고를 잘 지원할 수 있지만 이는 잘못된 습관입니다. 안녕하세요, 우리가 비표준에 익숙해지는 이유는 무엇입니까? 첫 번째 이유는 브라우저 전쟁입니다. 1995년 Microsoft가 Netscape와 경쟁하여 시장 점유율을 확보할 수 있었던 이유는 IE가 Netscape와 정확히 동일하게 웹 페이지 오류를 처리했기 때문입니다.
또 다른 관점: 유효성 검사는 잘못된 코드를 찾는 데 도움이 되며 페이지가 보다 일관되게 작동하도록 보장합니다. 코드 확인은 제가 레이아웃을 디버깅할 때 가장 먼저 하는 일이며, 여러분도 마찬가지일 것이라고 믿습니다.
좋아, 처음으로 사이트를 확인할 때 피드백을 받은 70~80가지 놀라운 오류 메시지를 견뎌야 할 것입니다. 불행하게도 체크섬은 도움이 되지만 완벽하지는 않으며 소수의 자원 봉사자에 의해서만 유지 관리됩니다. 좋은 소식은 해당 오류가 관련되어 있다는 것입니다. </p> 태그가 누락된 것을 발견하고 수정하면 다음 24개의 오류가 사라질 가능성이 있습니다. 간단히 말해서 검증 결과가 좋지 않은 것처럼 보일 수도 있지만 그렇지 않은 경우가 많습니다.
이제 유효성 검사를 통과했으며 코드가 규정을 준수합니다. 이 시점에서는 엄격한 지침을 준수하지만 애초에 왜 그렇게 하는지에 대한 완전한 이해가 부족합니다.
섹션 3 다음 단계는 잘 구성된 마크업을 사용하여 작성한 문서를 리팩터링하고 최근 DOCTYPE에서 점점 더 "더 이상 사용되지 않는" 것으로 나열되는 프리젠테이션 계층 속성을 제거하고 이를 별도의 파일에 배치하는 것입니다. 이것이 논란의 여지가 있는 "성능과 구조의 분리"이기 때문에 CSS가 그토록 중요합니다.
비유하자면 다음과 같습니다. 텍스트는 콘텐츠입니다. 콘텐츠는 완벽하지만 콘텐츠 구조(예: 공백, 섹션, 제목, 목록 등)에 대한 힌트가 없습니다. 사용하기 쉽지 않은 지저분한 텍스트만 표시됩니다. 구조적 레이어는 추가적인 구조적 정보를 전달하기 위해 문서에 개별 요소를 추가하여 지저분한 텍스트를 더욱 논리적이고 체계적으로 만듭니다. 그러나 이러한 요소는 텍스트의 기본 모양을 제어하지 않습니다. 예를 들어, 첫 번째 페이지의 제목이 텍스트 글꼴보다 큰 경우가 종종 있습니다. 이는 구조의 기능이 아닙니다.
이제 "프레젠테이션 레이어"가 나타날 차례입니다. 표현은 첫 번째 페이지의 제목을 빨간색, 기울임꼴로 표시하고 글꼴 크기를 본문 글꼴의 150%로 지정하는 형식 힌트입니다. 프리젠테이션 레이어는 문서 구조 레이어 위에 있는 추가 레이어입니다. CSS는 프리젠테이션 레이어에 속하며 문서의 간단한 태그를 통해 문서를 놀라운 형태로 변환할 수 있습니다. CSS Zen Garden을 방문하여 예제를 확인하세요.
그렇다면 성능과 구조를 분리하는 가장 좋은 방법은 무엇입니까? 프레젠테이션을 제공하는 데 사용되는 HTML 요소나 속성이 포함된 전통적인 코드를 예로 들어 보겠습니다. 이제 bgcolors 및 <center> 태그를 잘라낼 시간입니다.
다음 데모 코드에서 어떤 표시 속성과 태그를 제거해야 합니까?
<center><h1><fontface="Verdana">이것은 내 첫 웹사이트입니다.</font></h1></center> <table border="0" cellpadding="0" cellpacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>그들이 나를 데려가려고 오고 있어요...</p></td>
대답할 준비가 되셨나요? 좋습니다. 올바른 결과가 아래에 나열되어 있습니다. 이는 성능 흔적이 없는 깔끔한 구조의 코드입니다.
<h1>이것은 내 첫 웹사이트입니다.</h1> <table> <body> <td><p>그들이 나를 데려가려고 오고 있어요...</p></td>
그게 다야? 그게 다야.
이 코드는 어느 하나의 사양을 명시적으로 따르지 않지만 이러한 분리의 더 큰 의미는 올바른 요소가 사용된다는 것입니다. 테이블 레이아웃의 사용은 부차적인 문제입니다. 위의 예에서는 테이블을 사용하는 방법이 장기적이고 신중한 관점에서 볼 때 <table> 및 <td> 요소를 제거해야 합니다. 더 이상 사용되지 않지만 테이블은 여전히 매우 유용하며 테이블 형식으로 정렬된 데이터에서 적절한 경우 사용할 수 있습니다.
글쎄, 우리는 페이지에서 서식을 제거했습니다. 만세! 지금은 또 무엇을 하시나요? 그러면 Times-New-Roman 글꼴에 보기 흉한 요소, 텍스트 및 줄이 남게 됩니다. 하나도 안 웃긴데, 우리가 약속했던 밝고 아름다운 페이지는 어디에 있는 걸까?
Zen Garden 사례를 다시 보면 귀여운 디자인이 보이나요? 얼마나 다르게 생겼나요? 요점은 아름다운 디자인 아래에 방금 만든 서식 없는 문서만큼 지루한 XHTML이 있다는 것입니다. 그렇지 않나요?
사실, 지루하고 추악한 것에는 좋은 기반이 있습니다. 형식이 지정되지 않은 이 HTML은 1994년의 웹만큼 나쁘게 보입니다. 몇 가지 예외를 제외하면 이러한 요소는 웹 자체만큼 오래되었으며 <h2>는 모자이크 브라우저 시대부터 존재해 왔습니다.
사용 용이성(특별한 요구 사항에 대한), 내장된 SEO, 대역폭 비용 절감 등의 이점은 확실히 여기서 끝나지 않습니다. Jeffrey Veen은 이미 작년에 "웹 표준의 비즈니스 가치"를 저술했으며 Roger Johansson도 최근 "웹 표준을 사용한 개발"에서 표준 기반 디자인의 기술과 이점을 설명했습니다.
CSS는 오늘날 모든 주요 브라우저에서 잘 지원되며 CSS 구문, CSS 기반 레이아웃 및 고급 기술을 배우는 데 도움이 되는 수많은 리소스가 있습니다. 저는 몇 가지 좋은 강좌를 추천합니다. westCiv는 여러분이 빠르게 시작하고 숙달하는 데 도움이 되는 지속적인 무료 CSS 강좌를 제공합니다. Andrew Fernandez는 CSS를 처음 접하는 사람이든 아니든 상관없이 도움이 될 방대한 CSS 리소스 목록을 구축했습니다. Eric Meyer는 책상 위에 두고 언제든지 참고할 수 있는 책 묶음을 집필했습니다. 이 책에는 CSS에 대한 사례 기반 Eric Meyer와 CSS에 대한 More Eric Meyer가 포함되어 있습니다. O'Reilly Publishing House에서 출판한 CSS 참고서 "CSS에 대한 확실한 가이드"가 제2판으로 출시되었으므로 책상 위에 보관해 두는 것이 좋습니다. 또한 Molly Holzschlag의 "The Designer's Edge"와 Chris Schmitt의 "Designing CSS Web Pages"도 이용 가능합니다.
CSS를 적용하고 레이아웃을 구축하는 방법을 자세히 설명하려면 시간이 너무 오래 걸립니다. 더 이상 말하지 않겠습니다. 위 내용은 웹 표준에 관심을 갖기 시작한 디자이너들에게 제가 드릴 수 있는 조언입니다. 여러분의 생각을 읽고 공유하여 커뮤니티로 성장합시다. 우리 중 많은 사람들이 웹 표준을 적극적으로 홍보하고 있습니다.
참고사항 1. "웹 표준으로 디자인하기"는 젤드만이 웹 표준을 홍보하기 위해 쓴 책으로 2004년 5월에 중국어 버전이 소개되어 출시되었습니다. 책 제목은 "웹 사이트 재구성--웹 표준으로 디자인하기"입니다.