하나의 버튼에 이미지와 텍스트를 같이 넣고 싶다면

한개의 버튼(button) 안에 이미지와 문자를 같이 넣고 싶다면 어떻게 할까요.

위의 그림과 같이 이미지와 텍스트가 같이 있는 HTML, CSS를 만들어 보자.

<button>
    <div>
        <img src="https://picsum.photos/70/30">
        <span> TEXT </span>
    </div>
</button>

div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    }

button {
  width : 200px;  
  font-size: 1.5em;
}

방법

1. 이미지와 텍스트를 일단 div로 감싼다.
2. 그 위를 button으로 감싼다.
3. css에서 이미지와 텍스트를 나란히 배치하기 위해 flex를 설정해준다.

랜덤 이미지 사이트인 https://picsum.photos를 이용해서 필요한 이미지를 가져왔다.