웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 있다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있고, 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여주어야 할 때도 있다.
이럴 때 사용할 수 있는 CSS 스타일링 요령에 대해서 알아보았다.
1. HTML 마크업
아이콘과 텍스트를 나란히 배치하는 HTML 코드를 작성하였다. 아이콘은 SVG를 텍스트는 <span> 태그를 사용하였다.
2. 기본 스타일링
정렬을 하기 전에 중요한건 우선 SVG 이미지와 텍스트의 크기를 비슷하게 맞춰주는 것이다. 아이콘 크기와 텍스트 크기가 반드시 정확히 동일할 필요는 없고 사용 사례에 따라서 약간의 차이는 있어도 된다.
위의 화면을 보면 아이콘과 텍스트의 크기를 맞췄지만 정렬이 약간 틀어져있는 것을 볼 수 있다.
3. vertical-align
그렇다면 어떻게 아이콘과 텍스트를 수평으로 나란히 정렬할 수 있을까?
기본적으로 SVG도 인라인(inline) 요소이고, 텍스트도 인라인 요소이다. 따라서 인라의 요소를 수평 방향으로 정렬을 맞춰주는 CSS의 vertical-align 속성을 사용다면 된다.
두 요소에 동일하게 vertical-align 속성을 middle로 설정해주면 아이콘과 이미지의 정렬이 맞는 것을 볼 수 있다.
하지만 이 스타일 방법의 단점은 아이콘과 텍스트 간의 거리를 정확히 원하는 값으로 설정하기 어렵다. 왜냐하면 인라인 요소 간의 간격은 letter-spacing 속성이 결정하는데 이 속성값을 바꿀 경우 단어 간의 간격에도 영향을 주게 되기 때문이다.
4. Flexbox
이 번에는 Flexbox(플렉스박스)를 활용해서 아이콘과 텍스트를 수평으로 나란히 정렬해 보았다.
아이콘과 이미지의 부모 요소를 Flexbox로 만들고, align-items 속성을 center로 설정해주면 되는데 이 방법은 gap 속성을 통해서 아이콘과 이미지 간의 간격을 자유롭게 조정할 수도 있다.
이 스타일 방법은 특히 버튼(button)이나 태그(tag), 레이블(label)과 같은 UI를 구현할 때 유용하다.
5. 응용: 세로 배치
Flexbox를 활용하면 아이콘과 텍스트를 가로, 세로 나란히 배치할 수 도 있다.