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