테이블리스 웹디자인

Tableless web design
캐스케이드 스타일 시트
개념
철학
도구들
비교

테이블리스 웹 설계(또는 테이블리스 웹 레이아웃)는 페이지 레이아웃 제어 목적으로 HTML 테이블을 사용하지 않는 웹 설계 방법입니다.HTML 테이블 대신 CSS(Cascading Style Sheets)와 같은 스타일시트 언어를 사용하여 웹 페이지의 요소 및 텍스트를 정렬합니다.

역사

HTML은 처음에 사용자에게 시각적 표시가 맡겨진 마크업 언어입니다.그러나 1990년대 중반에 인터넷이 학계와 연구계에서 주류로 확장되고 미디어 지향적이 되면서 그래픽 디자이너들은 웹 페이지의 시각적 외관을 제어하는 방법을 모색했다.특히 디자이너 David Siegel이 그의 책 Creating Killer Web 사이트에서 널리 알려진 바와 같이 테이블과 스페이서(일반적으로 너비, 높이 또는 여백이 명시적으로 지정된 투명한 단일 픽셀 GIF 이미지)를 사용하여 페이지 [1]레이아웃을 만들고 유지했습니다.

1990년대 후반, 최초의 상당히 강력한 WYSIWYG 편집기가 시장에 출시되었고, 이는 웹 디자이너들이 웹 [2]페이지를 만들기 위해 HTML에 대한 기술적인 이해가 더 이상 필요하지 않다는 것을 의미했다.이러한 편집자들은 간접적으로 설계 요소를 배치하기 위해 중첩된 표를 광범위하게 사용할 것을 권장했다.설계자가 편집기에서 문서를 편집할 때, 불필요한 코드와 빈 요소가 문서에 추가되었습니다.또한, 숙련된 디자이너가 WYSIWYG 편집기를 사용할 때 필요한 것보다 더 많은 테이블을 사용할 수 있습니다.이러한 관행으로 인해 불필요한 행과 열이 있는 테이블뿐만 아니라 테이블 내에 중첩된 테이블이 많이 생겨났습니다.HTML 및 이미지를 직접 출력하는 슬라이싱 툴과 그래픽 에디터를 사용하는 것도 종종 테이블이 1픽셀 높이 또는 너비의 많은 행을 가지고 있는 불량 코드를 조장했습니다.때로는 실제 컨텐츠 자체보다 더 많은 코드 행이 컨텐츠를 렌더링하는 데 사용되기도 했습니다.

레이아웃을 위해 테이블에 의존하기 때문에 많은 문제가 발생했습니다.대부분의 웹 페이지는 테이블 내에 네스트된 테이블로 설계되었기 때문에 포맷이 단순한 문서보다 더 많은 대역폭을 사용하는 대형 HTML 문서가 생성되었습니다.또, 예를 들면, 화면 리더나 검색 엔진에 의해서 해석되었을 때에, 테이블 베이스의 레이아웃을 리니어라이즈 했을 때에, 컨텐츠의 순서가 다소 혼란스럽고 혼란스러울 수 있다.

CSS(Cascading Style Sheet)는 디자인과 콘텐츠의 분리를 개선하고 웹상의 콘텐츠의 의미적 조직으로 돌아가기 위해 개발되었습니다."테이블리스 설계"라는 용어는 페이지에 HTML 요소를 배치하기 위해 레이아웃 테이블이 아닌 CSS를 사용하는 것을 의미합니다.HTML 테이블은 웹 [3]페이지 내에서 표 형식의 정보를 표시할 때 여전히 정당한 위치를 차지하고 있으며, 요소의 수직 중심 배치와 같이 CSS 지원이 불충분하거나 문제가 있는 상황에서는 레이아웃 디바이스로도 사용될 수 있습니다.테이블이 아직 사용되고 있는 또 다른 영역은 이메일러입니다.이는 많은 인기 있는 이메일클라이언트가 최신 HTML 및 CSS 렌더링을 따라잡지 못했기 때문입니다.이러한 시나리오에서 복잡한 이메일 사용자는 구조 및 창의적 정렬을 일부 상실합니다.

도입

CSS1 사양은 W3C에[4] 의해 1996년 12월에 공개되었으며 웹 접근성을 개선하고 스타일 시트의 프레젠테이션 세부사항과 HTML 문서의 의미적 내용을 분리하는 것을 강조하기 위해 작성되었습니다.1998년 5월 CSS2(나중에 CSS 2.1 및 CSS 2.2에서 개정)는 위치 결정 및 테이블 레이아웃을 위한 기능을 갖춘 CSS1을 확장했습니다.

