<div class="container2">
<div class="item">
<img class="talk" src="/img/talk.png"/>
<div>1.착한 말 쓰기</div>
</div>
<div class="item">
<img class="talk2" src="/img/talk2.png"/>
<div>2.자기 의견 적극적으로 얘기하기</div>
</div>
<div class="item">
<img class="talk3" src="/img/talk3.png"/>
<div>3.궁금하면 바로 질문하기</div>
</div>
</div>
.container2 {
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.talk {
width: 150px;
height: 150px;
}
.talk2 {
width: 150px;
height: 150px;
}
.talk3 {
width: 150px;
height: 150px;
}
img 태그에는 css를 통해 background "속성"을 사용하지 않고 css를 활용하고자하면 div 태그를 활용해야하는 점과
flex 속성을통해 위와같이 보기 좋게 정렬하여 렌더링 할 수 있는 방법을 배웠다!