웹 표준 웹사이트 구축에 대한 생각

저는 작년 초부터 웹 표준을 배우기 시작했고, 지난 2년 동안 어느 정도 경험을 쌓았습니다. 최근에 직장을 바꾸고 집에서 시간이 있어서 모두와 공유할 글을 썼습니다.

1. 웹 표준 및 W3C XHTML 사양의 이해

관습적인 이해에 따르면, 이 두 개념은 동일한 것을 가리키는 것으로 보입니다(이 판에서 논의하는 "고급 이론"^_^). 하지만 사실 기술적인 관점에서 볼 때 이 두 가지는 거의 상관관계가 전혀 없다고 생각합니다. 간단히 말해서, 웹 표준은 페이지의 구조, 성능 및 동작을 독립적으로 구현하는 것입니다. 보다 일반적으로 말하면 오늘날 채용에서 널리 사용되는 언어인 "div+css"입니다. 그러나 W3C XHTML의 어떤 버전도 웹 표준 개념에 제한을 두지 않습니다. 분명히 우리는 xhtml 1.1을 사용하여 테이블 위치의 웹 페이지를 작성할 수 있습니다. 이쯤 되면 내가 말도 안 되는 소리를 많이 하고 있다고 생각할 수도 있다. 그러나 어떤 기술이든 기본 개념을 충분히 명확하게 이해한 경우에만 올바르게 사용할 수 있습니다. 다음 두 가지 측면에서 현재 웹 표준 적용에 있어서 잘못된 두 가지 경로에 대해 이야기하겠습니다.

첫 번째 경우는 간단합니다. XHTML+CSS를 사용하는 한 웹 표준이라고 생각합니다. 페이지는 클래스와 ID로 가득 차 있습니다. 모든 세부 사항에 대해 별도의 클래스를 자유롭게 정의하세요. 이러한 페이지와 기존 HTML의 차이점은 img 태그에 추가 "/"가 있다는 것입니다. 사실, 전통적인 HTML로 돌아가는 것이 더 낫습니다. 적어도 사전처럼 스타일 시트를 찾아볼 필요 없이 쉽게 글꼴을 사용할 수 있습니다. 나중에 이야기할 또 다른 좀 더 미묘하고 일상적인 CSS 사용에 대해 설명하겠습니다.

나는 두 번째 상황이 더 이해하기 어렵다고 생각합니다. 즉, 원하는 성능을 달성하기 위해 다양하고 복잡한 div 중첩 및 CSS 문을 사용하려고 하는 것입니다. 아주 간단한 예는 방금 "이미지를 자르지 않고 페이지 모서리를 둥글게 만들었습니다"라는 게시물을 본 것입니다. 우선, CSS 기능을 사용하여 둥근 모서리를 "그리는" 이 아이디어가 정말 좋은지 확인하고 싶습니다. 이를 위해 디자이너는 해당 위치에 다음과 같이 큰 코드 섹션을 추가해야 합니다.

그러나 이는 구조와 표현의 분리라는 웹 표준의 기본 개념을 심각하게 위반합니다. 웹페이지의 성능을 제어하는 ​​데 사용되는 코드를 구조적 문서에 배치하기 때문입니다. 실제로 실제 성능 코드를 CSS에 넣는다고 말할 수도 있습니다. 그러나 나는 이것이 도난당한 개념이라고 생각합니다. 위의 b 태그는 웹페이지의 구조와 아무런 관련이 없으므로 모두 빈 태그입니다. 즉, 문서 구조에서 요구하는 곳에 무언가를 넣는 것이 존재하지 않습니다. 따라서 문서 구조에 대한 정크 코드일 뿐입니다.

또 다른 예는 더 미묘할 수 있습니다. 이전에 웹 페이지에 3방향 열을 구현하는 방법에 대한 기사를 alistapart.com에서 본 적이 있습니다. 원칙은 아마도 3~4개의 div를 사용하여 서로 중첩하는 것입니다. 나는 이것도 웹 표준에 위배된다고 생각한다. 왜냐하면 이러한 div 태그가 코드에 배치되는 순서는 단순히 구조적 요구사항이 아니라 웹페이지 성능을 위한 것이기 때문입니다.

