표는 표 형식의 데이터를위한 것으로 알고 있지만 레이아웃 용도로 사용하는 것이 좋습니다. DIV를 처리하여 3 열 레이아웃을 얻을 수는 있지만 중첩 된 DIV가 4 개있는 경우 까다로워집니다.DIV 대 테이블 또는 CSS 대 바보 같은 표본
DIV를 레이아웃 용으로 사용하도록 안내하는 가이드가 있습니까?
DIV를 사용하고 싶지만 원하는 시간에 DIV/SPAN 위치를 지정하는 데 1 시간을 보내지 않습니다.
@GaryF : Blueprint CSS은 CSS의 가장 잘 보관 된 비밀이어야합니다.
위대한 도구 - Blueprint Grid CSS Generator.
이것은 도움이되지 않을 수도 있지만 어떻게 든이 CSS와 관련된 모든 문제를 이해하지 못합니다. 신문 디자이너가 광고 페이지에 영화를 삽입하려고하면 모든 사람들이 자신이 약간 미쳤다는 데 동의하게됩니다. 그러나 여전히 같은 사람들은 HTML로 3 열의 레이아웃을 쓴 후에 소나무를 쓴다. HTML은 현재이 종류의 레이아웃을 잘 처리하지 못합니다. 또한 다중 열 레이아웃은 일반적으로 컴퓨터 모니터에서 읽기에 적합하지 않습니다. 실행 가능한 대안이 충분하지 않습니까?
그리고 심지어 테이블도 유창한 열 레이아웃을 구현하는 좋은 방법을 제공하지 않으므로 이러한 해킹에 전혀 이유가 없습니다. 중간 브라우저 (예 :> MSIE 6)를 사용한다고 가정하면 표는 내가 알고있는 깨끗한 HTML + CSS보다 이점이 없습니다.
HTML을 제외하고 처리 할 수 있습니다. CSS를 처리 할 수없는 것은 CSS입니다. –
더 구체적으로 기재 할 수 있습니까? 정확히 CSS가 처리 할 수없는 것은 무엇입니까? –
콘 라트 (Konrad)는 HTML에서 "3 열 레이아웃"을 얻을 수 없다고 언급했습니다. 테이블은 매우 쉽게 이것을 달성합니다. 100 % 높이 요소와 수직 정렬을 사용하는 비슷한 이야기입니다. CSS는 이러한 상황에서 어려움을 겪는 경향이 있으며 사람들이 어떻게 작동하는지에 대한 기준을 정하기보다는 디자인을 비판하는 경향이 있습니다. –
모든 종류의 작업을 수행 할 수있는 Yahoo Grid CSS이 있습니다.
그러나 기억하십시오 : CSS는 종교가 아닙니다. css 대신 테이블을 사용하여 시간을 절약한다면 그렇게하십시오.
내 생각을 결코 할 수없는 경우 중 하나는 형태입니다. 나는 CSS로 그것을하고 싶지만 테이블보다 훨씬 복잡하다.
양식이 표 (레이블)와 데이터 (입력 필드)가 있다는 점에서 논쟁의 여지가 있습니다.
엄밀히 말하면 양식은 (거의) 결코 테이블이 아닙니다. 데이터에 대한 열 머리글은 무엇입니까? "입력 필드"는 무엇입니까? 그 논쟁에 의해 당신은 무엇이든 테이블이라고 주장 할 수 있습니다 : 단락은 단일 셀 테이블입니다 ... 폼 지원은 브라우저 제조사가 물건에 대해 동의하지 않기 때문에 상당히 불쾌합니다. –
레이블이 헤더라고 주장합니다. 수평 정렬 IIRC –
을 지정하는 인수조차 있습니다. 그러나 헤더의 단일 행과 데이터의 단일 행이있는 데이터 세트는 의미 적으로 테이블보다 정의 목록에 가깝습니다. –
난 그냥 테이블을 사용합니다.
내 경험에 의하면, 레이아웃 용 테이블을 사용하면 모든 브라우저에서 똑같이 작동하며 CSS는 (특히 IE6을 지원하려는 경우에는) 작동하지 않습니다. 테이블을 사용하여 10 분 안에 완료 할 수있을 때 CSS로 작업 할 수있는 레이아웃을 얻는 데는 시간과 시간을 들일 가치가 없습니다.
테이블을 사용하는 또 다른 이점은 레이아웃이 매우 쉽게 동적으로 자체 크기를 조정할 수 있다는 것입니다. CSS로 끝내려는 시도는 엄청난 악몽입니다.
CSS에는 설계자가 웹 사이트를 만들지 않는 힌트를주는 많은 제한 사항이 있습니다.
CSS에서 쉽게 할 수없는 경우 HTML 표를 사용하십시오.
그런데, 프레임 워크 중 일부는 도움이되며, 관리 할 수 있다면 CSS에서 항상 더 멋지다고 말합니다.
바이어스는 IE6을 능가하는 CSS를 선호해야합니다 - 예를 들어, 귀하의 사이트가 IE6을 사용하는 사람들 (예 : 이상한)에 타겟팅 된 경우가 아니라면, 시력이 좋지 않은 사람이나 자동화 된 사용자 에이전트가 아닌 IE6을 사용하여 사람들을 소외시킵니다.IE6의 사용은 감소하고 있습니다. 후자의 집단 수가 증가하고있다. 귀하의 사이트가 IE6에서 완벽하지 않더라도 테이블을 볼 수없는 사용자를 위해 테이블 기반 레이아웃보다 쉽게 읽을 수 있습니다.
이것은 매우 일반적인 질문이므로 구체적으로 대답하기는 어렵습니다. 훌륭한 자원이 두 책은 다음과 같습니다 당신은 단지 전체 사이트 레이아웃을 설계하는 시간을 낭비 할 필요가있는 경우
, 즉가는 나쁘지 않아 .
영국 및 미국에서는 표보다 CSS 레이아웃을 선호하는 법적 요구 사항이 있습니다. 섹션 508 (미국) 및 장애인 차별 금지법 (영국)은 시각 장애인을위한 접근성 표준을 다루고 있습니다.
영국에서는 입국 단계가있는 가게를 가지고있는 것과 같은 방식으로 부분적으로 시력을 가진 사용자의 능력을 방해하는 사이트를 상업적으로 제작하는 것은 사실상 불법입니다. 휠체어 사용자가 들어갈 수있는 방법은 없습니다. 웹 사이트 접근성에 대한 기소는 아직 없습니다. 그러나 나는 당신의 사이트 디자인이 장기간에 유지하는 것이 훨씬 쉽다는 것을 의미하므로 항상 CSS와 함께 갈 것입니다.
학습 CSS (W3C 학교 및 .Net Magazine http://www.netmag.co.uk 사용)에 투자하는 시간은 넉넉합니다.
독일에서도 마찬가지입니다. 단, 연방 사무실 웹 사이트에서만 가능합니다. –
당신은 여기에 몇 가지 영감을 찾을 수 있습니다 http://blog.html.it/layoutgala/
나는 이것을 얼마 전에 보았지만 질문에 링크하고 싶었지만 찾을 수 없었다. –
그리고 2003 년 Seybold를 생각하고 사람들은 여전히 테이블에 대해 논쟁 중입니다! –
CSS는 종교가 아니지만 브라우저가 레이아웃을 위해 HTML을 해석하는 방법입니다. 마찬가지로 현대의 모든 브라우저는 W3C 상자 모델을 사용합니다 (일부 버전). 계속해서 테이블에 의존하려면 웹 렌더링 기술을 설계하는 사람들의 눈에는 명백히 잘못된 방법론에 의지해야합니다.
나는 CSS가 때때로 복잡해 보일 수도 있지만, 나는 이것이 오늘날과 시대에 꼭 필요하다고 믿는다. (당신의 고객이 그것을 원할 것입니다.)
시간을내어 실제로 CSS를 배우는 것이 쉽지 않다면 (요소를 배치하는 데 몇 초 또는 몇 분이 소요될 수 있습니다 ... 시간이 아님), 실제로 레이아웃을 알고있는 사람에게 레이아웃 작업을 전달해야합니다 프론트 엔드를 안다.
예, CSS의 현재 브라우저 구현에는 많은 문제가 있지만 너무 과감하여 테이블 기반 레이아웃으로 돌아갈 필요가 없습니다. 다른 언어 나 프레임 워크처럼 앉아서 배우는 시간을 가지십시오.
내가 찾은 최고의 온라인 참조 자원이 하나입니다 http://reference.sitepoint.com/css
그러나이 물건이 중요한 이유는 이해를 돕는 먼 길을 간다 Designing With Web Standards 같은 책을보고 상처를하지 않을 수 있습니다 .
나는 또한 YAML (또 다른 멀티 컬럼 레이아웃)을 보았을 때까지 청사진이 훌륭하다고 생각했다. 환상적입니다 online builder tool가 있습니다. 나는 5 분 이내에 시원하게 보이는 멀티 컬럼 레이아웃을 얻을 수있다.
A List Apart은 의미 론적 HTML을 사용하는 훌륭한 참고 자료이며, Holy Grail article은 아마도 가장 좋은 예 중 하나 일 것입니다. 또한 주제에 대한 영감을 얻기 위해 CSS Zen Garden을 확인하거나 Dave Shea의 훌륭한 저서 인 "The Zen of CSS Design"을 읽어보십시오.
레이아웃에 CSS를 사용하는 것은 의미 상 정확할뿐만 아니라 테이블에 여러 단점이 있기 때문입니다.
테이블은 거의 모든 화면 판독기를 손상시키기 때문에 액세스 가능성에있어서 끔찍합니다. 따라서 테이블을 읽는 방식 때문에 시각적으로 쓸모없는 정보를 제공합니다.
또한 CSS보다 훨씬 느리게 렌더링됩니다. 표는 레이아웃을 위해 두 번, 내용을 위해 두 번 그려야합니다. 즉, 원격 이미지가 있거나 연결 속도가 느린 서버에 두 개가 있으면 전체 레이아웃이 렌더링되지 않습니다.
배열을 사용하여 해시 맵을 저장할 때 사전을 저장 하시겠습니까? 아니요. 더 잘 작동하는 뭔가가있을 때 테이블을 사용해서는 안됩니다.
잠시 후 생각하지 않아도됩니다. CSS에서 div를 사용하는 것이 더 쉬운 옵션 인 것처럼 보입니다. 또한 jQuery와 같은 프레임 워크를 사용할 때 더 자유롭게 사용할 수 있습니다. 나는 css 나 div를 사용하지 않고 멋진 jQuery를 사용하는 것을 상상할 수 없었다. 스타일과 레이아웃을 위해 테이블을 사용한다면 나는 많은 새로운 기술을 놓치고 90 년대에 머물러있는 것처럼 느낍니다.
4 열 레이아웃에 CSS와 html이 필요합니까? 너가 나를 알면, 나는 이미 여기있다. – Mauro
@ 마우로 : 저는 4 열 레이아웃에 대해 이야기하지 않았습니다. 깊은 DIV 중첩을 의미했습니다. –
청사진을 둘러싼 어느 정도의 논란이 있음을 알고 있어야합니다. http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/ http://jeffcroft.com/blog/2007/nov/18/follow-up-css-frameworks/ 알고 있어야 할 점이 있습니다. :) –