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

한개의 버튼(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를 이용해서 필요한 이미지를 가져왔다.

답글 남기기

3 + 8 =