css, display table 의미 및 사용법 알아보기

오늘도 css 관련 내용을 포스팅 해봅니다. css를 많이 볼일이 없지만, 보게되는 일들이 있고 또 알고 있어서 나쁠게 없기 때문에 겸사겸사 알아보고 공부할 겸 기록용! 으로 포스팅으로 작성합니다

css, display table의 의미

 

반응형

 

 

썸네일

css 중에서 display 관련으로는 block이나 none만 봤는데, table이라고 되어 있어서 당황했었던 기억이 나네요

 

.test {
	display: table;
}

그래서 display table이 정확히 뭔지 찾아봤더니, table 처럼 쓸 수 있다는 뜻으로 보면 됩니다. <table> 태그에 대해서는 다들 알고 게실텐데요. display: table; 로만 해도 테이블 요소처럼 표현하여 사용이 가능하다고 하니 참고하시면 되겠습니다.

테이블로 표현하고 싶은 것이 있다면 큰 틀이 있을 것이고, 내부에 요소들로 작게 나눠져 있는 것들이 있을 텐데요. 큰 틀은 table요소로 사용하고 내부 작은 요소들은 table-cell; 로 사용할 수 있다고 하니 테이블 태그를 사용하지 않고도 사용 가능합니다.

 

이외에도 다른 값을 줘서 사용하는 방법들이 있다고 하니 찾아보시길 바랍니다.

제가 잠깐 찾아본거로는 table-caption, table-column-group, table-header-group, table-footer-group, table-row-group 등이 있었습니다.

 

 

728x90

 

테이블 형식을 굳이 만들지 않고도 테이블 처럼 사용할 수 있다는 점에서 유용할 것 같긴 하나, 어떤 상황에서 이런 태그를 사용하게 되는 것인지, 왜 table 태그를 사용하지 않고 이렇게 쓰는 것인지?가 궁금하나 나중에 알아보도록 하겠습니다. 이러한 제 의문속에서 아마 대부분 table 태그를 사용하지 않을까 싶기도 하고 그러네요! 

저는 퍼블리셔가 아니기 때문에, 제 입장에서 작성한 포스팅이라는 점 유의하시길 바랍니다.

도움이 되셨길 바라며, 감사합니다.