[내일배움캠프][미니프로젝트] 개인페이지 만들기

 

 

사진을 2열로 글자랑 같은 공간을 차지하게 배치하는 것이 생각보다 까다로웠다

<div class='photos'>
                    <div class='photorow'>
                        <p class = "photo"><br>쉴 때는 침대에 누워서<br>주로 아이패드로 <br>영어공부를 합니다</p>
                        <!--영어-->
                        <img class="photo" , src="./image/minsun/book.jpg">

                        <!--책상-->
                        <p class = "photo"><br>책상에 앉아서 <br>개발공부를 합니다</p>
                        <img class="photo" , src="./image/minsun/desk.jpg">

                    </div>
                    <div class='photorow'>

                        <!--카페-->
                        <img class="photo" , src="./image/minsun/cafe.jpg">
                        <p class = "photo"><br>자주 가는 카페의 <br>이 자리에 앉으면 <br>집중이 잘 됩니다</p>

                        <!--go for a walk-->
                        <img class="photo" , src="./image/minsun/walk.jpg">
                        <p class = "photo"><br>동네 공원을 <br>매일 산책합니다</p>

                    </div>
                </div>

.photos {
    width: 700px;
    height: 300px;
    display: flex;
    
    text-align: center;
    flex-direction: column;

}

.photo {

    width: 140px;
    height: 110px;
    /* object-fit: contain; */

    margin-right: 5px;
    margin-bottom: 5px;

    border-radius: 20px;
    flex:1;
    text-align: center;
    vertical-align: middle;

}
.photorow{
    flex-direction: row;
    display: flex;
    width:max-content;

}

2중으로  flex를 column, row로 지정하고

가로 flex 박스의 안에 flex:1인 요소들을 배치해서 해결했다

 

Q. 근데 vertical-align: middle; 이건 왜 안 되는지 모르겠다 텍스트가 중앙에 정렬되지 않아서 <br> 로 강제로 개행해야 했다