배너좌우정렬문 채택완료
</p>
<p><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></p>
<p> <!-- 두 번째 배너 -->
<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></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
다음과 같은 방법도 있으니 참고해 보세요
</p>
<p><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>이렇게 수정하면 화면이 작아져도 배너 이미지가 좌우에서 상하로 바뀌지 않고, 적절하게 반으로 나뉘어 표시될 것으로 생각합니다. 물론 실제 디자인에 따라 스타일을 조절할 필요가 있을 수 있으니 디자인에 맞게 더 추가적인 스타일을 적용해야 할 수도 있을 것 같습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
eyekiss2년 전
style 에 width:49%; 를 추가해보세요.
모바일은 % 로 사이즈를 줘야 합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
채택
채택
답변대기
채택
답변대기
답변대기
채택
채택
답변대기
답변대기
채택
채택
답변대기
채택
답변대기
채택
답변대기
채택