[CSS 레이아웃] display: table을 이용하여 메뉴 레이아웃 만들기

 

메뉴 레이아웃 만들기의 쟁점

 

메뉴 레이아웃을 만드는 것은 두 개의 과정을 거칩니다. 우선, 메뉴 요소들을 감싸는 부모 요소의 크기와 위치를 잡기입니다. 다음으로는, 각 메뉴 항목에 해당하는 자식 요소들을 일자로 정렬해줍니다. 디자인에 따라서 지그재그로 정렬할 수도 있지만, 이번 포스팅에서는 가장 기본이 되는 일자 정렬을 다룰 것입니다. 사실 지그재그 정렬도 일자 정렬을 할 줄 알아야 구현 가능합니다. 지그재그 정렬의 원리는 일자 정렬 이후 각 자식 요소에 자식 요소를 또 추가하여, 위, 아래 혹은 왼쪽, 오른쪽 정렬만 다르게 해 주면 구현되기 때문입니다.

 

일자 정렬에는 또 두가지 종류가 있습니다. 수평 방향으로 정렬과 수직 방향으로 정렬입니다. 이 두 가지 정렬을 구현하는 데에는 사실 무수히 많은 방법이 있습니다. 그중 가장 사용하기 쉽고 부작용이 없는 방법은 display의 flex를 사용하는 것이지만 IE 같은 구 브라우저가 이것을 지원하지 않습니다. 물론 지금 IE 벗어나기 추세가 가속화되고 있기 때문에 flex를 사용하는 것은 매우 좋은 방법입니다. flex를 사용하는 방법에 대해서는 추후에 기회가 되면 포스팅을 따로 해보겠습니다. 지금 이 포스팅에서는 구 브라우저들도 지원을 하는 display의 table을 이용하는 방법을 사용해보겠습니다.

 

display: table 속성은 element가 table태그가 아님에도 table처럼 쓸 수 있게 해줍니다.

display: table 속성으로 레이아웃을 만드는 장점은 일단 쉽고 직관적이라는 것과 수평 방향이든 수직 방향이든 한 줄짜리 레이아웃을 만들 때 매우 강력한 방법이라는 것입니다.

 

 

 

 

1. display: table로 수평 방향 메뉴 만들기

 

아이디어는 다음과 같습니다.

 

1. 모든 메뉴를 감쌀 부모 요소를 하나 만들고 display: table 속성 값을 부여합니다.
2. 각 메뉴에게 display: table-cell 속성값을 부여하고 디자인을 합니다.
3. 각 셀간의 간격은 부모 요소에 border-spacing 속성 값을 주어 조절합니다.
4. 각 메뉴 cell과 비어있는 cell을 조화해서 table을 채울 수 있게 만들어줍니다.

4번이 중요합니다. 각 cell의 너비 값을 아무리 지정하여도 가장 우선시되는 것은 각 cell의 합은 table전체에 딱 맞아떨어져야 한다는 원칙입니다. 예를 들어 table전체의 너비는 1000px인데 너비 100px짜리 cell 5개를 나열하면 500px이 남습니다. 그러면 브라우저는 이 빈칸을 비워둔 채로 놔두는 것이 아니라, 억지로 cell 5개가 table 전체에 딱 떨어지게끔 각 cell의 너비를 200px로 강제 조절해버립니다. 따라서 내가 원하는 100px너비 값이 적용되지 않는 것이죠.

이렇게 내가 만드는 레이아웃에서 빈 공간이 생길 예정이면 반드시 그 빈 공간을 아무것도 없는 cell로 채워 넣어줘야 합니다. 그래야만 위의 예시의 경우 아무것도 없는 빈 cell이 나머지 500px의 너비를 가져가서 내가 원하는 너비 값을 사용할 수 있게 됩니다. 이 내용은 매우 중요합니다. 4번을 이해하지 못하면 display: table로 레이아웃을 만드는 과정에서 굉장히 삽질을 할 가능성이 높습니다. 관련 소스코드는 밑에 있으니 참조하시기 바랍니다.

 

 

 

2. display: table로 수직 방향 메뉴 만들기

 

아이디어는 수평 방향 메뉴를 만들 때와 같지만 다음 사항이 하나 추가가 됩니다.

 

• 각 메뉴를 display: table-row 속성 값이 부여된 태그로 감쌉니다.

왜 이렇게 해야 하는지는 table태그의 구조를 알고 있다면 바로 이해가 되실 겁니다. table 태그의 구조는 다음과 같습니다.

 

<table>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

 

이 table은 2 * 1 table을 만듭니다. tr태그는 각 행을 의미합니다. 수직방향의 메뉴를 만들 때에는 각 메뉴마다 각 행을 의미하는 display: table-row 속성 값이 있어야 하는 것입니다. 수평 방향을 만들 때 이것을 사용하지 않은 이유는 row가 1개일 때에는 굳이 없어도 잘 만들어지기 때문입니다.

 

 

 

3. 수평방향, 수직방향 메뉴 레이아웃 예시 코드

 

총 3개의 예시를 만들었습니다. 비어 있는 cell을 어디에 만들었는지, 그에 따라 메뉴의 위치가 어떻게 바뀌는지를 봐주시고, 여백의 크기 조절을 위해 blank class가 추가된 빈 cell은 어떻게 사용되었는지를 꼭 봐주시길 바랍니다.

 

* 예시 코드 및 결과

 

  See the Pen https://codepen.io/cocoder16/pen/qBdJVeo">
  qBdJVeo by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
  on https://codepen.io">CodePen.