웹 페이지 전체의 레이아웃을 제어하기 위해 CSS가 아닌 HTML 테이블을 사용하는 것을 선호하는 이유는 다음과 같습니다.

  • 컨텐츠 퍼블리셔가 자사의 웹 사이트에 기존의 기업 디자인 요소를 복제하고 싶은 욕구
  • 브라우저에서 CSS 지원 시 제한 사항
  • CSS를 지원하지 않는 브라우저 설치 기반
  • 새로운 웹 디자이너의 CSS 표준 지식 부족
  • 의도된 레이아웃을 신속하게 달성하기 위해 인식된 방법 대신 CSS를 사용해야 하는 이유(HTML 의미론 및 웹 접근성 포함)에 대한 지식 또는 우려의 결여
  • WYSIWYG 웹 디자인 툴의 신품종입니다.

CSS 기반 레이아웃 채택의 랜드마크로는 2001년 2월 Web Standards Project의 브라우저 업그레이드 캠페인, 웹 디자인 잡지 A List Apart의 동시 재설계를 들 수 있으며,[5] 2002년 와이어드 재설계를 들 수 있습니다.2003년에 개설된 CSS Zen Garden 웹사이트는 테이블리스 [6]레이아웃을 대중화한 것으로 알려져 있다.

근거

HTML 테이블의 의도적이고 의미적인 목적은 페이지를 [8]배치하는 것이 아니라 표 형식의[3][7] 데이터를 표시하는 데 있습니다.페이지 레이아웃에 CSS를 사용하면 다양한 사용자 에이전트를 사용하여 다양한 사용자가 정보에 접근할 수 있게 됩니다.의미상 의미가 없는 다수의 대역폭이 절약됩니다.<table>,<tr>그리고.<td>태그는 수십 개의 페이지에서 삭제되어 더 적은 수의 표제, 단락 및 목록이 남습니다.레이아웃 명령은 사이트 전체의 CSS 스타일시트로 전송되며, 각 방문자가 사이트를 탐색하는 동안 한 번 다운로드하여 재사용할 수 있습니다.특정 CSS의 마크업을 변경하는 것만으로 사이트 전체의 스타일링이나 브랜드 변경이 가능해져, 그 스타일시트에 의존하는 모든 페이지에 영향을 줄 수 있기 때문에,기존 CSS에 의해 일관성 있는 레이아웃 규칙이 즉시 적용되도록 새로운 HTML 콘텐츠를 추가할 수 있습니다.

이점

접근성

주요 기사:웹 접근성 및 검색 엔진 최적화

인터넷의 급속한 성장, 장애차별법의 확대, 휴대전화나 PDA의 사용의 증가로 인해 웹 콘텐츠는 비교적 균일한 데스크톱 컴퓨터나 CRT 모니터 생태계를 넘어 다양한 기기를 조작하는 사용자가 이용할 수 있도록 해야 한다.이 점에서 테이블리스 웹 디자인은 웹 접근성을 크게 향상시킵니다.표면이 너무 넓어 화면을 전체적으로 읽으려면 옆으로 스크롤해야 하지만 텍스트는 둘레로 감길 수 있기 때문입니다.

스크린 리더와 점자 디바이스는 논리적인 구조를 따르기 때문에 테이블리스 디자인에 문제가 적다.대부분의 웹 사이트 퍼블리셔가 페이지를 찾아 정확하게 분류하여 사용자가 적절한 검색에서 쉽게 찾을 수 있도록 하는 소프트웨어 에이전트인 검색 엔진 웹 크롤러도 마찬가지다.

설계(CSS)와 구조(HTML)의 분리에 따라 핸드헬드, 휴대전화 등 다양한 기기에 다른 레이아웃을 제공할 수도 있다.다른 인쇄 스타일시트를 지정할 수도 있습니다.예를 들어, 인쇄 가능한 버전의 페이지에서 불필요한 광고나 네비게이션 요소의 외관을 숨기거나 수정할 수도 있습니다.

W3C의 Web Content Accessibility Guidelines 3번 가이드라인은 "마크업과 스타일시트를 사용하고 적절하게 [9]한다"고 명시되어 있다.이 가이드라인의 체크포인트 3.3(우선순위 2)에는 "스타일 시트를 사용하여 레이아웃과 [10]프레젠테이션을 제어한다"고 되어 있다.

대역폭 절약

테이블리스 설계에서는 콘텐츠 배치에만 사용되는 HTML 태그 수가 적은 웹 페이지를 생성합니다.이것은, 통상, 다운로드하는 페이지 자체가 작아지는 것을 의미합니다.이 철학은 레이아웃과 배치에 관한 모든 지침을 외부 스타일 시트로 이동시키는 것을 암시합니다.HTTP의 기본 기능에 따르면 이러한 기능은 거의 변경되지 않고 많은 웹 페이지에 공통적으로 적용되므로 첫 번째 다운로드 후 캐시되고 재사용됩니다.이것에 의해,[11][12] 사이트 전체의 대역폭과 다운로드 시간이 한층 더 단축됩니다.

유지 보수성