물론, 위의 관점이 어느 정도 과하다는 점은 인정합니다(그러나 반면에 그림이 아닌 둥근 모서리를 구현해야 한다면 그것도 과한 것이 아닐까요, 하하). 때로는 구조와 성능이 그렇게 쉽게 분리되지 않는 경우도 있습니다. 풍부한 성능을 얻으려면 구조를 조정해야 합니다( <div style="clear:both" /> 사용을 생각해 보세요). 하지만 무엇이 옳고 무엇이 그른지 아는 것이 중요합니다. 우리가 가끔 뭔가 잘못을 해야 할 때도 있습니다.

마지막으로, "그림이 아닌 둥근 모서리"가 의미가 없거나 잘못되었다고 말하는 것이 아니라는 점을 말씀드리고 싶습니다. 나는 또한 작가의 지성과 영감에 감탄합니다. 이런 기술적인 연구는 예전에 CSS를 이용해 국기를 그리는 것과 비슷하고, CSS 기술을 익히는데 많은 도움이 된다고 생각합니다. 그러나 그 사용은 CSS 플래그만큼 제한되어야 하며 실제 응용 프로그램에서는 채택되어서는 안 됩니다. 웹 표준의 기본 원칙을 위반하기 때문입니다.

2. HTML 태그의 의미

오늘날의 웹 표준은 구어적으로 "div+css" 또는 "레이어 레이아웃"이라고 불립니다. 나는 이 편의에 반대하지 않습니다. 그러나 이는 오해를 불러일으킵니다. 즉, 많은 수의 div 태그를 구조적 요소로 사용한다는 것입니다. 실제로 이는 div 남용의 보다 발전된 형태입니다(Jeffrey Zeldman이 "웹사이트 리팩토링"이라는 책에서 언급함).

HTML은 각각 고유한 의미를 지닌 매우 풍부한 태그를 제공합니다. 디자인할 때 HTML 구문을 따르는 것 외에도 각 태그의 "의미"를 최대한 활용하고 준수해야 한다고 생각합니다. 예를 들어, 제목 텍스트는 h1-h6에 포함되어야 하고, 텍스트 내용의 큰 단락은 <br /> 대신 <p>로 구분되어야 하며, 목록 항목은 ul, ol 또는 dl에 배치되어야 하며, 데이터는 표 형식이어야 합니다. 여전히 테이블 레이아웃이어야 합니다.

왜 이런 일을 하는가? 매우 설득력 있는 이유는 사용자가 CSS 표시를 제거할 때 웹 페이지에서 콘텐츠의 구조적 계층 구조를 최대한 효과적으로 표시할 수 있다는 것입니다. 모든 div를 사용하는 경우 CSS가 제거되면 전체 웹페이지의 계층 구조가 사라지고 일부 지저분한 텍스트 조각만 남게 됩니다. 이는 낮은 구성 호환성에 대한 웹 표준 요구 사항을 충족하지 않습니다.

일부 태그의 의미에 대해 내가 이해한 내용을 자세히 나열하겠습니다.

피 br

먼저 가장 간단한 것부터 이야기해보자. 단락에는 br(두 개의 연속 <br />이라도) 대신 p 태그를 사용하세요. 이건 별 말 없이 진행되는 것 같습니다. 그러나 때로 우리는 이 원칙을 포기해야 할 때도 있다. 일반적인 예는 포럼 게시물입니다. 이를 분할하려면 Enter 키를 누릅니다. 이렇게 배경으로 전송되어 표시되는 내용은 <br />을 사용하여 명확하게 구분됩니다.

테이블 일

