DIV 대 테이블 또는 CSS 대 바보됨
테이블이 테이블 형식 데이터용이라는 것을 알고 있지만 레이아웃에 사용하고 싶은 유혹이 많습니다. DIV를 처리하여 3열 레이아웃을 얻을 수 있지만 4개의 중첩 DIV가 있으면 까다로워집니다.
레이아웃에 DIV를 사용하도록 설득하는 튜토리얼/참조가 있습니까?
DIV를 사용하고 싶지만 DIV/SPAN을 원하는 위치에 배치하는 데 한 시간을 할애하는 것을 거부합니다.
@GaryF: Blueprint CSS 는 CSS에서 가장 잘 지켜지는 비밀이어야 합니다.
훌륭한 도구 - Blueprint Grid CSS Generator .
모든 종류의 작업을 수행할 수 있는 Yahoo Grid CSS 가 있습니다.
그러나 기억하십시오: CSS는 종교가 아닙니다 . CSS 대신 테이블을 사용하여 시간을 절약하려면 그렇게 하십시오.
내가 결코 마음을 정할 수 없는 코너 케이스 중 하나는 양식입니다. CSS로 하고 싶지만 테이블보다 훨씬 더 복잡합니다.
양식에 헤더(레이블)와 데이터(입력 필드)가 있다는 점에서 양식이 테이블이라고 주장할 수도 있습니다.
영국과 미국에는 테이블보다 CSS 레이아웃을 선호하는 법적 요구 사항이 있습니다. 섹션 508(미국)과 장애 차별법(영국)은 시각 장애가 있는 사용자를 위한 접근성 표준을 다룹니다.
영국에서 법률은 부분적으로 시력이 있는 사용자의 능력을 방해하는 사이트를 상업적으로 생산하는 것을 실제로 불법으로 만들 정도로 확장됩니다. 휠체어 사용자가 입장할 수 있도록 - 웹사이트 접근성에 대한 기소는 아직 없습니다. 그러나 사이트 디자인이 장기적으로 유지 관리하기 훨씬 쉽다는 의미이므로 항상 CSS를 사용합니다.
CSS(W3C 학교와 .Net Magazine http://www.netmag.co.uk 사용)를 배우는 데 시간을 투자 하면 효과가 있을 것입니다.
레이아웃용 테이블이 어리석은 이유: 문제가 정의되고 솔루션이 제공됩니다 .
제 생각에는 편견이 IE6보다 CSS를 선호해야 합니다. 즉, 엄청나게 합당한 이유가 없는 한(예: 귀하의 사이트가 IE6을 사용하는 사람들만 대상으로 하는 것이 이상 할 것입니다 ), 오히려 IE6을 사용하는 사람들을 '소외'하는 것이 좋습니다 시력이 좋지 않은 사람 및/또는 자동화된 사용자 에이전트보다 IE6의 사용이 감소하고 있습니다. 후자 그룹의 수가 증가하고 있습니다. 귀하의 사이트가 IE6에서 완벽해 보이지 않더라도 테이블 기반 레이아웃이 사이트를 볼 수 없는 사용자보다 해당 사용자가 쉽게 읽을 수 있습니다.
이것은 매우 일반적인 질문이므로 구체적으로 답변하기가 어렵습니다. 훌륭한 자료가 되는 두 권의 책은 다음과 같습니다.
전체 사이트 레이아웃을 디자인하는 데 한 시간만 투자해야 한다면 나쁘지 않습니다.
CSS는 종교가 아닐 수 있지만 브라우저가 레이아웃을 위해 HTML을 해석하는 방식입니다. 좋든 싫든 모든 최신 브라우저는 W3C 박스 모델(일부 버전)을 사용합니다. 계속해서 테이블에 의존하는 것은 웹 렌더링 기술을 설계하는 사람들의 눈에는 완전히 잘못된 방법론에 계속 의존하는 것입니다.
CSS가 때때로 엄청나게 복잡해 보일 수 있다는 것을 압니다. 그러나 저는 이것이 오늘날과 시대에 필수라고 믿습니다(저를 믿으십시오. 귀하의 고객이 원할 것입니다).
시간을 들여 CSS를 배우는 것이 불편하다면(따라서 요소를 배치하는 데 몇 초 또는 몇 분이 소요됩니다...한 시간이 아님), 레이아웃 작업을 전면을 아는 사람에게 전달해야 합니다. 끝.
예, CSS의 현재 브라우저 구현에는 많은 문제가 있지만 테이블 기반 레이아웃으로 돌아가야 할 필요성을 느낄 만큼 과격한 것은 없습니다. 다른 언어나 프레임워크처럼 앉아서 시간을 내어 배우십시오.
내가 찾은 최고의 온라인 참조 리소스는 다음과 같습니다. http://reference.sitepoint.com/css
그러나 Designing With Web Standards와 같은 책을 보면 이것이 왜 중요한지 이해하는 데 많은 도움이 됩니다.
또한 YAML (Yet Another Multicolumn Layout)을 보기 전까지 Blueprint가 훌륭하다고 생각했습니다 . 가 온라인 빌더 도구 환상적이다. 5분 이내에 멋진 여러 열 레이아웃을 얻을 수 있습니다.
잠시 후 당신은 그것에 대해 생각조차하지 않습니다. CSS와 함께 div를 사용하는 것이 더 쉬운 옵션인 것 같습니다. 또한 jQuery와 같은 프레임워크를 사용할 때 더 많은 자유가 있습니다. CSS 또는 div를 사용하지 않고 멋진 jQuery 작업을 수행하는 것은 상상할 수 없었습니다. 스타일과 레이아웃을 위해 테이블을 사용하는 경우 많은 새로운 기술을 놓치고 90년대에 머물러 있는 것 같습니다.
이것은 도움이 되지 않을 수 있지만 CSS와 관련된 이러한 모든 문제를 어떻게든 이해하지 못합니다. 신문 디자이너가 광고 페이지에 영화를 삽입하려고 하면 모두가 그가 약간 미쳤다는 데 동의할 것입니다. 그러나 여전히 동일한 사람들이 HTML에서 3열 레이아웃을 선호합니다. HTML은 현재 이러한 종류의 레이아웃을 잘 처리하지 못합니다. 또한 다중 열 레이아웃은 일반적으로 컴퓨터 모니터에서 읽기에 적합하지 않습니다. 실행 가능한 대안이 충분하지 않습니까?
그건 그렇고, 테이블조차도 유창한 열 레이아웃을 구현하는 좋은 방법을 제공하지 않으므로 이러한 해킹에 의존할 이유가 전혀 없습니다. 중간 정도의 최신 브라우저(예: > MSIE 6)를 가정하면 테이블은 내가 알고 있는 깨끗한 HTML + CSS에 비해 어떠한 이점도 제공하지 않습니다.
테이블만 사용하겠습니다.
내 경험상 레이아웃에 테이블을 사용하면 모든 브라우저에서 동일하게 작동하고 CSS는 그렇지 않습니다(특히 IE6을 지원하려는 경우). 테이블을 사용하여 10분 안에 완료할 수 있는 레이아웃을 CSS에서 작동하도록 하기 위해 몇 시간의 코딩을 할 가치가 없습니다.
표를 사용할 때의 또 다른 이점은 레이아웃이 콘텐츠에 맞게 매우 쉽게 동적으로 크기를 조정할 수 있다는 것입니다. CSS로 그것을 끝내려고 하는 것은 엄청난 악몽입니다.
사양 디자이너가 생계를 위해 웹사이트를 만들지 않는다는 것을 암시하는 것처럼 보이는 CSS에는 많은 제한이 있다는 것을 알았습니다.
CSS에서 쉽게 할 수 없다면 HTML 테이블을 사용하십시오.
그렇긴 하지만 일부 프레임워크는 도움이 되며 관리할 수 있다면 CSS로 하는 것이 항상 더 좋습니다.
여기에서 영감을 얻을 수 있습니다. http://blog.html.it/layoutgala/
A List Apart 는 시맨틱 HTML 사용에 대한 훌륭한 참고 자료이며, Holy Grail 기사 는 아마도 가장 좋은 예 중 하나일 것입니다. 또한 CSS Zen Garden 에서 주제에 대한 영감을 얻거나 Dave Shea의 훌륭한 저서 "Zen of CSS Design"을 읽어보십시오.
레이아웃에 CSS를 사용하는 이유는 CSS가 의미적으로 정확할 뿐만 아니라 테이블에 여러 가지 단점이 있기 때문입니다.
표는 거의 모든 화면 판독기를 깨뜨리기 때문에 접근성이 끔찍합니다. 결과적으로 표를 읽는 방식 때문에 시각 장애인에게 무가치한 정보를 제공합니다.
They also render much slower than their CSS counterparts. Tables have to be drawn twice, once for the layout, and again for the content. This can mean that if you have a remote image or two on a server with a slow connection that your ENTIRE LAYOUT will not render.
Would you use an array to store a dictionary when you have a hashmap? No. And you shouldn't use a table when there's something out there which works better.
ReferenceURL : https://stackoverflow.com/questions/61250/divs-vs-tables-or-css-vs-being-stupid
'IT이야기' 카테고리의 다른 글
| C# 코드용 html 문서 만들기 (0) | 2021.10.27 |
|---|---|
| Typescript- tsconfig의 대상 (0) | 2021.10.27 |
| "Combinators"에 대한 좋은 설명 (0) | 2021.10.27 |
| 단일 테이블 상속 및 Rails에서 사용 위치 (0) | 2021.10.27 |
| 자바 인트로스펙션과 리플렉션 (0) | 2021.10.26 |