모바일과 PC용 배너를 구분하여 보여주기 – 미디어 쿼리를 이용한 1가지 방법

모바일과 PC용 배너를 구분하여 보여주기 위해 미디어 쿼리(Media Query)를 사용할 수 있습니다. 아래는 그 구현 방법입니다. 웹사이트 운영 중, 홍보용 배너를 가로형으로 제작해 노출시켰으나 모바일 환경에서 반응형으로 작동할 때 배너 안의 텍스트가 너무 작게 보이는 문제가 발생했습니다. 이에 모바일용 배너를 별도로 제작하기로 했으며, 즉 두 개의 이미지를 준비해 각각 PC 접속과 모바일 접속 시 다르게 표시하도록 구현하자는 생각에서 시작되었습니다.

필요한 이미지 준비

배너를 구분하여 보여주기 위해 먼저, PC용 이미지와 모바일 용 이미지를 각각 준비 합니다. 다음 샘플 이미지는 오늘의 판촉물 사이트 모바일용 & pc용 배너 샘플 이미지 입니다.

배너를 구분하여 보여주기 – 소스코드

HTML에서는 두 개의 이미지를 준비하고, 각각 PC용과 모바일용 클래스를 추가합니다:

<div class="info-banner">
    <a href="/" target="_blank">
        <!-- PC용 배너 -->
        <img src="img/panchok-main-info-banner.png" alt="판촉코리아" class="pc-banner">
        <!-- 모바일용 배너 -->
        <img src="img/panchok-main-info-banner-mobile.png" alt="판촉코리아" class="mobile-banner">
    </a>
</div>

CSS에서는 다음과 같이 설정 합니다.

.info-banner {
    width: 100%;
    max-width: 100%;
    margin: 10px auto;
    text-align: center;
}

/* PC용 배너 스타일 */
.pc-banner {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block; /* PC에서 보이게 */
}

/* 모바일용 배너 스타일 */
.mobile-banner {
    display: none; /* 기본적으로 완전히 숨김 */
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* 모바일 화면 (768px 이하) */
@media only screen and (max-width: 768px) {
    .pc-banner {
        display: none !important; /* PC 배너 강제로 숨김 */
    }
    
    .mobile-banner {
        display: block !important; /* 모바일 배너 강제로 표시 */
    }
}

이 코드의 주요 특징

두 개의 이미지를 각각 pc-banner와 mobile-banner 클래스로 구분해 기본적으로 PC용 배너만 표시하고 모바일용 배너는 숨기고, 화면 너비가 768px 이하가 되면 반대로 PC용 배너를 숨기고 모바일용 배너를 표시합니다. 여기서 화면 크기 기준점(768px)은 필요에 따라 조정하실 수 있습니다.

일반적인 브레이크 포인트

모바일: 320px ~ 480px
태블릿: 768px ~ 1024px
데스크톱: 1024px 이상

위 글은 블로그의 ‘웹&코딩‘ 카테고리로 분류되었으며, 관련된 글을 더 많이 참고할 수 있습니다.