HTML 구성을 위한 투쟁

grid 는 grid-column ,grid-row 를 사용하여 비율을 지정할 수 있다. 최고.

Sep 03, 2024

완성된 화면.


        <div class="travel__info">
            <div class="travel__title">이 섹션 제목은 뭐라고 하지 대체</div>
            <div class="travel__content__box">

                <div class="travel__content1">
                    <img src="#">
                    <div class="travel__side__box">
                        <div class="travel__text1">전주 수목원</div>
                        <div class="travel__text2">한번쯤 가 봐야할 인생 단풍 여행지</div>
                    </div>
                </div>
                <div class="travel__content2">
                    <img src="#">
                    <div class="travel__side__box">
                        <div class="travel__text1">전주 수목원</div>
                        <div class="travel__text2">한번쯤 가 봐야할 인생 단풍 여행지</div>
                    </div>
                </div>
                <div class="travel__content3">
                    <img src="#">
                    <div class="travel__side__box">
                        <div class="travel__text1">전주 수목원</div>
                        <div class="travel__text2">한번쯤 가 봐야할 인생 단풍 여행지</div>
                    </div>
                </div>
            </div>

레이아웃은 예쁘게 만들어 놓았으나 사진만 넣으면 예상한 칸을 뛰어넘어 이미지 크기대로 마구 늘어나는 문제가 생겼다.


<div class="box1">

</div>
<div class="box__container">
		<div class="box2"></div>
		<div class="box3"></div>
</div>

이렇게 구성하여 box1 과 box__container 를 그리드 하고

박스 컨테이너 내부에서 따로 정렬하려 하였으나 알고보니 grid 의 엄청난 기능이 있었다.

그리드 만으로도 이러한 레이아웃 구성을 할 수 있기 때문에

구역 분리를 위해 굳이 div 로 감쌀 필요가 없었다.


   .travel__content__box {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       gap: 10px;
   }
   .travel__content1 {
       height: 610px;
       grid-column: 1 /1 span;
       grid-row: 1 / 2 span;
   }

   .travel__content2 {
       height: 300px;
       grid-column: 2 /3 span;
   }

   .travel__content3 {
       height: 300px;
       grid-column: 2 /3 span;
   }

제일 바깥의 컬럼이 4칸이라고 간주하고

content 1은 가로로 1/1, 세로로 1/2 크기를 차지한다.

content2,3 은 2번째부터 3칸을 차지하도록 설정하는 것.

grid-column ,grid-row 최고다.

확인을 위해 임의로 템플릿을 구성해 보았다.


  <style>
        .img-box {
            height: 600px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            border: 1px solid black;
        }

        img {
            height: 100%;
            width: 100%;
        }

        .box1 {
            border: 1px solid red;
            grid-column: 1 /1 span;
            grid-row: 1 / 2 span;
        }

        .box2 {
            border: 1px solid red;
            grid-column: 2 /2 span;
        }

        .box3 {
            border: 1px solid red;
            grid-column: 2 /2 span;
        }
    </style>
</head>

<body>
    <div class="img-box">
        <div class="box1"><img src="#"></div>
        <div class="box2"><img src="#"></div>
        <div class="box3"><img src="#"></div>
    </div>

</body>

좋은 느낌. 이미지만 제대로 들어가면 성공이다.

빨간 화살표 즈음에 img-box 의 선이 있다 …

비율은 잘 지키고 있으나 이미지를 넣으니 마음대로 늘어나는 문제… 😥

결국엔 이미지를 감싸고 있는 div 에 높이를 수동으로 할당할 수 밖에 없었다.

해결은 했지만 height를 할당하고 내부 요소는 100% 로 맞춰지도록 하였는데 해당 크기를 벗어나는지는 모르겠다.

진정한 해결 방법이 아닌것 같아 찝찝하지만 어쨌든 오늘도 해내다. 👍

.travel__content__box { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; } .travel__content1 { height: 610px; grid-column: 1 /1 span; grid-row: 1 / 2 span; } .travel__content2 { height: 300px; grid-column: 2 /3 span; } .travel__content3 { height: 300px; grid-column: 2 /3 span; }