부스트코스 테이블 정리

심지훈·2021년 6월 8일
0

위와 같은 아주 간단한 테이블 레이아웃을 짰고 내가 배워간 것을 정리해보려고 한다.

  1. table-layout: fixed는 성능상 중요하다.
    이유는 나도 잘 모르겠다. 강사가 그렇다니 그런가보다 하고 받아들이는데 추측컨데 브라우저 렌더링 과정에서 컨텐츠를 넣기 전에 table-layout: fixed로 되어있으면 컨텐츠에 상관없이 레이아웃을 정하는데 빠르게 결정 할 수 있기때문이 아닐까? 라고 생각한다.

  2. colgroup을 이용해서 width를 조정하자
    1번에서 table-layout: fixed 일 경우 colgroup에 클래스를 지정하거나 직접 style을 줘서 width를 지정 할 수 있다.

  3. 2번과 같이 할 경우
    colgroup을 통해 스타일을 지정 할 경우 width, background, border만 스타일을 지정 할 수 있다.

이 외에도 테이블 레이아웃의 border 우선순위들을 배웠는데 아직은 디테일한것에 집중 할 단계는 아닌것 같다.

profile
유연한 개발자

0개의 댓글