CSS로 아이콘과 텍스트를 수평 정렬하기

웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 많습니다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있습니다. 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여줄 수도 있지요.

하지만 웹 개발을 하다보면 아이콘과 텍스트를 나란히 가로 배치하는데 의외로 어려움을 겪을 수 있는데요. 이번 포스팅에서는 이럴 때 적용할 수 있는 CSS 스타일링 요령에 대해서 알아보겠습니다.

HTML 마크업

스타일링 실습을 위해서 아이콘과 텍스트를 나란히 배치하는 HTML 코드를 작성해보겠습니다. 요즘 많이 사용되는 SVG 아이콘을 사용하고, 텍스트는 스타일 적용을 위해서 <span> 태그를 사용하였습니다.

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
    <circle cx="12" cy="7" r="4" /></svg
  ><span> 내 프로필 </span>
</div>

기본 스타일링

정렬을 하기 전에 우선 SVG 이미지와 텍스트의 크기를 맞춰주는 것이 중요합니다. 아이콘과 텍스트의 크기 차이가 너무 나면 아무리 정렬을 하더라도 소용이 없을테니까요.

CSS로 SVG 요소를 스타일하는 방법에 대해서는 별도 포스팅에서 자세히 다루고 있습니다.

svg {
  width: 4rem;
  height: 4rem;
}

span {
  font-size: 4rem;
}

참고로 아이콘 크기와 텍스트 크기가 반드시 정확히 동일할 필요는 없습니다. 사용 사례에 따라서 아이콘이 약간 더 클 수도 있고, 약간 더 작을 수도 있을 것입니다.

위의 화면을 보시면 아이콘과 텍스트의 크기를 맞추더라도 정렬이 약간 틀어져있는 것을 볼 수 있습니다.

vertical-align

아이콘과 텍스트를 수평으로 나란히 정렬하려면 어떻게 스타일해야할까요?

기본적으로 SVG도 인라인(inline) 요소이고, 텍스트도 인라인 요소입니다. 따라서 인라의 요소를 수평 방향으로 정렬을 맞춰주는 CSS의 vertical-align 속성을 고려할 수 있는데요.

두 요소에 동일하게 vertical-align 속성을 middle로 설정해주면 아이콘과 이미지의 정렬이 맞는 것을 볼 수 있습니다.

svg,
span {
  vertical-align: middle;
}

이 스타일 방법의 단점은 아이콘과 텍스트 간의 거리를 정확히 원하는 값으로 설정하기 어렵다는 것입니다. 왜냐하면 인라인 요소 간의 간격은 letter-spacing 속성이 결정하는데 이 속성값을 바꿀 경우 단어 간의 간격에도 영향을 주게 되기 때문입니다.

letter-spacing을 포함한 텍스트 스타일링에 사용되는 대표적인 CSS 속성에 대해서는 별도 포스팅에 정리해놓았으니 참고 바랍니다.

Flexbox

이 번에는 Flexbox(플렉스박스)를 활용해서 아이콘과 텍스트를 수평으로 나란히 정렬해볼까요?

아이콘과 이미지의 부모 요소를 Flexbox로 만들고, align-items 속성을 center로 설정해주면 되는데요. 이 방법은 gap 속성을 통해서 아이콘과 이미지 간의 간격을 자유롭게 조정할 수도 있습니다.

div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

이 스타일 방법은 특히 버튼(button)이나 태그(tag), 레이블(label)과 같은 UI를 구현할 때 유용합니다.

응용: 세로 배치

Flexbox를 활용하면 아이콘과 텍스트를 나란히 세로 배치하는 것도 어렵지 않습니다.

svg {
  width: 4rem;
  height: 4rem;
  padding: 8px;  border: 2px solid;  border-radius: 9999px;}

span {
  font-size: 2rem;}

div {
  display: flex;
  flex-direction: column;  align-items: center;
  gap: 1rem;
}

마치면서

지금까지 실습을 통해서 CSS로 아이콘과 텍스트를 어떻게 나란히 가로나 세로 방향으로 정렬할 수 있는지 알아보았습니다. 본 포스팅에서 다룬 요령들이 여러분의 웹 개발에 도움이 되었으면 좋겠습니다.