고정 너비가없는 CSS 레이아웃

https://stackoverflow.com/questions/1606393

05-07-2019
|

문제

나는 어떤 식 으로든 CSS 전문가가 아닙니다. 나는 그것을 어느 정도 알고 있지만 그다지 깊지는 않습니다. float와 ie6은 나를 울게 만듭니다. 그래서 나는 사람들이 무엇을 할 수 있는지 항상 기쁘게 생각합니다.

그러나 내가 본 대부분의 예제는 고정 차원을 사용합니다. 내가 이해하는 한 이것은 CSS가 너무 까다 롭고, 특히 IE6의 너비가있을 때 해킹하기가 훨씬 쉽기 때문입니다.

그러나 나는 유연한 너비를 정말 좋아합니다. 그리고 그렇게되면 테이블로 디자인을 만드는 것이 왜 잘못되었는지 이해가 안 돼요? "CSS에 대해 아는 모든 것이 잘못되었습니다!"라는 책이 있습니다. 최근 브라우저와 함께 CSS로 테이블 레이아웃을 할 수 있다는 것이 얼마나 좋은지 설명하지만 HTML 테이블로 항상 할 수 없었습니까? 예, CSS가 아니며 순수한 CSS만큼 깨끗하지 않을 수도 있습니다 ... 결국 테이블 레이아웃 이다 우리가 자주 필요한 것, 그리고 우리가 그것을하기 위해 사악한 해킹 CS를 선택해야한다면, 단순하지만 단순하지만 단순한 html 테이블을 선택해야한다면, 왜 이러한 선택이 왜 나쁘게 간주되어야하는지 이해하지 못합니다. 키스는 좋은 일이야?

아니면, 나는 그것을 이해하지 못하고 CSS에서 테이블과 같은 레이아웃을 만들 수 있습니다. 그러한 사이트의 예가 있습니까?

업데이트 : 예, 콘텐츠와 스타일 분리에 대해 알고 있습니다. 사실, 나는 건식, SRP 및 기타 디자인에 대해 광신적입니다. 그래서 CSS에서 일을하려고했던 이유입니다. 그러나 테이블보다 훨씬 어렵고 신뢰할 수없는 경우 위의 언급과 같은 책으로 쓰여져 있는데 왜 그렇게 열심히 노력합니까? 나는 모든 것이 테이블로 이루어져야한다고 말하지 않습니다. 그러나 그것이 정말로 더 쉬운 CSS보다 - 간단하고 예측 가능한 솔루션보다 CSS를 선호 해야하는 이유는 무엇입니까?

즉, 나는 당신이 항상 테이블을 사용해야한다고 말하지 않습니다. 마스터 페이지 레이아웃을 명심하십시오 - 독립적이고 다른 페이지에 영향을 미치지 않습니다. CSS에서 테이블로 전환 할 수 있으며 20 분 안에 다시 문제없이 (실제로 그렇게 했음) - 테이블이 있어도 CSS를 고수 해야하는 이유는 무엇입니까? 피해가 없습니까?

업데이트 : 나는 이것이 내가 말하려고했던 것에 대한 아주 좋은 요약이라는 것을 알았습니다. http://www.flownet.com/ron/css-rant.html. 그리고 토론 http://rondam.blogspot.com/2009/02/why-csss-should-not-be-used-for-layout.html#comments.

관심있는 사람들을 위해 다음은 더 나은 기사가 있습니다. http://kv5r.com/articles/dev/layouttables1.asp

해결책

당신은 본질적으로 맞습니다. 접근성을 위해 셀의 순서가 페이지에 적합한 한 레이아웃에 테이블을 사용하는 데 실제로 잘못된 것은 없습니다. 나는 개인적으로 고정 된 넓이가 층으로 된 테이블보다 유용성이 훨씬 악화되는 것을 발견합니다.

레이아웃에 테이블을 사용하면 스타일을 사용하십시오. width: 100%; table-layout: fixed (그리고 <col> 스타일로 width) 따라서 브라우저가 처음부터 테이블을 올바르게 배치 할 수 있도록 (유용성 문제 중 하나를 수정하여 테이블 레이아웃을 수정), 즉 IE의 오히려 자동 층 폭 vuessing에 의존하지 않도록합니다.

가능한 한 레이아웃에 대한 CSS를 선호하지만 CSS 만 사용하여 가장 간단한 사이트 레이아웃을 합리적으로 달성 할 수 있지만 (특히 IE5와 기발한 상자 모델이 사라 졌음) CSS가 해킹 할 수없는 경우 및 테이블이 할 수있는 경우가 있습니다. 일반적인 경우는 복잡한 유체 폭 양식입니다.

가장 중요한 문제는 width: 100%-10em 뷰포트의 너비 인 열을 얻으려면 다른 열의 고정 크기를 뺀 것입니다. 간단한 경우의 경우 여백과 래퍼 디스크 로이 문제를 해결할 수 있지만, 일단 페이지의 요소를 다시 주문하고 CSS 레이아웃을 작동시키기 위해 여러 래퍼를 추가하면 이미 프레젠테이션을 혼합하고 있습니다. 내용 : 테이블과 크게 다르지 않습니다.

