CSS 화면사이즈에 따라 다른 사이즈의 배너가 노출되게(PC형배너/모바일형 배너)

페이지 정보

작성자 관리자 (49.♡.11.159) 조회 27회 작성일 22-09-04 09:48(마지막 글 수정: 2022년 09월 04일)

본문

화면 사이즈, 즉 모바일과 pc 에 따라 반응형으로 배너를 노출시키고 싶을때 2가지 형태가 있습니다..


첫번째는 1개의 배너 이미지로 화면 사이즈에 따라 배너를 연동해서 줄이는 반응형 배너 이고

두번째는 제이커리를 이용해서 화면 사이즈에 따라 준비한 2개의 배너(pc형/모바일혀)을 각각 노출시키는 방식 입니다.


아래 소스는 두번째 방법으로 제가 현재 사용하고 있는 소스로 기록형으로 남깁니다.

제 사이트에 적용해서 잘 나오고 있기 때문에 타 사이트에서 이상반응은 직접 수정하기 바랍니다.

제가 질문에 답변을 드릴 정도는 안됩니다. ^^


[code]

<!-- 배너 사이즈별 다르게 나타내기 -->

<style>

.banner_ad {width:100%; max-width:720px ;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){/*제이쿼리 설정으로 575이하일때 아래 설정이 적용됨*/

.mobile_only { display:block; margin:0 auto; }/*모바일 경우

블록으로 하고 가운데 정렬*/

.pc_only { display:none; }

}

</style>


<div class="banner_ad">

<div class="pc_only">

<a href='https://giftjoa.biz/?ref=mybookmark'><img src="https://giftzone.co.kr/banner/giftjoa_a_970x90.gif" alt="판촉물제작 쇼핑몰 기프트조아"/></a>

</div>

<div class="mobile_only">

<a href='https://giftjoa.biz/?ref=mybookmark'><img  src="https://giftzone.co.kr/banner/giftjoa_a_300x250.jpg" alt="판촉물제작 쇼핑몰 기프트조아" /></a>

</div>

</div>

[/code]



반응형배너 관련된 게시글 보기

댓글목록

등록된 댓글이 없습니다.

사이트안내 | 서비스 이용약관 | 개인정보 처리방침 |
마이링크 | 후원안내 | FAQ | Admin