[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;
display: table-row;
display: table-cell;
table-layout: auto;
border-collapse: collapse;
주로 table 에서는 셀간 margin 적용이 안되기에, 셀간의 간격을 합친 후, border-bottom 으로 간격을 설정할 수 있다.
vertical-align: middle;
*inline, table-cell 박스 요소에만 적용된다.
white-space: nowrap;