가운데 정렬된 네비게이션 혹은 헤더 grid로 구현하기
February 01, 2025
UI를 구현하다보면 이런 식으로 가운데 정렬된 네비게이션 혹은 헤더를 구현해야 할 때가 있다. absolute를 이용해서 가운데 요소를 가운데 정렬하거나 flex의 justfify-content: space-between 사용해서 레이아웃을 구현하기도 한다. 하지만 후자의 경우에는 왼쪽이나 오른쪽 요소가 사라질 경우 레이아웃이 깨질 위험이 있다. 이번 포스트에서는 grid를 사용해서 구현하는 방법을 알아보려고 한다.
HTML 구조
<div class="page-navigation-controls">
<div class="left-button-wrapper">
<button class="icon-button" id="prevButton" disabled>⬅️</button>
</div>
<div id="progressText">1 / 5</div>
<div class="right-button-wrapper">
<button class="icon-button" id="nextButton">➡️</button>
</div>
</div>CSS 스타일링
네비게이션 컨트롤을 그리드 레이아웃을 사용하여 배치하고, 버튼 스타일을 설정한다.
.page-navigation-controls {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-top: 1.5rem;
width: 100%;
max-width: 400px;
position: relative;
gap: 1rem;
}
.left-button-wrapper {
justify-self: flex-start;
}
.right-button-wrapper {
justify-self: flex-end;
}
.icon-button {
background: none;
border: none;
cursor: pointer;
}
.icon {
width: 24px;
height: 24px;
}여기서 중요한 부분은 grid-template-columns: 1fr auto 1fr;이다.
1fr: 첫 번째, 세번째 열(왼쪽 버튼, 오른쪽 버튼)이 가변 크기를 가지며, 공간이 있으면 확장된다.auto: 가운데 열(페이지 진행률 표시)은 내용 크기만큼 유지된다.
이렇게 하면 왼쪽 버튼과 오른쪽 버튼이 화면 크기에 따라 확장되면서 가운데 열은 고정된 크기를 유지한다. 이 방법은 레이아웃이 유연하면서도 왼쪽이나 오른쪽 요소가 사라지는 경우에도 레이아웃이 깨지지 않는다.