최악의 경우 마크 업 내부의 레이아웃을 완전히 지정하기 위해 둥지 및 고정 클래스 이름을 사용해야하는 바보 같은 'CSS 프레임 워크'로 끝납니다. 이것은 테이블보다 낫지 않습니다. 나는 나쁜 옛날로의 희망없는 후퇴가 트렌디 한 최첨단 웹 2.0 기술로 간주된다는 것이 절대적으로 유쾌하다는 것을 알았습니다.

CSS3는 흥미로운 작업을하고 있습니다 대안 언젠가는 전체 마크 업 및 레이아웃 분리를 약속 할 수있는 현재 위치 옵션으로. 그러나 그것은 오늘날 먼 길입니다.

다른 팁

살펴보십시오 얌 그리고 유체 960g. 둘 다 크로스 브라우저 레이아웃을 많이 돕습니다. 테이블 층은 답이 아니며 IE6은 조만간 사라집니다.

HTML 테이블이 테이블 데이터 이외의 다른 것에 대해 나쁜 이유가 있습니다. HTML은 데이터 컨텐츠의 마크 업 언어이므로 해당 데이터의 레이아웃이 아니라 실제 데이터 그룹을 포함해야합니다. CSS는 레이아웃과 스타일 목적을위한 것입니다. 따라서 그 이름. 따라서 CSS에는 웹 페이지의 전체 모양과 느낌이 포함되어야하며 HTML에는 데이터 구조가 포함되어 있어야합니다. 그리고 트웨인은 결코 만나지 않을 것입니다.

테이블에서 모든 것을하는 것은 이유가 나쁘다.

스타일과 콘텐츠의 추상화로 생각해야하며 여기에서 좋은 요약을 얻을 수 있습니다. http://www.alistapart.com/articles/separationdilemma/

또한 귀하의 질문에 대한 직접적인 답변에서 '목록을 구분'하고 기사를 검색하십시오. 그들은 당신이 여기서 만들려는 여정을 설명합니다. http://www.alistapart.com/articles/journey/

간단하고 예측 가능한 솔루션보다 CSS를 선호 해야하는 이유는 무엇입니까?

그것이 우리가 말하려고하는 것입니다. 단기적으로는 쉬운 것처럼 보일 수 있지만, 당신이 쓰는 것은 미래에 유지하기가 덜 유지하기가 더 어려울 것입니다. 당신은 가서 단기적으로 더 쉬운 웹 페이지를 쓸 수 있지만 나중에 더 많은 일을하고 싶을 때 나중에 발에 몸을 찌르고 있습니다. 왜 처음으로 올바르게하지 않습니까? (정말 소량의 추가 노력 일뿐입니다)

CSS 레이아웃이 당신에게 도전하기 때문에 테이블보다 열등하지는 않습니다. 이것을 말함으로써, 당신은 상대 주의적 오류로 알려진 논리적 오류를 저지르고 있습니다.

CSS, 사용 방법 및 대부분의 다른 브라우저 퀴크를 완전히 이해하면 HTML 테이블보다 훨씬 우수하다는 것을 알 수 있습니다.

마크 업은 의미 론적이어야합니다. 즉, 포함 된 내용을 정확하게 설명해야합니다. 따라서 기계를 읽을 수 있습니다 (SEO 및 기타 응용 프로그램의 경우). 레이아웃 테이블은 전혀 의미가 아닙니다.

다른 계층의 추상화는 웹 사이트를 훨씬 쉽게 유지 관리하는 데 도움이됩니다. 컨텐츠를 HTML, JavaScript의 동작 및 CSS의 프레젠테이션에 보관하십시오.

하지만 CSS는 결점을 가지고 있다는 것이 옳습니다. 그러나 테이블에는 더 많아서 훨씬 더 나쁩니다.

레이아웃으로 테이블을 사용하는 마크 업을 만들고 싶지 않은 이유는 디자인과 컨텐츠의 분리 때문입니다.

마크 업은 그 안에있는 콘텐츠에 대한 완벽한 설명으로 자체적으로 앉아 있어야합니다. 기본적으로 스타일을 만지기 전에 HTML에서 페이지를 표시해야합니다. 그런 다음 CSS를 사용하여 시맨틱 마크 업이 기본적으로 보이는 방식을 수정합니다.

문제의 사실은 귀하가 배치하는 웹 컨텐츠가 '표 형식 데이터'가 아니라는 것입니다. 마크 업은 컴퓨터/봇을 읽는 것이며 스타일은 우리가 볼 수있는 것입니다. 추가 유지 보수 비용으로.

다음은 내가 개인적으로 만난 시나리오가 공유를 좋아할 것입니다. 참고 : 나는 "없음"을 옹호하지 않고 다른 요구 사항을 전달하는 데 제공됩니다.

양식 (시각적으로 하향식 흐름)을 만들었습니다.

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

그런 다음 고객은 다음과 같은보다 구조화 된 관형을 원했습니다.

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

TR TD 정렬 테이블을 사용하지 않으므로 CSS 수정 및 사소한 HTML 마크 업 변경을 사용하여 구조를 쉽게 (거의) 변환 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow