부트 가능한 그리드 레이아웃이 HTML 테이블보다 선호되는 이유는 무엇입니까?

부트 가능한 그리드 레이아웃이 HTML 테이블보다 선호되는 이유는 무엇입니까?

---

[참고 :이 질문을 "HTML 레이아웃에 테이블을 사용하지 않는 이유"와 혼동 할 수있는 사람들에게는 그 질문이 아닙니다. 내가 질문은 그리드 레이아웃이 테이블 레이아웃과 근본적으로 다른 이유입니다.]

프로젝트를 위해 CSS 라이브러리 (부트 부트)를 연구하고 있습니다. 나는 웹 디자이너 라기보다는 프로그래머이고 좋은 디자인을 캡슐화 한 라이브러리의 혜택을받을 수 있다고 생각합니다.

우리 모두는 HTML 테이블을 사용하여 기본 사이트 레이아웃을 완성하는 것이 좋지 않다는 것을 알고 있습니다. 이는 프레젠테이션과 콘텐츠를 혼합하기 때문입니다. Bootstrap과 같은 CSS 라이브러리가 제공하는 이점 중 하나는 테이블을 사용하지 않고 "그리드"레이아웃을 생성 할 수있는 것입니다. 그러나 그리드 레이아웃이 동등한 테이블 레이아웃과 의미있는 방식으로 어떻게 다른지 이해하는 데 약간의 문제가 있습니다.

즉, 이 두 HTML 근본적인 차이점 은 무엇입니까? 그리드 레이아웃이 다른 이름의 테이블이라고 생각하는 것이 잘못입니까?

<div class="row">
    <div class="span16"></div>
</div>

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

과

<table>
  <tr>
    <td colspan=4></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

---

차이점은 첫 번째 예는 마크 업 되는 데이터가 실제로 표 형식이 아니라고 가정하고 의미 론적으로 마크 업 된다는 것입니다. 테이블과 유행 레이아웃으로 표시되는 데이터가 아닌 테이블 형식 데이터<table> 에만 참석 합니다.

의미 론적 이지 않고 표현적인 HTML 요소에 클래스를 할당해야하는 부트 스트랩과 같은 CSS 패키지를 사용하면 내용과 표현의 분리가 어 다소 의문이 생겼습니다. 당신이 해야 할 대신 직접 요소로 표상 클래스를 할당하는, 당신의 요소와 클래스에 CSS 프레임 워크에 정의 된 할당 표현 적 행동이나 믹스 인 (또는 이와 유사한 기술)을 사용하는 것을 의미하는 클래스를 할당한다.

말하다 :

<div class="products">
    <div class="product"></div>
</div>

.products {
    .row;
}

.products > .product {
    .span16;
}

내가 말해야 합니다 . 이것이 항상 더 실행 가능한 옵션은 이론적 인 목표가 있습니다.

---

나는 CBroe 게임가 최선의 선택 이라고 믿기 때문에 결정했습니다.

의 피하십시오 div. A div는 첫 번째 옵션이 마지막 수단이어야합니다. 대신 실제 요소에 Bootstrap 클래스를 사용하십시오. 예를 들면 :

<form class="container">
    <fieldset class="row">
        <label class="span4" for"search">Type your search</label>
        <input class="span6" type="text" id="search" />
    </fieldset>
</form>

단일 필드를 포함하기 위해 FIELDSET 사용하는 [해석]을 부끄러운 일이지만 div같은 일에 를 사용하는을 구석으로보다 의미-phase 추론 좋습니다 . HTML5의 표준은 다음과 같은 많은 새로운 컨테이너 요소 , 정의 article, section, header, footer 및 더 많은 . 어떤 경우에는 div's 를 사용하지만 사용을 최소화하면 훨씬 더 의미가 있습니다.

---

근본적인 차이점은 마크 업을 설명 필요없이 미디어 쿼리를 사용하여 다양한 크기에 대해 부트로 레이아웃을 "리플 로우"할 수 있습니다. 예를 들어, 데스크톱에서는 사용자가 고해상도 와이드 와이드를 사용하기 때문에 4 개 div가 있기 때문에 행에 있기 때문에 원하지만 휴대폰에서는 한 행에 2 번 다이빙하고 다음 행에 다음 div를 원합니다. 이렇게하면 미디어 쿼리를 사용하여 각 행의 열 수를 사용할 수 있습니다. 하드 코딩 된 HTML 테이블을 사용하는 경우가 수행하기 매우 어렵습니다.

하지만 다음과 같은 버전의 부트 구현을 좋아하지 않습니다.

1. 픽셀로 하드 코딩 된 중단 점이 있습니다. 즉, 휴대폰과 테이블의 디스플레이 될 수 있습니다. 픽셀 수는 크기에 대한 잘못된 프록시입니다 .
2. 최대 사용 공간을 1170px로 제한하는데, 이는 더 많은 콘텐츠를보기 위해 사용할 수있는 멋진 와이드 디스플레이를 가진 사용자에게는 다시 한 번 실망스러운 일입니다.
3. 부트 유효성의 레이아웃은 소스에 독립적이지 않습니다. 즉, HTML에 기사 열 순서를 설명합니다. 그러나 이것은 더 현명한 요점입니다.
4. 기본 레이아웃은 매우 작은 해상도 용이며 고해상도 레이아웃은 미디어 쿼리가 실행될 때만 트리거됩니다. IMO는 휴대 전화의 해상도가 계속 향상되고 웹 사이트가 오래된 모바일 장치에 대해 기본 레이아웃을 설정하게 될 점을 고려하면 좋지 않은 선택입니다.
5. 부트 스트랩 레이아웃은 그들이 지원하지만, 어떤 가치가 보지 못했다 모든 버그와 브라우저보고 자신의 미세 인쇄를 읽을해야한다는 의미에서 '걱정없는 "진정으로하지 않습니다 당신이 상관 할 수 있습니다. 예를 들어 한국이나 중국의 사용자를 타깃으로 삼고 있다면 놀랄 것입니다.

따라서 부트 스트랩에서 모든 것이 금으로되어있는 것은 아니며 그들의 접근 방식이 항상 최선의 방법은 아닙니다 (제외로 제가 부트 스트랩에서 경멸하는 또 다른 한 가지는 소위 "점보트론"에 대한 집착입니다. 헤더-커뮤니티가 "새로운 표준"으로 받아들이지 않기를 바랍니다). 개인적으로 display:table요즘은 하드 코딩없이 부트 스트랩과 비슷한 이점이있는 CSS 테이블 레이아웃 ( )을 사용합니다.<table>내 마크 업에서. 예를 들어, 여전히 미디어 쿼리를 사용하여 세로 또는 가로 방향에 따라 행을 재정렬 할 수 있습니다. 그러나 가장 중요한 이점은 내 레이아웃이 실제로 픽셀 또는 백분율 독립적이라는 것입니다. 예를 들어, 3 열 레이아웃에서는 첫 번째 열과 마지막 열이 차지해야하는 공간을 콘텐츠가 결정하도록했습니다. 픽셀이나 퍼센트 너비가 없습니다. 가운데 열은 남은 공간을 모두 차지합니다 (내 앱에는 좋지만 다른 앱에는 적합하지 않을 수 있음). 또한 놀랍게도 부트 스트랩하지 않는 미디어 쿼리 중단 점에서 ems를 사용합니다.

---

페이지 레이아웃에는 Bootstrap 그리드를 사용하고 테이블 형식 데이터에는 테이블을 사용합니다.

저는 Bootstrap의 그리드를 gridview 컨트롤과 같은 개발자 관점의 그리드가 아니라 디자인 페이지 레이아웃의 관점에서 더 많이 생각합니다. 페이지 내용을 포함하는 그리드라고 생각합니다. Deceze가 지적한 것처럼 Bootstrap 그리드를 사용하여 표 형식 데이터를 포함하는 기존의 그리드를 만들 수도 있지만 이러한 유형의 그리드는 HTML 테이블에 더 적합하며이 시나리오에서는 여전히 사용할 수 있습니다.

---

표만 사용하면 각 장치에 대해 별도의 페이지를 만들지 않고도 모바일 / 태블릿 용으로 문서 크기를 조정할 때 많은 유연성을 놓칠 수 있다고 생각합니다. 테이블 구조가 정의되면 실제로 할 수있는 것은 확대 및 축소뿐입니다.

---

두 마크 업 세트간에 의미 론적 차이가 반드시 많지는 않지만 (Bootstrap의 그리드 시스템에서 사용하는 클래스가 실제로 순수하게 표현 적이므로) 매우 중요한 차이점 중 하나는 그리드 시스템이 훨씬 더 유연하다는 것입니다.

예를 들어, 테이블 기반 레이아웃이 다양한 화면 크기에 반응하도록 만드는 것은 매우 어렵습니다. 동일한 행에서 한 td요소 를 다른 요소 아래 에 표시하도록 브라우저에 지시하는 방법은 없습니다 td. 와 반면 div예, 할 쉽게 그와 같은 마크 업 다른 방법으로 표시 할 수 있습니다 , 심지어 클래스들이 상대적 비율 및 페이지 요소의 위치를 정의한다는 의미에서 "표현 적"인 경우.

---

가능하다면 다른 의견과이 페이지에서 경험 한 링크 폭발에서 수집 한 내용을 요약하고 싶습니다.

표 사용의 문제는 그리드 레이아웃이 아니라 CSS 대신 HTML로 표를 표현하려는 시도입니다.

부트 스트랩은 (대부분) 순수한 CSS를 통해 그리드 레이아웃을 허용하므로 괜찮습니다. '대부분'부분은 HTML이 레이아웃 데이터에 의해 여전히 오염되기 때문에 발생하지만 더 미묘합니다.

<nav class="span4"> ... </nav>
<article class="span8"> ... </article>

이것은 확실히 이전 표 형식 디자인보다 훨씬 더 의미 있고 유지 관리 할 수 ​​있지만 'span4'와 'span8'은 여전히 ​​HTML에 포함 된 디스플레이 데이터입니다. 그러나 디자인은 우리의 데이터 (예 : 중첩 된 div)에서 진정으로 분리 될 수 없기 때문에 합리적인 비용입니다.

즉, LESS 와 같은 사전 처리 된 언어에서 제공하는 최신 CSS 기능을 사용하면이 커플 링조차 깨질 수 있습니다 . 같은 예 :

<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>

다음 LESS와 결합 :

#secondary-nav{
    .span4;
    // More styling (padding, etc) if needed
}
#main-content{
    .span8;
}

이렇게하면 완전히 분리 된 HTML과 스타일 시트가 생성됩니다. 이는 HTML이 더 깔끔하고 읽기 쉬우 며 HTML 수정을 줄여 재 설계 할 수 있기 때문에 이상적입니다. 그러나 이것은 CSS가 현재 믹스 인 (AFAIK)을 지원하지 않기 때문에 LESS 또는 다른 CSS 전처리기를 사용하는 경우에만 작동합니다.

우리는 이미 직장에서 LESS를 사용하고 있으므로 이러한 유형의 솔루션을 사용하도록 추진할 것임을 알고 있습니다. 저는 시맨틱 HTML과 데이터 디자인 디커플링을 매우 강력하게 믿습니다. :)

---

기본적으로 DIV는 DIV이고 테이블 요소는 단순히 테이블 요소입니다. 테이블의 문제는 궁극적으로 엄격한 데이터 구조이기 때문에 모든 열과 행을 추적하는 것입니다. DIV는 훨씬 더 유연하고 관대합니다.

예를 들어, "span4"와 같은 클래스의 DIV 4 개를 가져 와서 2 열 너비로 변경하려면 외부 클래스 "row"에 대해 약간의 CSS를 조정하기 만하면됩니다. 그리고 아마도 클래스 "span4". 실제로 이와 같은 DIV를 수행 할 때 개별 DIV를 "span4"또는 다른 번호로 부르는 것을 피할 것입니다.

내 접근 방식은 "rowspan"이라고하는 부모 래퍼 DIV를 만드는 것이며 내부 DIV에는 "셀"과 같은 일반적인 ID가있을 것입니다.

<div class="rowspan">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

예를 들어 각 "cell"클래스의 너비는 100 픽셀 일 수 있으며 상위 "rowspan"은 400 픽셀 일 수 있습니다. 이는 연속 된 4 개의 열에 해당합니다. 2 열로 만들고 싶습니까? 문제 없어요! "rowspan"을 200 픽셀 너비로 변경하십시오. 이 시점에서 모든 것이 CSS로되어 있으므로 DOM에서 페이지 구조를 재조정하지 않고도 쉽게 할 수 있습니다.

하지만 테이블은? 쉬운 일이 아닙니다. 기본적으로 </tr><tr>새 행을 만들려면 태그를 사용 하여 테이블을 다시 렌더링해야합니다 .

---

테이블이있는 버전, tr, td는 브라우저 알고리즘에 따라 달라집니다. 랩핑, 동적 너비, 여백, 센터링 등. div가있는 버전은 CSS와 스크립트로 더 쉽게 조정할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/14461103/why-is-the-bootstrap-grid-layout-preferable-to-an-html-table