div+css의 활발한 홍보로 인해 테이블 ​​레이아웃을 사용하는 사람은 누구나 미개한 원주민인 것 같습니다. 그러나 나는 이러한 견해가 틀렸다고 생각한다. 테이블의 의미는 테이블이므로 테이블 형식으로 표시되어야 하는 모든 데이터는 여전히 테이블에 배치되어야 합니다. 간단한 예는 이름, 학생 ID, 성별 등을 포함하는 동급생 명단입니다. 이는 분명히 표 형식의 데이터이므로 테이블 레이아웃을 사용해야 합니다. 살펴볼 가치가 있는 또 다른 예는 블로그의 캘린더 탐색입니다. 한 블로그 프로그램을 본 적이 있습니다. 달력 탐색의 날짜는 모두 1일부터 30일까지 div로 묶인 다음 float:left 스타일을 사용하여 이번 달의 달력을 7개의 행으로 정렬합니다. 브라우저의 CSS 표시를 취소하면 달력의 일부가 1번부터 30번까지 세로로 배열됩니다. 나는 이것이 잘못된 것이라고 생각합니다. 달력은 테이블 형식의 데이터여야 하므로 테이블 레이아웃을 계속 사용해야 합니다. CSS를 취소한 후에도 7개의 행이 있는 테이블로 그룹화되어야 합니다.

th는 무시될 또 다른 태그입니다. CSS의 전능함으로 인해 모든 테이블 셀은 td 및 클래스 속성을 사용하여 생성될 수 있습니다. 그러나 의미상 일부 테이블 셀에는 th라는 레이블이 지정되어야 합니다. 예를 들어 위에서 언급한 달력 테이블에서 주를 식별하는 "MON TUE WED... SUN" 단위는 td 대신 th를 사용해야 합니다.

h1-h6

h1-h6 태그의 경우 의미상 모든 제목 텍스트에 작동해야 합니다. 따라서 <div class="diary-title> 등 일부 작성 방법이 중복되므로 <h1>로 직접 작성하고, .diary-title 대신 h1에 대해 CSS를 직접 정의하면 같은 효과가 있지 않을까요? ​​물론, 이 규칙은 너무 엄격할 수는 없습니다. 제목 부분의 구조적 요소가 h1을 사용하는 것만으로는 해결되지 않는 경우도 있지만, 기껏해야 <h1><span></과 같은 방법을 사용합니다. span></h1> 제목을 변경하려면 성능 요구 사항을 충족하기 위해 구조가 더 복잡하게 중첩됩니다.

그러나 여기서 의미론적 불일치가 발생합니다. h1은 첫 번째 수준의 제목으로 이해되어야 합니까, 아니면 글꼴 크기가 1인 제목으로 이해되어야 합니까? 저는 보통 1차 제목으로 이해하고, 1차 제목 아래에 자막이 있는 경우에는 h2를 사용합니다. 하지만 사실 HTML 디자인 초창기를 돌이켜보면 h1~h6 이후의 숫자는 제목 텍스트의 크기를 조절하는 것으로 더 이해됩니다. h3은 세 번째 수준 제목이 아닌 크기 3 글꼴을 사용하는 데만 사용될 수 있습니다. 그렇지 않으면 모든 1단계 제목이 h1을 사용하고 모두 매우 큰 글꼴이고 CSS를 사용하여 글꼴 크기를 제어해야 하므로 매우 번거롭습니다. 그래서 이것은 토론의 문제입니다.

울 올

용어를 나열해야 할 때마다 p 대신 ul 또는 ol을 사용해야 합니다. 예를 들어, 작업 단계 지침과 같은 예방 조치와 같은 채용 광고의 직무 요구 사항입니다. 또한 널리 사용되는 사용법은 ulli를 사용하여 웹 페이지의 탐색 메뉴를 나열한 다음 CSS를 사용하여 배열을 제어하는 ​​것입니다.

li에서 ul이나 ol을 사용하여 두 번째 수준 목록을 만들 수 있다는 점을 잊지 마세요.

DL DT DD

이것은 거의 잊혀진 태그 세트이지만 Jeffrey Zeldman은 "웹사이트 리팩토링"에서의 사용을 강력히 권장합니다. dl은 "정의 목록(또는 정의 목록? 아시는 분은 알려주세요)"의 전체 이름이어야 합니다. 일반적인 사용법은 사전 항목입니다. dt에는 단어 이름을, dd에는 단어 설명을 넣습니다. alistapart.com 웹사이트는 훨씬 더 영리하여 전체 오른쪽 열을 dl로 정의하고 각 단원의 제목에 dt를 사용하고 단원의 내용에 dd를 사용합니다.

img

img 태그 자체에는 할 말이 많지 않습니다. 나는 단지 일반적인 것에 대해 이야기하고 싶습니다. 즉, 이 요소가 실제로 콘텐츠에 필요한 이미지인 경우에만 img를 사용하고 그렇지 않으면 CSS를 사용하여 스타일로 정의해야 합니다. 일러스트, 아바타, 이모티콘 등 콘텐츠에 반드시 등장해야 하는 사진이므로 img를 사용하세요. 제목의 배경 이미지, 목록 항목 앞의 작은 아이콘 등 기타 항목에는 img 태그를 사용하면 안 됩니다.

기간

이제 스팬은 div만큼 인기가 있습니다. 하지만 사실 저는 원래의 용도를 고수해야 한다고 생각합니다. 내 개인적인 이해는 범위가 원래 클래스 또는 스타일 속성을 전달하는 데 사용되었다는 것입니다. 그 자체에는 명확한 의미가 없습니다. 따라서 텍스트 흐름에서 일부 텍스트의 스타일을 변경해야 하는 경우 범위를 사용하여 이를 묶습니다. 예를 들어 빨간색으로 단어를 추가해야 하는 경우 <span class="red">를 사용합니다.

그러나 이로 인해 이전 h1에서 언급한 문제가 발생할 수 있다는 점은 주목할 가치가 있습니다. 일부 텍스트 스타일에는 실제로 <strong>, <sub> 등과 같은 이미 만들어진 태그가 있기 때문에 적절한 기회도 제공해야 합니다.

에이

a는 초연결을 제어하는 ​​레이블입니다. 그러나 우리가 그것을 사용하고 싶지 않은 특별한 경우가 있습니다. 예를 들어, 작은 창이 팝업되어야 합니다. 나는 별로 관심을 기울이지 않았지만 일부 디자이너는 "재생" 아이콘의 <img> 태그에 onclick을 직접 정의할 것이라고 생각합니다. 저는 개인적으로 img 외부에 a를 추가한 다음 a 내부에 onclick을 정의하고 js 함수 끝에 return false를 작성해야 한다고 생각합니다. 가능하다면 a 태그의 href 속성을 팝업 창의 URL과 함께 작성하여 JS가 비활성화된 경우에도 사용자가 페이지를 효과적으로 열 수 있도록 해야 합니다.

지금은 그게 전부입니다.

마지막으로 HTML 태그의 의미를 따르는 것의 중요성을 요약해 보겠습니다. 웹 표준의 요구 사항 중 하나는 낮은 수준의 호환성입니다. 사용자가 이미지, CSS 또는 JS를 비활성화하더라도 우리는 여전히 사용자가 웹 콘텐츠를 효과적으로 탐색할 수 있도록 허용할 수 있습니다. 우리 모두 알고 있듯이 필수 alt 속성은 이미지를 비활성화할 때 호환성을 고려하는 것입니다. HTML 태그의 의미를 올바르게 따르면 CSS가 비활성화된 경우 호환성이 보장됩니다. HTML 태그가 올바르게 사용되고 웹페이지가 "CSS 줄무늬"인 경우에만 사람들은 탐색 메뉴가 어디에 있는지, 기사 제목이 어디에 있는지 볼 수 있으며 달력 표가 무너지지 않습니다.