display: table은 유레카!!!

우선, display속성이란?

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다.
이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.

출처: 코딩의 시작, TCP School (http://tcpschool.com/css/css_position_display)

사전적 의미는 이렇다.
내가 작업할 때 이 속성을 사용하는 경우는 보통 이럴 때이다.

pc에서 보였던 콘텐츠를 mobile에서 안 보이게 하고 싶을 때 display: none,
span태그를 block으로 사용하고 싶을때 display: block,
div나 img 태그처럼 block요소들을 줄바꿈이 되지 않게 하고 싶을 때 display: inline,
position을 사용해 한 콘텐츠를 쫘라락 나열하고 싶을 때 display: flex

아무튼 display: table은 사용하는 일이 전혀 없었다.

그러다 이걸 오늘에서야 사용하게 된 일이 있었으니..

탭, 스크롤 챱챱챱

내가 학원을 다니면서 모두들 원픽으로 뽑았던 작품(?)은
삼성 비스포크를 리뉴얼했던 작업이었다.

학원을 다니기 초반에는 에이 이거 뭐 노트북으로 해도 척척 되네~하다가
중반부터 디바이스별로 화면이 어떻게 보이는지 체크하는게 정말 중요하다는 걸 알게 되었다..
내 노트북은 HD사이즈였고..HD사이즈에 맞춰 작업하던 결과물이 FHD나 QHD로 가면
CSS 레이아웃이 완전히 붕괴되는 현상이 종종 일어났다.

결국 내가 가장 애정했던 삼성 비스포크도..
우측 탭을 누르면 스크롤이 되면서 해당 콘텐츠로 넘어갈 수 있게 코드를 짰는데,
상하 여백이 같게 만들어야 된다는 것이 가장 큰 이슈였다.

하지만 2주의 시간은 기획,디자인, 그리고.. 1개의 메인페이지와 6개의 서브페이지를
코딩하기에도 너무나 빡세고 짧았다..
그래서 졸업하고나서야 이 문제를 혼자서 해결할 수 밖에 없는 상황이 뙇!

유레카!!

우선, 나와 같은 주니어 개발자들은 어떻게 해결했는지 보고 싶었다.
잘 만들었다 생각했던 사람의 코드를 뜯어보았는데 position: relative, positon: absolute를 사용해 콘텐츠를 가운데에 고정을 시킨 듯했다.
position을 사용해 transform으로 50%로 또 움직여서 중앙정렬시키는게 편하긴 한데..
50%가 잘 먹지 않았던 경우가 종종 있어서 이건 안 쓰고 싶었다ㅠㅠ

그래서 대기업들은 어떤가하고 지디웹을 둘러보다 비슷한 레퍼런스 발견!
css 뷰어 플러그인으로 보니까 display: table을 사용하고 있었다
이건 또 뭐냐! 하고 찾아보았는데 지금까지 몰랐던 게 무색하리만큼
꽤 자주 쓰이고 있었다

출처: 웹퍼블리셔가 알고있어야 할 display: table 속성!
https://www.biew.co.kr/entry/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94%EA%B0%80-%EC%95%8C%EA%B3%A0%EC%9E%88%EC%96%B4%EC%95%BC-%ED%95%A0-display-table-%EC%86%8D%EC%84%B1

방법은 여기서 참고해서 사용해보았다.

부모요소 코드

.boxwrap {
    display:table;
    width:100%;
    table-layout:fixed;
}

자식요소 코드

.boxwrap .box {
    display:table-cell;
    vertical-align:middle;
}

이 방법을 사용했더니 이 전에는

이렇게 여백이 엉망이었다가

다양한 해상도에서도 상하여백이 편~안하게 가운데정렬돼있는 것을 볼 수 있었다!

마무리

골머리를 아프게 했던 이 이슈가 드디어 해결돼서 너무 좋은 감정이 가득하지만
이 방법도 비효율적일 수 있다는 의심은 멈추지 않고 있다!
나중에 경험이 더 쌓였을 때 내가 같은 문제를 어떻게 해결할지 기대된다 :)