머리말
처음 인터넷 서핑을 할 때 덤 터미널을 사용했습니다. 머지않아 미네소타의 흑백 모니터는 서버를 통해 영화 '몬티 파이튼과 성배'를 재생할 수 있게 됐다. 24비트 컬러는 물론 마우스도, 좋은 사용자 인터페이스도 없었습니다. Gopher는 사용 가능한 유일한 도구입니다. 검색에는 Archie와 Veronica만 사용할 수 있습니다. W3(World Wide Web)에 대해 들어본 사람은 아무도 없었고 당시에는 웹이 적절해 보였습니다.
번역자 주:
1. 멍청한 터미널. PC와 비슷하지만 자체 CPU, 메모리, 하드 드라이브가 없습니다. 트랜잭션은 공통 호스트를 통해 처리됩니다.
2. 고퍼. FTP 전송, 원격 로그인, Archie 검색 등을 수행하여 최종 사용자에게 모든 정보를 메뉴 형식으로 표시하여 사용자가 많은 정보를 열람할 수 있도록 하는 클라이언트/서버 애플리케이션입니다. 이러한 방식으로 사용자는 인터넷 리소스에 액세스할 때 자신의 주소를 알거나 입력할 필요가 없습니다.
3.Archie는 인터넷에서 익명의 FTP 웹사이트 파일을 자동으로 색인화하는 최초의 프로그램이지만 아직 진정한 검색 엔진은 아닙니다.
4.Veronica는 Gopher 공간에서 지정된 특수 단어가 포함된 모든 메뉴 항목을 검색하는 데 사용할 수 있는 Gopher 유형 리소스입니다.
잠시 후 이상한 코드가 검색 결과에 넘쳐나기 시작했습니다. 필요한 내용을 읽을 수는 있었지만 짜증이 났습니다. 동료는 그것이 인터넷의 그래픽 언어인 HTML이라고 말했습니다. 나는 HTML을 필터링하는 몇 가지 방법을 배웠습니다. 이후 256색 모니터와 첫 번째 버전의 모자이크 브라우저가 등장하면서 모든 것이 바뀌기 시작했습니다.
그 이후로 오랜 시간이 흘렀고 기술은 놀라울 정도로 발전했으며 웹 인터페이스는 수없이 점검되고 재검토되고 재창조되었습니다. 웹 디자이너로 일하기 시작한 이래로 저는 테이블 기반 디자인의 다양한 단계, JavaScript의 문제점, CSS의 어려움, 그리고 더 중요하게는 보다 보편적으로 수용되는 웹 표준을 직접 경험했습니다.
처음에는 인터넷이 Geeks(기술광)의 생각에 따라 만들어졌을 뿐이고, 인터넷에는 배경색과 아름다운 그림만 고려되지 않았습니다. 하지만 사실 사람들은 서핑을 할 때 좀 더 풍부한 표현을 보고 싶어합니다. 테이블 디자인 방식의 등장으로 이러한 어려움을 테이블을 통해 제어할 수 있게 되었습니다! 우리 모두는 시스템을 "속이기" 시작했습니다. 1픽셀의 얇은 선을 만들 수는 없을까요? 테이블 행에 투명한 GIF 점을 삽입하고 배경색을 설정하면 끝! 글꼴을 제어할 수 없나요? 그런 다음 다른 태그 <font>를 사용하세요!
CSS와 웹 표준을 접하기 전에는 수년 동안 테이블을 사용해 디자인해 왔습니다. 웹 표준의 디자인 방식은 이전과는 완전히 다르며 효율적이고 매력적입니다. 나는 새로운 디자인 방법에 깊고 열정적으로 사랑에 빠졌습니다. 의미 있는 코드를 사용하여 레이아웃에서 콘텐츠를 분리할 수 있지만 여전히 여백과 아름다운 디자인을 유지합니다. 나는 즉시 "새 것을 좋아하고 오래된 것을 싫어"하고 더 이상 오래된 디자인 방법을 사용하지 않습니다.
오늘까지.
웹 표준과 CSS에 관해 많은 논의가 있었습니다. 모든 좋은 키워드와 마찬가지로 웹 기술 개발 역사에서 차세대 "유명 키워드"가 될 것입니다. Bowman이 Wired.com을 재설계하면서 Dougl에서 시작하여 계속해서 발전해 왔습니다. 2003년에는 Zeldman이 쓴 "Designing with Web Standards"라는 책이 출판되어 전 세계 디자이너들이 새로운 디자인 방식을 받아들이고 환호했습니다. 구조화되어 있고 의미론적이며 빠르고 가볍습니다.
그러나 여전히 전통적인 테이블 디자인 방법을 사용하고 심지어 <font> 태그를 사용하는 사람들도 있습니다. 그들은 전통적인 방법이 유지 관리 및 빠른 개발에 더 쉽고 편리하다고 말합니다. 누가 옳습니까?
상황이 어떻게 변하는지, 어떤 방법을 선택하는 것이 더 나은지 직접 실험해 보기로 했습니다.
도전
그래픽 소프트웨어를 사용하여 가상의 웹사이트를 디자인했습니다. 그런 다음 먼저 HTML4.01을 사용하여 CSS 없이 표를 사용하여 만든 다음 XHTML1.0 Transitional을 사용하여 만듭니다. 코드는 유용성과 접근성 사양을 준수하고 CSS를 사용하여 가능한 한 표를 사용하지 않습니다. (테이블이 테이블 형식 데이터를 나타내는 데 사용되지 않는 한)
제작 과정을 3단계로 나누어 그 과정을 자세히 기록하고, 장단점을 비교하여 얻은 결과를 확인해 볼까요? 무엇이 사라졌나요? 우리는 어느 편에 서야 할까요?
1단계: 사이트 디자인
나는 가상의 사이트를 디자인하기 시작했습니다. 나는 "나비 관찰자 협회"라는 조직의 웹사이트를 만들고 있다고 가정합니다. 하하, 아마도 디자인 과정에 참여하지 않을 최고의 고객일 것입니다. 전통적인 레이아웃과 권위 있는 글꼴을 사용하여 웹사이트의 대상 사용자를 상상하면서 최대한 현실적으로 만들려고 노력했습니다.
나는 사이트가 작고, 효과적이며, 간결하기를 원합니다. 그리고 페이지에 나비가 있어야 한다고 생각해서 적당한 나비 이미지를 여기저기 찾아봤고 곧 stock.xchng에서 찾았습니다. 푸른 나뭇잎 사이에 쉬고 있는 푸른 나비가 현장의 이미지와 딱 들어맞네요. 약간의 처리와 수정 후에 이 사진은 우리 페이지의 헤더가 됩니다.
디자인 과정에서 저는 몇 가지 사용성 원칙을 고수했습니다. 예를 들어, 이미지 파일 크기를 최대한 작게 유지하십시오. 처음에는 네비게이션에 Garamond 글꼴을 사용하려고 했으나 나중에 사용자의 컴퓨터에 이 글꼴이 없을 수도 있다는 점을 고려하여 Georgia 글꼴을 사용하기로 결정했습니다(이 글꼴은 Times New Roman과 유사하며 최악의 경우에는 Times New Roman 글꼴로 대체 가능) . 하지만 헤더 이미지는 이미지이기 때문에 여전히 Georgia를 사용했습니다.
텍스트는 회색 배경이고 Trebuchet MS 글꼴을 사용합니다. 뉴스는 축소해도 보기 좋은 Verdana 글꼴을 사용합니다. 디자인에 4가지 글꼴을 사용하는 암묵적인 경험 법칙이 있는데 저는 그것에 동의하지 않습니다.
두 번째 단계: "이전 방법을 사용하고 투명 GIF 이미지를 사용하여 간격을 제어합니다."
이미 여러 프로젝트에 참여한 웹디자이너라면 다음과 같은 구조가 매우 익숙할 것입니다.
<table bgcolor="#ffffff" cellpacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" Blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">여기에 콘텐츠가 표시됩니다.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
표는 가장 기본적인 "구성 요소"이기 때문에 우리는 말하기 위해 표를 사용하는 데 익숙합니다. 예를 들어 투명한 GIF 이미지를 사용하여 간격을 제어하고 테이블의 다양한 속성을 사용하여 위치를 제어합니다. 누군가는 이렇게 설명했습니다. 테이블은 신뢰할 수 있고 테이블과 함께 배치된 페이지는 이후 버전과 호환될 수 있습니다! CSS는 감히 테이블과 경쟁할 수 없으며 테이블은 모든 브라우저 등에 적합할 수 있습니다.
전체 설계 프로세스를 단계별로 재현하는 것부터 시작해 보겠습니다.
1시간
오. 시간을 거슬러 올라갈 수 있을 것 같습니다. CSS를 사용하지 않고 어떻게 배경색을 정의할 수 있을까요? 아, 그렇군요... bgcolor입니다. 팁을 주셔서 감사합니다. 자, 이제 양식 만들기를 시작하고 효과를 미리 보겠습니다. 모든 브라우저에서 중앙에 위치하도록 "align=center"를 정의했습니다. 정말 쉽습니다! 형태도 나쁘지 않고, 오랜 친구를 다시 만난 듯한 느낌도 듭니다. 전문적으로 투명한 GIF 이미지를 사용하여 간격을 조절했는데 작업이 빠르게 진행되었습니다! 친절? 헤더와 메뉴 사이에 공백이 있는 이유는 무엇입니까? 아, 알고 보니 이미지 코드 뒤에 추가 공간이 있고 IE 브라우저가 이를 표시합니다. 변경하기 쉽습니다. 공백을 삭제하면 됩니다.
2시간
저는 JavaScript를 사용하여 탐색 메뉴에 대한 반전 효과를 만듭니다.
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this) >...</td>
JavaScript는 다음과 같이 작성됩니다.
함수 chBg(obj) { obj.bgColor = "#E1E5DB"; } 함수 chBg2(obj) { obj.bgColor = "#CBD1C3" }
예전의 디자인 방식을 조금 잊어버렸다는 점을 제외하면 전체적인 진행은 상당히 빨랐습니다. 테이블의 중첩을 최대한 줄이려고 노력했지만 여전히 코드가 다소 복잡해 보이기 때문에 수정해야 할 부분을 쉽게 찾을 수 있도록 몇 가지 설명을 추가했습니다.
작은 문제가 발생했습니다. CSS를 사용하지 않으면 링크의 밑줄을 제거할 수 없습니다. 어쩌면 해결책이 있을지도 모릅니다. Google에서 검색해 보겠습니다.
3시간
Google에서 검색한 후에도 여전히 방법을 찾을 수 없습니다. 밑줄 없이 링크를 만들 수 있나요? 해결책이 있어야합니다!
4시간
IE6 이외의 브라우저에서 처음 4시간 동안의 결과를 살펴보겠습니다. 오! Firefox에서는 매우 보기 흉하지만 Opera와 Netscape에서는 괜찮아 보입니다.
5시간
계속해서 코딩하고... 디버깅하고 수정하세요.
직장에서 글꼴 크기를 제어하는 데 있어 여러 크기를 정의할 수 없다는 <font> 태그의 한계를 깨달았습니다. 젠장!
또한 뉴스 섹션의 텍스트 레이아웃에 문제가 발생했습니다. 들여쓰기를 하려면 효과를 얻기 위해 더 많은 테이블 중첩을 사용해야 했습니다. 본문에 있는 나비 그림을 본문 오른쪽에 정리하기 위해 표도 추가해서 문제를 해결해야 했습니다. 이런 종류의 "속임수" 조판은 나를 무력하게 만듭니다.
6시간
디자인이 완성되었으며 원래 디자인과 거의 동일해 보입니다. 여기를 클릭하여 살펴보실 수 있습니다.
포함된 테이블 수를 보려면 여기를 클릭하세요.
3단계: 양식이 필요하지 않습니다!
아래에서는 웹 표준을 기반으로 CSS로 레이아웃한 디자인이 무엇인지 살펴보겠습니다. 콘텐츠 식별부터 시작하겠습니다. 나는 로고를 의미있게 만들고 중복된 태그를 피하려고 노력할 것입니다.
헤더는 이미지이면서 제목이기도 하므로 다음과 같이 코드를 작성합니다.
<h1>나비 관찰자 협회. 우리는 그들을 지켜봅니다.</h1>
나중에 이 제목을 올바르게 표시하는 방법에 대해 생각해 보겠습니다(이상적으로는 내용에 최대한 신경을 쓰고 레이아웃에는 최소한 신경을 쓰는 것이 좋습니다). 다른 제목(뉴스, 목격, 회원)은 <h2>로 식별됩니다.
메뉴는 기본적으로 순서가 없는 목록(list)이므로 목록으로 식별하게 됩니다. 단락은 분류될 필요가 없습니다(상속 선택기를 사용하여 단락을 포함 레이어에 "걸어" 놓았습니다). 레이아웃을 달성하기 위해 추가해야 하는 추가 태그 수를 확인하기 위해 원본 콘텐츠 텍스트와 비교할 것입니다(가능한 한 태그를 추가하지 않도록 노력하겠습니다).
내용 원문입니다. 원본 코드를 살펴보면 xhtml1.0 전환 사양을 준수합니다. 모든 요소는 정의된 이름으로 <div> 내에 이미 포함되어 있습니다. 뉴스에 나온 날짜도 날짜 클래스에 추가되었습니다. 코드가 매우 간단하다는 것을 알 수 있습니다.
1시간
"컨테이너" 레이어의 테두리를 1px로 정의합니다. 본문 스타일에 "text-align: center"를 정의하여 콘텐츠를 중앙에 배치합니다. 모든 브라우저에서 중앙에 배치하기 위해 margin: 0 auto; (상단=0, 오른쪽=자동, 하단=0, 왼쪽=자동을 의미)도 "컨테이너"에 정의되어 있습니다. 센터링은 테이블과 마찬가지로 쉽게 수행할 수 있습니다.
"body"의 패딩 "상단" 및 "하단" 값을 20px로 정의합니다("컨테이너"에서 패딩을 직접 정의하지 않는 것은 모든 브라우저에 적합함).
정렬되지 않은 목록(li)을 "display:inline"으로 정의해야 메뉴가 한 줄에 표시됩니다. 메뉴 사이에 탐색 아이콘을 추가했습니다. 이러한 탐색 아이콘은 다음과 유사하게 (x, y) 위치를 정확하게 정의할 수 있는 비반복 배경 방법을 사용하여 정의됩니다.
background: url(menuBullet2.gif) no-repeat 4px 9px; 메뉴의 클릭 색상 변경 효과는 링크의 호버 스타일을 채택하므로 더 이상 JavaScript가 필요하지 않습니다.
페이지 상단의 나비 이미지를 <h1>의 배경으로 설정하여 사용 편의성을 걱정하지 않고, 이미지를 표시할 수 없는 장치(화면 등)에서도 제목을 정상적으로 읽을 수 있도록 했습니다. 독자와 검색 로봇).
2시간
메뉴의 첫 번째 항목(HOME)은 다른 아이콘을 사용하므로 원래 배경을 숨기고 HOME 메뉴에 추가 ID(첫 번째)를 추가해야 했습니다.
#hMenu ul li #frst
다른 (연락처) 아이콘:
background: transparent url(menuBullet3.gif) no-repeat 615px 9px; CSS를 사용하여 두 열의 높이를 동일하게 설정할 수는 없습니다. 다행히 배경 이미지를 사용하여 문제를 해결할 수 있습니다. 배경을 수직으로 반복하는 "컨테이너"를 정의했습니다.
배경: #fff url(bgMain.gif) 반복-y;
3시간
CSS 정의 상자는 테이블보다 훨씬 편리하며, 특히 테두리의 많은 속성은 매우 유용합니다.
이제 <h2> 헤더 정의를 시작합니다. 아이콘의 정의는 위와 동일합니다.
"뉴스" 레이어를 "목격" 및 "회원" 오른쪽에 띄웁니다. 플로팅 레이어 뒤에 오도록 "clear:both;"로 "저작권" 레이어를 정의합니다. 나비 그림을 텍스트 오른쪽에 띄우면 텍스트가 자동으로 그림 주위를 둘러쌀 수 있습니다. 이미지의 테두리를 1px로 정의하고 패딩 거리를 설정하면 원본 두 테이블의 중첩 효과를 얻을 수 있습니다.
몇 가지 문제가 발견되었습니다. 저작권 레이어와 콘텐츠 레이어가 부분적으로 겹칩니다.
4시간
표시된 오류는 "sightings" 및 "membership"의 float:right; 정의와 관련되어 있습니다. 왼쪽으로 플로팅하면 이상해 보이는 이 문제가 해결됩니다. 첫 번째 테스트에서는 Firefox를 사용했습니다. 메뉴 아이콘이 몇 픽셀씩 이동한 것 외에는 나쁘지 않은 것 같습니다.
브라우저마다 다른 속성 값을 부여하는 등 IE가 아닌 브라우저에서 표시 효과를 수정할 수 있는 CSS 기술이 있습니다.
동일한 요소의 정의에 !important 값을 사용했습니다. 앞에 작성된 동일한 정의는 IE 브라우저에서 지원되지 않습니다.
배경: url(menuBullet2.gif) 반복 없음 4px 6px !important;
배경: url(menuBullet2.gif) 반복 없음 4px 9px;
CSS에서는 동일한 요소에 대해 여러 정의가 있는 경우 마지막 정의가 유효합니다. 그러나 IE는 !important를 지원하지 않기 때문에 IE는 두 번째 정의된 값을 사용하고 다른 브라우저는 첫 번째 정의된 값을 사용합니다.
모두 완료되었습니다. 여기에서 결과를 확인하세요.
결론적으로
테이블 기반 디자인
Linux, Windows 및 Macintosh 플랫폼용 브라우저를 포함하여 찾을 수 있는 모든 브라우저를 사용하여 페이지를 테스트했습니다. 테이블 레이아웃 페이지는 다른 브라우저에서도 동일하게 보입니다. "바위처럼 단단하다"는 것이 테이블 레이아웃에 대한 첫 번째 설명입니다.
그러나 페이지 내용의 일부를 수정해야 하는 경우 테이블 레이아웃을 변경하는 것은 상당히 힘든 작업입니다. 이것이 문제입니다. CMS(콘텐츠 관리 시스템)를 사용하면 콘텐츠의 형식을 지정하는 것이 번거롭습니다.
예전 방법을 잊어버려서 전체 디자인 시간이 좀 길어요. 다시 하면 1~2시간은 절약될 수 있을 것 같아요.
나는 테이블 기반 디자인을 "힘든 작업"이라고 표현하지만 고급 디자인 기술에 종종 놀랐습니다. 순수 CSS를 기반으로 한 디자인에서는 일반적으로 디자인을 분해하고 버그를 단계별로 분석하는 데 익숙합니다. 그러나 테이블 디자인을 사용하는 데에는 이 작업이 필요하지 않습니다. 단지 디자인에 테이블을 계속 추가하기만 하면 됩니다. CSS 프로세스를 다시 살펴보겠습니다.
CSS 기반 디자인
CSS로 디자인하는 것이 훨씬 더 좋습니다. 코드 변경은 직접적이고 투명하며 전체 프로세스를 명확하게 제어할 수 있습니다. 반면 테이블 디자인은 벽돌을 쌓는 것과 같습니다. 페이지의 변화가 클수록 CSS 디자인은 더욱 편리하고 효율적이 됩니다.
CSS 디자인은 대역폭을 절약하는 데에도 매우 의미가 있습니다. 모든 스타일을 별도의 파일로 추출하고 전체 사이트에 대해 하나 또는 여러 개의 스타일 시트 파일을 사용하면 전체 사이트를 더 작게 만들 수 있습니다.
콘텐츠에서 레이아웃 정보를 분리하면 많은 이점도 얻을 수 있습니다. 앞으로는 CSS Zen Garden처럼 아무 것도 바꾸지 않고 언제든지 전체 사이트를 개편할 수 있습니다. 또한 사용 편의성이 향상되어 검색 로봇이 귀하의 페이지를 더 쉽게 찾을 수 있습니다(기억하세요: Google은 방문자의 가장 중요한 소스입니다).
CSS 기반 디자인에 익숙해지면 작업 효율성은 매우 높지만 규칙, 박스 모델의 차이점, 브라우저 처리 기술 및 많은 이론을 배우는 데 많은 시간을 투자해야 하며 숙달하려면 지속적인 연습이 필요합니다. . 간단히 말해서 CSS는 테이블보다 간단하지만 순수 CSS를 사용하여 디자인하려면 CSS를 배우는 데 많은 시간을 투자할 준비를 하십시오. 숙련된 개발자라도 다양한 버그를 처리할 준비가 되어 있어야 합니다. 때로는 버그를 처리하는 데 몇 시간이 걸릴 수도 있습니다.
우승자
CSS와 웹 표준 기반 디자인이 승리합니다. 두 가지 방법에 대한 코드를 보는 것만으로도 선택이 가능합니다. CSS는 (주로 사용 편의성 측면에서) 더 많은 이점을 제공합니다. 사실 근본적인 이유는 나의 게으름이다. 내가 테이블 디자인을 사용했는데 1년 뒤에 클라이언트가 수정이 필요하다고 연락이 오면 나는 군대에 가서 외국에 있다고 말할 수도 있다. CSS를 사용하고 있다면 바퀴를 다시 만들 필요가 없기 때문에 다시 생각할 필요 없이 클라이언트를 위해 CSS를 변경할 것입니다.