모바일과 PC용 배너를 구분하여 보여주는 방법 – 간단한 소스 1가지

모바일과 PC용 배너를 구분하여 보여주는 방법에 관한 지난 포스팅에 이어 이번에는 좀 더 간단한 소스를 소개 하려 합니다. css 부분이 많이 간다해 졌습니다.

소스 코드 – css

<style>
.banner_ad {width:100%; max-width:1200px ;margin: 0 auto ; text-align:center;}
.mobile_only { display:none; }
.mobile_only img, .pc_only img { width:auto; max-width:100%; }
@media screen and (max-width: 575px){
.mobile_only { display:block; margin:0 auto; }
.pc_only { display:none; }
}
</style>

소스 코드 – html

<div class="banner_ad">
	<div class="pc_only">
		<a href='https://panchok.co.kr' target='_blank' rel='noopener noreferrer'><img src="https://giftzone.co.kr/banner/panchok-info-webp.webp" alt="판촉코리아-오늘의 판촉물"></a>
	</div>
	<div class="mobile_only">
		<a href='https://panchok.co.kr' target='_blank' rel='noopener noreferrer'><img src="https://giftzone.co.kr/banner/panchok-info-sq-webp.webp" alt="판촉코리아-오늘의 판촉물"></a>
	</div>
</div>

참고 사이트

판촉코리아의 오늘의 판촉물 사이트를 참고 했습니다.

https://panchok.co.kr