반응형 이미지 작업시 : PC 와 모바일 이미지 다르게 나오게 하기

홈페이지 리뉴얼을 하며

콘텐츠 페이지를 그냥 사용하는 경우에

PC 용 이미지와

모바일 용 이미지를 따로 사용하는 경우에 사용하시면 됩니다.

그대로 사용하셔도 되고요.

참고해서 적절하게 사용해보세요.

 

<style>
.divh {
    display: none;
}
@media only screen and (min-width: 768px){
    .divh.desktop {
        display: block;
text-align: center;

    }
.divh.mobile {
        display: none;
    }    
}
@media only screen and (max-width: 767px){
    .divh.desktop {
        display: none;
    }
    .divh.mobile {
        display: block;
text-align: center;
    }    
}
</style>

<div class="divh desktop">
<div class="">
<img src="PC용 이미지 링크">
</div>
</div>

<div class="divh mobile">
<div class="">
<img src="모바일용 이미지 링크">  
</div>
</div>