CSS로 아이콘과 텍스트를 수평 정렬하기 | 달레의 웹 프로그래밍
www.youtube.com
CSS로 아이콘과 텍스트를 수평 정렬하기
웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 많습니다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있습니다. 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여줄 수도 있지요.
하지만 웹 개발을 하다보면 아이콘과 텍스트를 나란히 가로 배치하는데 의외로 어려움을 겪을 수 있는데요. 이번 포스팅에서는 이럴 때 적용할 수 있는 CSS 스타일링 요령에 대해서 알아보겠습니다.
📺 동영상: https://youtu.be/fjpefToVx48
📝 포스팅: https://www.daleseo.com/css-align-icon-text/
🧑💻 실습 코드:
https://codepen.io/daleseo/pen/LYqYwXZ
https://codepen.io/daleseo/pen/GRzRYPe
https://codepen.io/daleseo/pen/vYbYQBb
https://codepen.io/daleseo/pen/LYqEPLj
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 1월 2일 오후 9:39
댓글 0
함께 읽은 게시물
쫓아다니지 말고 대응하라
두 카페가 있다. 두 카페 모두 점원이 주문을 받고 커피를 내리는 카페였다. 그런데, 어느 날 한 카페에서 키오스크를 도입했다. 그렇다면, 여전히 점원이 주문을 받는 카페보다 키오스크를 도입한 카페가 변화에 더 기민하게 대응하는 것일까? 그럴 수도 있고, 그렇지 않을 수도 있다. 변화에 기민하게 대응한다는 건, 변화를 빨리 도입한다는 것과는 다른 이야기이기 때문이다.
... 더 보기
