그누보드 QA - 배너좌우정렬문

배너좌우정렬문

2023.10.11 23:20:52 1902 (59.♡.♡.4)

본문


<div id="banner" style="display: flex; justify-content: space-between;">
    <div id="banner1" style="flex: 1; text-align: left;">
        <a id="link2" href="" target="_blank"><img src="img/banner1.png" alt="배너 1" style="vertical-align: bottom;"></a>
    </div>
    <!-- 두 번째 배너 -->
    <div id="banner2" style="flex: 1; text-align: right;">
        <a id="link3" href="" target="_blank"><img src="img/banner2.png" alt="배너 2" style="vertical-align: bottom;"></a>
    </div>
</div>

이런식인데 지금
모바일전용페이지라 이미지를 768px를 반쪼개서 두개를만들어서 각각 링크를 걸려고하는데
화면이 작아지면서 좌우에서 상하로 바뀌는현상이있는데 어떻게 수정해야될까요

#css

답변 2

웹메이킹 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-10-12 00:09:24 39.♡.♡.46

다음과 같은 방법도 있으니 참고해 보세요


<div id="banner" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
    <div id="banner1" style="flex: 1; text-align: left; max-width: 50%;">
        <a id="link2" href="" target="_blank"><img src="img/banner1.png" alt="배너 1" style="vertical-align: bottom; width: 100%;"></a>
    </div>
    <!-- 두 번째 배너 -->
    <div id="banner2" style="flex: 1; text-align: right; max-width: 50%;">
        <a id="link3" href="" target="_blank"><img src="img/banner2.png" alt="배너 2" style="vertical-align: bottom; width: 100%;"></a>
    </div>
</div>

이렇게 수정하면 화면이 작아져도 배너 이미지가 좌우에서 상하로 바뀌지 않고, 적절하게 반으로 나뉘어 표시될 것으로 생각합니다. 물론 실제 디자인에 따라 스타일을 조절할 필요가 있을 수 있으니 디자인에 맞게 더 추가적인 스타일을 적용해야 할 수도 있을 것 같습니다.