특히 테이블을 사용하여 멋진 웹 페이지 레이아웃을 만드는 데 익숙한 경우 CSS 레이아웃을 작성하는 방법이 까다로울 수 있습니다. HTML5는 레이아웃 테이블을 허용하지만 좋은 아이디어는 아닙니다.
테이블에 액세스 할 수 없습니다.
검색 엔진과 마찬가지로 대부분의 화면 판독기는 웹 페이지를 HTML에 표시된 순서대로 읽으며 화면 판독기가 구문 분석하기가 매우 어려울 수 있습니다. 이는 테이블 레이아웃의 내용이 왼쪽에서 오른쪽 및 위에서 아래로 읽을 때 선형이더라도 항상 의미가 없기 때문입니다. 또한 중첩 테이블을 사용하면 테이블 셀에 다양한 범위가 있으므로 페이지를 파악하기가 어려울 수 있습니다.
이것이 HTML5 사양에서 레이아웃에 대한 테이블과 HTML 4.01에서 레이아웃을 허용하지 않는 이유를 권장하는 이유입니다. 액세스 가능한 웹 페이지를 사용하면 더 많은 사람들이이를 사용할 수 있으며 전문 디자이너의 표시가됩니다.
CSS를 사용하면 섹션을 페이지의 왼쪽에 속한 것으로 정의 할 수 있지만 마지막으로 HTML에 배치 할 수 있습니다. 그런 다음 화면 판독기와 검색 엔진은 모두 중요 부분 (내용)을 먼저 읽고 덜 중요한 부분 (탐색)을 마지막으로 읽습니다.
테이블이 까다 롭습니다.
웹 편집기를 사용하여 테이블을 만들더라도 웹 페이지는 여전히 복잡하고 유지 관리가 어려울 것입니다. 가장 간단한 웹 페이지 디자인을 제외하고 대부분의 레이아웃 테이블은 많은 특성과 중첩 테이블을 필요로합니다.
테이블을 만드는 것은 쉬운 일이긴하지만 일을 마친 후에는 유지해야합니다. 6 개월이 지나면 왜 테이블을 중첩했는지 또는 얼마나 많은 셀이 연속으로 있는지 등을 기억하기가 쉽지 않을 수 있습니다. 말할 것도없이 웹 페이지를 팀 구성원으로 유지 관리하는 경우 참여한 모든 사람에게 테이블 작동 방법을 설명하거나 변경해야 할 때 추가 시간이 필요할 것으로 예상해야합니다.
CSS는 복잡 할 수도 있지만 프레젠테이션을 HTML과 별도로 유지하므로 장기적으로 유지 관리가 훨씬 쉬워집니다. CSS 레이아웃을 사용하면 하나의 CSS 파일을 작성하고 모든 페이지 스타일을 그 방식으로 볼 수 있습니다. 그런 다음 사이트의 레이아웃을 변경하려면 CSS 파일을 하나만 변경하면 전체 사이트가 변경되므로 한 번에 모든 페이지를 한 번에 하나씩 검토하여 레이아웃을 업데이트 할 수있는 표를 업데이트 할 필요가 없습니다.
테이블이 유연하지 않음
백분율 너비의 테이블 레이아웃을 만들 수는 있지만로드 속도가 느리며 레이아웃 모양이 크게 달라질 수 있습니다. 그러나 테이블에 대해 지정된 너비를 사용하면 자신과 다른 크기의 모니터에서는 모양이 좋지 않은 매우 까다로운 레이아웃이 생깁니다.
많은 모니터, 브라우저 및 해상도에서보기 좋은 유연한 레이아웃을 만드는 것은 비교적 쉽습니다. 실제로 CSS 미디어 쿼리를 사용하면 크기가 다른 화면에 대해 별도의 디자인을 만들 수 있습니다.
중첩 된 테이블 같은 디자인에 대한 CSS보다 느리게로드
테이블을 사용하여 멋진 레이아웃을 만드는 가장 일반적인 방법은 테이블을 "중첩"하는 것입니다. 즉, 하나 이상의 테이블이 다른 테이블에 배치됩니다. 중첩 된 테이블이 많을수록 웹 브라우저가 페이지를 렌더링하는 데 더 오래 걸립니다.
대부분의 경우 테이블 레이아웃은 CSS 디자인보다 더 많은 문자를 사용하여 만듭니다. 그리고 문자 수가 적 으면 다운로드가 적습니다.
테이블은 검색 엔진 최적화를 해칠 수 있습니다.
가장 일반적인 테이블 생성 레이아웃에는 페이지 왼쪽에 탐색 모음이 있고 오른쪽에는 기본 내용이 있습니다. 표를 사용하는 경우 HTML에 표시되는 첫 번째 콘텐츠가 왼쪽 탐색 바이어야합니다 (일반적으로). 검색 엔진은 콘텐츠를 기반으로 페이지를 분류하고 많은 엔진은 페이지 상단에 표시된 콘텐츠가 다른 콘텐츠보다 중요하다고 판단합니다. 따라서 왼쪽 탐색 기능이있는 페이지가 먼저 탐색 기능보다 중요하지 않은 것으로 보입니다.
CSS를 사용하면 중요한 내용을 HTML에 먼저 넣은 다음 CSS를 사용하여 디자인에 배치해야 할 위치를 결정할 수 있습니다. 즉, 검색 엔진은 디자인이 페이지의 아래쪽에 위치하더라도 중요한 내용을 먼저 볼 수 있습니다.
테이블이 항상 잘 인쇄되지는 않습니다.
많은 테이블 디자인은 프린터가 너무 넓기 때문에 잘 인쇄되지 않습니다. 따라서 브라우저를 맞추기 위해 테이블을 잘라내어 아래 섹션을 인쇄하면 페이지가 매우 엉망이됩니다. 때로는 괜찮아 보이는 페이지로 끝나기도하지만 전체 오른쪽이 누락되었습니다. 다른 페이지는 여러 시트의 섹션을 인쇄합니다.
CSS를 사용하면 페이지 인쇄용으로 별도의 스타일 시트를 만들 수 있습니다.
HTML 4.01에서 레이아웃 테이블이 잘못되었습니다.
HTML 4 사양은 다음과 같이 설명합니다. "비 시각적 미디어로 렌더링 할 때 문제가 발생할 수 있으므로 문서 내용을 레이아웃하는 수단으로 테이블을 사용해서는 안됩니다."
따라서 유효한 HTML 4.01을 작성하려는 경우 레이아웃 용 테이블을 사용할 수 없습니다. 표 형식의 데이터에 대해서만 표를 사용해야하며 표 형식의 데이터는 일반적으로 스프레드 시트 나 데이터베이스에 표시 될 수있는 것처럼 보입니다.
그러나 HTML5는 규칙을 변경 했으므로 레이아웃 용 테이블은 권장되지 않지만 유효한 HTML로 간주됩니다. HTML5 사양에는 "테이블을 레이아웃 보조로 사용해서는 안됩니다." 앞서 언급했듯이 화면 판독기가 구별하기가 어려운 레이아웃 표가 있기 때문입니다.
CSS를 사용하여 페이지를 배치하고 레이아웃하는 것은 표를 만드는 데 사용한 디자인을 HTML 4.01에서 가져 오는 유일한 방법이며 HTML5는이 방법을 강력하게 권장합니다.
레이아웃 테이블은 직업 전망에 영향을 미칠 수 있음
점점 더 많은 새로운 디자이너들이 HTML과 CSS를 배우게됨에 따라 테이블 레이아웃을 구성하는 기술은 점점 줄어들 것입니다. 예, 고객이 일반적으로 웹 페이지를 작성하는 데 사용해야하는 정확한 기술을 말하지는 않지만 다음과 같은 요청을하는 것은 사실입니다.
- 액세스 가능한 웹 페이지: 스크린 리더가 볼 수있는 디자인은 많은 국가에서 의무화되고 있으며 기업은 매일 더욱더 중요한 접근성을 발견합니다.
- 유지할 수있는 웹 페이지: 앞으로도 유지하지 않을 경우에도 함께 할 수있는 디자인.
- 유연한 디자인: 많은 브라우저, 해상도 및 장치에서 작동하는 디자인.
- 빠른 다운로드 페이지: SEO에게조차도 속도는 점점 더 중요 해지고 있습니다.
- 인쇄 가능한 디자인: 특별한 스크립트 나 추가 페이지없이 인쇄하는 페이지.
고객이 요구하는 것을 전달할 수 없다면, 그들은 디자인을 위해 당신에게 오는 것을 멈추게됩니다. 1990 년대 후반부터 사용 되어온 기술을 배우고 통합하려는 의도가 없으므로 사업에 어려움을 겪게 할 수 있습니까?
도덕 : CSS 사용법 배우기
CSS는 배우기 어려울 수 있지만, 가치있는 모든 것이 효과적입니다. 기술이 정체되지 않도록하십시오. 레이아웃을위한 CSS를 사용하여 CSS를 배우고 웹 페이지를 빌드하는 방식대로 웹 페이지를 구성하십시오.
