아래의 예시 코드를 통해 아이콘과 텍스트가 올바르게 정렬되도록 할 수 있습니다.

.icon {
  float: left; /* 아이콘을 왼쪽으로 플로팅합니다. */
  margin-right: 10px; /* 텍스트와의 간격을 설정합니다. */
}

.text {
  clear: left; /* 아이콘의 왼쪽에 다른 플로팅된 요소가 위치하지 않도록 설정합니다. */
}

위 코드에서 .icon 클래스에는 아이콘에 대한 스타일을 적용하고, .text 클래스에는 텍스트에 대한 스타일을 적용합니다. .text 클래스에 clear: left;를 적용하여 아이콘의 왼쪽에 다른 플로팅된 요소가 위치하지 않도록 설정하고, 텍스트가 아이콘 아래에 위치하도록 합니다.

이렇게 하면 아이콘과 텍스트를 쉽게 정렬할 수 있습니다.

설명이 도움이 되셨나요? 그 밖에 궁금한 것이 있으시다면 언제든 물어보세요!