[CSS] display: table 속성 :: 마이구미

이 글은 CSS 속성 중 하나로 display: table 에 대해 다룬다.
https://developer.mozilla.org/en-US/docs/Web/CSS/display

 

display: table 속성은 간단하다.

<table> 태그처럼 동작하도록 정의하는 것이다.

그렇다면, 몇가지 의문이 들 수 있다.

 

table 태그가 있는데 이걸 왜 사용해?

table 태그를 지양하고 div 태그에 display: table 을 정의해서 사용해야하는건가?

table tag vs display: table 을 말하고자 하는건가? 그렇다면 왜?...

 

결론은 2개를 비교하는 것도 아니고, 서로의 장단점을 비교하는 것은 아니다.

 

실질적으로 table 의 의미는 표(tabular data) 를 표현하기 위해 사용하게 된다.

하지만 우리는 꼭 표를 위한 데이터를 위해서가 아닌, 표 같은 레이아웃을 원하는 경우가 있을 수 있다.

이러한 경우에는 table 태그를 사용하지 않고도, display: table 을 활용할 수도 있다는 것이다.

 

각자 환경에서 대응해야할 것도 다르고, 목적, 성향 모든게 다르기에 크로스 브라우저, 시맨틱, 웹표준 등등을 함께 고민하는 것은 크게 생산적이지 않을 수 있다고 생각한다(개인적인 견해)

즉, 여기서 말하고자하는 것은 단순히 display: table 속성이다.

 

display: table 의 사례를 확인해보자.

본인이 사용할 수 있는 프로그래밍 언어를 10점 만점 기준으로 표현하고 싶다.

표현되는 영역은 크게 3가지로 분류한다.

 

• 언어명
• 프로그래스바
• 점수

 

언어명과 점수는 특정 px, % 가 아닌 텍스트 길이에 따라, flexable 하게 결정되고 프로그래스바는 남은 너비로 설정되어야한다.

이해를 돕기 위해 요구사항들을 타이트하게 설정한 것으로 참고해주길 바란다.

 

1. X 언어명 아이템들이 동일한 너비가 아님

2. X 언어명 아이템들의 너비가 텍스트 길이와 다름

3. O 언어명 아이템들의 너비가 동일하고 텍스트 길이와 동일

 

텍스트 길이에 너비가 결정된다는 조건은 특정 너비(px,%) 를 설정할 수 없게 된다.

그리고 각 언어명 아이템들의 너비는 가장 큰 너비를 기준으로 차지하게 된다.

이를 위한 대응 방식 중 하나는 표와 같은 레이아웃으로 대응할 수 있어보인다.

 

display: table 속성과 display: flex 속성을 사용한 예제 코드를 통해 비교해볼 수 있다.

 

 

이를 위한 table 관련 CSS 속성들을 간략히 정리하면 다음과 같다.

 

display: table;

table 태그처럼 사용

 

display: table-row;

tr 태그처럼 사용

 

display: table-cell;

td 태그처럼 사용

 

table-layout: auto;

cell 내용에 따라 너비가 정해짐

 

border-collapse: collapse;

table, cell 의 테두리선을 표시하는 방식으로 collapse 는 셀간의 간격을 합쳐서 표현한다.
주로 table 에서는 셀간 margin 적용이 안되기에, 셀간의 간격을 합친 후, border-bottom 으로 간격을 설정할 수 있다.

 

vertical-align: middle;

셀 내부를 수직 정렬할 수 있다.
*inline, table-cell 박스 요소에만 적용된다.

 

white-space: nowrap;

셀 내부의 텍스트가 다음 라인으로 개행되서 수직으로 나오는 것을 방지할 수 있다.