네컷 사진 두 줄로 보이기

2023.02.02

저번 시간에 네컷사진을 만들어보았는데

한줄로 네장을 넣으니 사진이 작아져서 사진이 넣기 힘들었다

그래서 두칸씩 두줄로 바꿔보려고 한다!

https://pingu514.tistory.com/14

VS Code 네컷 사진 만들기

 

 

전체와 이미지 두개씩 class로 묶어주었다.

<div class="container">
    <div class="photo-row">
        <div id="image1" class="photo-frame"> ... </div>
        <div id="image2" class="photo-frame"> ... </div>
    </div>
    <div class="photo-row">
        <div id="image3" class="photo-frame"> ... </div>
        <div id="image4" class="photo-frame"> ... </div>
        </div>
    </div>
</div>

 

photo-row클래스는 flex-direction: row;를 설정하여 사진이 한 줄에 보이게 했다.

.photo-row {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

 

원래는 container클래스에 넓이를 설정해서 보여줬는데, 사진의 사이즈를 지정해서 보여주었다.

.container {
    height: 100%;
    padding: 30px;
    ...
}

.photo-frame {
    margin: 10px;
    height: 240px;
    width: 180px;
    ...
}

 

결과물!

https://jinguleee.github.io/4cut/

Document