CSS로 HTML 요소 우측 정렬하기 (Flexbox/Grid)

CSS를 사용하다 보면 정말 간단한 정렬이 생각처럼 되지 않아서 애를 먹는 경우가 있습니다. 특히 초보자들이 많이 겪는 문제가 HTML 요소(element)를 우측으로 정렬하는 것입니다.

HTML

웹페이지의 레이아웃에서 HTML 요소를 우측으로 정렬해야 하는 대표적인 경우는 헤더 영역입니다. 예를 들어, 다음과 같이 사이트명과 네비게이션으로 이루어진 간단한 헤더를 생각해보겠습니다.

<header>
  <h1>사이트명</h1>
  <nav>
    <ul>
      <li><a href="#">메뉴 1</a></li>
      <li><a href="#">메뉴 2</a></li>
      <li><a href="#">메뉴 3</a></li>
    </ul>
  </nav>
</header>

<h1> 요소와 <nav> 요소가 같은 줄에 나란히 배치될 수 있도록, CSS의 display 속성값을 변경해주겠습니다.

h1 {
  display: inline-block;
}

nav {
  display: inline-block;
}

지금부터 <nav> 요소로 마크업된 네비게이션을 우측으로 정렬하는 다양한 방법에 대해서 알아보겠습니다.

Float

HTML 요소를 우측으로 정렬하기 위해 오래 전부터 가장 많이 사용되는 방법은 CSS의 float 속성을 사용하는 것입니다. <nav> 요소의 float 속성을 right로 설정해주면 네비게이션이 우측으로 밀려나게 됩니다.

nav {
  float: right;
}

이 방법은 Bootstrap과 같은 대중적인 CSS 프레임워크에서도 사용되고 있는데요. Bootstrap 3에서는 pull-right, Bootstrap 4, 5에서는 float-right라는 유틸리티 클래스가 이 방법을 사용하여 특정 HTML 요소를 우측으로 정렬해줍니다.

<button class="float-right">우측 정렬</button>

하지만 최근에는 웹사이트의 레이아웃을 잡기 위해서 float 속성을 잘 사용하지 않는 추세입니다. 대부분의 경우, 아래에서 다룰 Flexbox나 CSS Grid가 더 선호되기 때문입니다.

Flexbox 1

Flexbox를 이용하면 정말 간단하게 HTML 요소를 우측으로 정렬할 수 있습니다. 부모 요소인 <header>를 Flex 컨테이너로 바꿔주고, justify-content 옵션을 space-between으로 설정해줍니다. 그러면, 자식 요소인 <h1>과 <nav>는 자동으로 Flex 아이템으로 바뀌게 되고, 사이에 공간을 확보하기 위해서 네비게이션은 우측으로 밀려나게 됩니다.

header {
  display: flex;
  justify-content: space-between;
}

Flexbox 2

justify-content 옵션을 사용하는 대신에, <h1> 요소의 flex-grow 속성을 1로 설정해줄 수도 있습니다. 그러면, <h1> 요소는 <header> 요소의 여유 공간을 독차지 하게 되어, 네비게이션이 우측으로 밀려나는 효과가 생기게 됩니다.

header {
  display: flex;
}

h1 {
  flex-grow: 1;
}

Flexbox 3

Flexbox를 사용하는 또 다른 방법은 <nav> 요소의 margin-left 속성을 auto로 설정해주는 것입니다. 이렇게 해주면, <nav> 요소의 왼쪽 여백 공간이 늘어나면서, 네비게이션이 우측으로 정렬되는 효과가 생기게 됩니다.

header {
  display: flex;
}

nav {
  margin-left: auto;
}

Flexbox에 대한 자세한 설명은 관련 포스팅를 참고바랍니다.

Grid

CSS Grid를 사용해서도 정말 간단하게 우측으로 네비게이션을 우측으로 정렬시킬 수 있습니다. 부모 요소인 <header>를 Grid 컨테이너로 바꿔주고, Grid 아이템이 된 <h1>과 <nav> 요소가 왼쪽에서 오른쪽 방향으로 배치되도록 설정하면 됩니다.

header {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
}

Position

Flexbox나 CSS Grid를 사용할 수 없는 상황이라면, CSS의 position 속성을 활용해볼 수도 있습니다. 부모 요소인 <header>의 position 속성을 relative로 설정해주고, 자식 요소인 <nav>의 position 속성을 absolute로 설정해줍니다. 그러면, 부모 요소를 기준으로 자식 요소의 위치 선정이 가능해지기 때문에, 네비게이션을 우측에 딱 붙여서 배치할 수 있습니다.

header {
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
}

본 예제처럼 부모 요소에 여백이 있는 경우, 그 여백도 고려해서 자식 요소의 위치를 잡아줘야하는 점 주의바랍니다.

Absolute Position에 대한 자세한 설명은 관련 포스팅를 참고바랍니다.

마치면서

지금까지 CSS의 여러 가지 방법을 통해서 특정 HTML 요소를 우측으로 정렬해보았습니다. 직접 사용해보시면 각 방법마다 미세하게 다른 장단점이 있다는 것을 알게 되실 것입니다. 소개해드린 방법 중에서 프로젝트에서 주어진 상황에 최적화된 방법을 찾으셨으면 좋겠습니다.