[css] position sticky이용하여 스크롤시 좌측 텍스트는 고정하고 우측 이미지 움직이기, 모바일버전에서 스크롤시 텍스트가 배경으로 깔리고 이미지 덮기

<section class="sec2">
        <div class="Tbox">
            <h3>
                타이틀
            </h3>
            <h3>
                제목
            </h3>
            <p>
               내용
            </p>
        </div>
        <div class="imgBox">
            <div class="img1">
               이미지
            </div>
            <div class="img2">
               이미지
            </div>
            <div class="img3">
                이미지
            </div>
            <div class="img4">
                이미지
            </div>
        </div>
    </section>

✅html
1) sticky로 배경이 될 텍스트 작성
2) 상단으로 올라갈 이미지 작성

.sec2 {
    display: flex;
    justify-content: space-between;
    padding: 40px 0 20px 0;
}
.sec2 .Tbox {
    position: sticky;
    top: 25%;
    height: fit-content;
    padding-bottom: 50px;
}

.sec2 .imgBox {
    width: 45%;
}

.sec2 .imgBox div[class^="img"] {
    background-size: contain;
    height: 400px;
    text-indent: -9999px;
    overflow: hidden;
    margin: 15px 5px;
}

✅css / position sticky이용하여 스크롤시 좌측 텍스트는 고정하고 우측 이미지 움직이기
1) flex로 가로 배치
2) 좌측 고정될 텍스트에 position sticky 선언
3) 우측으로 올라갈 이미지 작성
4) 각 이미지 사이즈 조정, 텍스트 숨기기

.sec2 {
    flex-direction: column;
}
.sec2 .imgBox {
    width: 100%;
    backdrop-filter: blur(1.5px);
    box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.5);
}

.sec2 .imgBox div[class^="img"] {
    height: 300px;
}

.sec2 .Tbox {
    z-index: -1;
}

✅css / position sticky이용하여 스크롤시 텍스트가 배경으로 깔리고 이미지 덮기
1) flex로 세로 배치
2) 배경으로 덮을 이미지에 filter blur처리하여 텍스트 흐리게 하기
3) 이미지 크기 조절하기
4) 텍스트 부분 z-index를 -1로 이미지보다 뒤에 위치하게 하기


✔ sticky 이용하여 유동적인 고정가능