[CSS] display:table

display:table 예시

위의 이미지 속처럼 메뉴목록을 만들 때 테이블처럼 같은 크기로 나오는 메뉴를 만들 때 사용할 수 있다.
displat:table 속성은 다른 요소를 마치 table 태그 속성처럼 바꿔주는 속성이다.

float이라는 속성을 써서 right 혹은 left로 컨텐츠를 띄워준다.
float은 원래 이미지를 띄워서 텍스트랑 배치할 때 사용하는 속성이지만 요즘은 레이아웃에 많이 쓰인다.
실은 나도 레이아웃에서만 써봤다.
float 속성과 함께 width나 height를 같이 써서 배치해준다.

위의 이미지처럼 만들 때는 width를 100% / 갯수 해주면 된다.
예를 들어 이미지 속의 큰메뉴는 총 5개이므로 width는 100%/5 = 20%가 된다.

간단한 예시는 아래와 같다.

.menu_tab { overflow:hidden; } .menu_tab li { float:left; width:20%; display:table; }

매번 메뉴갯수 맞춰서 width를 변경하자니 유지보수하면서 귀찮아진다.
그럴 때 사용할 수 있는 속성이 있다.

바로 display:table-cell 속성이다.
마치 td 태그의 요소처럼 표현해주는 속성이다.
td에서 정렬은 text_align:center 혹은 text_align:middle 로 가로, 세로 정렬을 할 수 있다.

대신 이 속성 하나만 쓰면 안되고 부모 태그에 table, 자식 태그에 table-cell을 써줘야 한다.

.menu_tab { display:table; width:100% } .menu_tab li { display:table-cell; vertical-align:middle; }

위의 예시처럼 설정해주면 완성!
간단하게 해결할 수 있다.