웹 사이트를 유지하려면 사이트의 목적에 따라 웹 사이트의 시각적 스타일을 소규모 또는 대규모로 자주 변경해야 할 수 있습니다.테이블 기반 레이아웃에서 레이아웃은 HTML 자체의 일부입니다.따라서 HTML 에디터 등의 템플릿 기반 비주얼 에디터의 도움 없이 사이트 전체에서 요소의 위치 레이아웃을 변경하는 것은 반복적인 변경의 양에 따라 상당한 노력이 필요할 수 있습니다.sed 또는 이와 유사한 글로벌 검색 및 교환 유틸리티를 사용해도 문제를 완전히 완화할 수 없습니다.

CSS를 사용한 테이블리스 레이아웃에서는 레이아웃 정보가 CSS 문서에 존재할 수 있습니다.레이아웃 정보가 일원화되어 있을 가능성이 있기 때문에 이러한 변경은 디폴트로 신속하고 글로벌하게 실시할 수 있습니다.레이아웃을 변경할 때 HTML 파일 자체를 조정할 필요가 없습니다.

또한 레이아웃 정보는 HTML 외부에 저장될 수 있기 때문에 기존 페이지를 수정하든 새로운 페이지를 추가하든 테이블리스 설계로 새로운 콘텐츠를 추가하는 것이 매우 쉬울 수 있습니다.반면, 이러한 설계가 없으면 각 페이지의 레이아웃은 각 인스턴스를 수동으로 변경하거나 글로벌 검색 및 교체 유틸리티를 사용해야 할 수 있습니다.그러나 사이트 소유자는 종종 단기간 또는 장기간에 걸쳐 특정 페이지가 사이트의 다른 페이지와 달라지기를 원합니다.따라서 해당 페이지를 위해 별도의 스타일시트를 작성해야 하는 경우가 많습니다.그러나 일반적으로 페이지(또는 템플릿) 내용은 변경되지 않은 상태로 유지될 수 있습니다. 이는 테이블 기반 설계에서는 해당되지 않습니다.

단점들

CSS는 캐시할 수 있기 때문에 변경이 이루어지고 클라이언트가 오래된 스타일시트를 계속 사용하고 있는 경우 CSS 기반의 레이아웃 전체가 올바르게 렌더링되지 않을 수 있습니다.캐시버스터 기술을 신중하게 개발하고 사용하면 이 문제를 완화할 수 있습니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ Gruber, Jordan S. (1997-02-01). "Outta Site". Wired.
  2. ^ Maas, Benard. "A Brief History of WYSIWYG Editors". 1PMWD. Retrieved 10 February 2015. Microsoft Office FrontPage was released as a bundle of the 1997 version of the Microsoft Office, it was the first time that a robust, commercial HTML WYSIWYG editor-and-publisher was available for every person to use... When a webpage built out of the WYSIWYG MS FrontPage software would run with a backend FPSE in place it would enjoy the full strength that a technologist could possibly build by writing HTML code from scratch. Web designers no longer needed a technical understanding of HTML to build web pages.
  3. ^ a b Jennifer Kyrnin. "Tables for Tabular Data — What is Tabular Data? When to Use Tables in a Standards-Based XHTML Document". About.com, a part of The New York Times Company. Retrieved 2009-10-22.
  4. ^ Lie, Håkon Wium; Bos, Bert (1996-12-17). "W3C Recommendation: Cascading Style Sheets, Level 1". W3C. Archived from the original on 1997-06-05. Retrieved 2019-04-19.
  5. ^ Zeldman, Jeffrey (2003-05-14). Designing With Web Standards (1st ed.). Indianapolis: New Riders. pp. 120-134. ISBN 978-0-7357-1201-0.
  6. ^ Zeldman, Jeffrey (2007). Designing with Web Standards (2nd ed.). Berkeley: New Riders. p. 137. ISBN 978-0-321-38555-0.
  7. ^ "17.2.1 Anonymous table objects". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. 2009. Retrieved 2009-10-23.
  8. ^ Dominique Hazaël-Massieux (2005). "Tableless layout HOWTO". W3C. Retrieved 2007-09-08.
  9. ^ "Web Content Accessibility Guidelines 1.0". W3C. 1999. Retrieved 2009-09-19. Guideline 3. Use markup and style sheets and do so properly.
  10. ^ "Techniques for Web Content Accessibility Guidelines 1.0". W3C. 2000. Retrieved 2009-09-19. Use style sheets to control layout and presentation.
  11. ^ Daniel M. Frommelt (2003). "Retooling Slashdot with Web Standards". A List Apart Magazine. Retrieved 2009-09-20.
  12. ^ Dan Shafer (2003). "HTML Utopia: Designing Without Tables Using CSS, Chapter 4: CSS Website Design". SitePoint Pty. Retrieved 2009-09-20. ...on top of the organizational advantages described above, the browser has less code to download. On heavily designed sites, or sites with hundreds of pages or more, this reduced download time can have a significant impact both on the user experience, and on your bandwidth costs.

외부 링크