웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 많습니다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있습니다. 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여줄 수도 있지요. 하지만 웹 개발을 하다보면 아이콘과 텍스트를 나란히 가로 배치하는데 의외로 어려움을 겪을 수 있는데요. 이번 포스팅에서는 이럴 때 적용할 수 있는 CSS 스타일링 요령에 대해서 알아보겠습니다. HTML 마크업 스타일
웹에서 이미지 아래나 옆에 의도치 않게 공백이 생겨서 애를 먹는 경우가 있는데요. 이번 포스팅에서는 언제 이렇게 이미지 주변에 불필요한 공백이 생길 수 있으며, 이러한 성가신 공백을 효과적으로 제거하는 다양한 요령을 알려드리겠습니다. 이미지 아래에 생기는 공백 <div>나 <figure>와 같은 HTML 요소 안에 이미지를 담고 있는 <img> 요소를 넣어보겠습니다. 이미지 아래에 살짝 공백이 생긴 것이 보이시나요? 🤨 이미지 아래에 이러한 공백이 생기는 이유는 <img> 요소의 display 속성이 기본적으로 inline이기 때
CSS의 display 속성에서 inline과 block의 차이를 정확히 알고 사용하고 계신가요? 😄 이 둘을 합쳐놓은 inline-block이라는 녀석은 또 뭘까요? 😅 이번 포스팅에서는 display 속성에서 가장 근간이되지만 은근히 많은 분들이 헷갈려하시는 inline과 block 그리고 inline-block에 대해서 알아보도록 하겠습니다. inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 <span>이나 <