MiniProject_240416

        <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 속성을통해 위와같이 보기 좋게 정렬하여 렌더링 할 수 있는 방법을 배웠다!