안녕하세요

현재까지 배운걸로는 사진을 세로순번형태를 프레임 및 바디를 이용하였는데 가로순번형태의 프레임를 만들어 보려는데 어떻게 해야할지 모르겠어요.

즉 세로형태의 코딩네컷 말고 가로형태의 코딩네컷을 만들어보려고 시도하는데 어떤 코드를 써야할지 모르겠어요.

<style>
/* 이서윤체 폰트 적용을 위한 코드 */
@font-face {
font-family: "LeeSeoyun";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff")
format("woff");
font-weight: normal;
font-style: normal;
}

/* body태그 자체에 css 요소 부여 */
body {
font-family: "LeeSeoyun";
margin: 0;
display: flex;
justify-content: center;
background-image: url("./background.png");

}

.container{
width: 420px;
background-color: #7c7c7c;
height:100%;

}

.photos{
margin-top : 30px;

}

.photo-frame{
background-color: white;
margin: 15px 20px;
height: 450px;

background-size: cover;
position: relative;
}

.footer{
display: flex;
flex-direction: column;
align-items: center;
}

.f-title{
color: white;
font-size: 25px;
font-weight: 900px
;
}

.f-date{
color: white;
font-size: 15px;
font-weight: 500px;
}

#image1{
background-image: url('./IMG_6494.jpeg');
background-size: cover;
background-position: center;
}

#image2{
background-image: url('./IMG_6559.JPG');
background-size: cover;
background-position: center;
}

#image3{
background-image: url('./IMG_6508.jpeg');
background-size: cover;
background-position: center;
}

#image4{
background-image: url('./IMG_6563.JPG');
background-size: cover;
background-position: center;
}

.photo_description{
color: white;
background-color: rgba(0, 0, 0, 0.277);

width: fit-content;
padding: 0 7px;
margin-bottom: 10px;
border-radius: 10px;
position: absolute;
bottom: 0;

transform: translate(-50%);
left: 50%;
}
</style>