HTML @media, class=visible : 화면 스크린 크기에 따라 영역이나 가젯을 표시 / 숨김 - 반응형 테마에서 모바일 데스크탑에서만 보이게 / 안보이게

반응형 테마는 스크린이 작은 모바일 기기와 해상도가 높은 데스크탑 모니터까지 동일한 테마가 보이게 됩니다.

그러한 특성상, 스크린 사이즈에 따라 특정한 영역이나 위젯(가젯) 등을 숨기거나 보이게 할 필요가 있을 때가 있습니다.

아래는 그러한 기능을 구현할 수 있는 코드들입니다.

주의할 것은, 실제로는 불려 올라오지만, 외견상으로만 표시되지 않는 것이므로, 웹페이지의 소스보기를 하면, 내용이 그대로 노출 됩니다.

그러므로, 그래서는 안되는 경우에는사용하면 안되겠습니다.
예컨대, 구글 애드센스는 숨기거나 가려서는 안된다는 규정이 있으므로, 이 코드를 사용하면, 실제로는 애드센스가 불려 오지만, 숨겨져 보이지 않게 되므로, 정책위반에 해당할 가능성이 높을 것입니다.

1. HTML 가젯을 추가하고, 해당 가젯은 스크린 사이즈가 450px 이하일 때만 보이게 하는 코드입니다.

[스크린 사이즈가 450px 이하일 때만 표시되게 하는 코드]

@media screen and (min-width: 450px) {
#HTML {display:none;}
}

위 태그는 min-width 를 max-width 로 바꾸어서 해도 됩니다.

@media screen and (max-width: 999px) {
#HTML {display:none;}
}

2. 접속하는 스크린 크기에 따라, 보여줄 내용을 각각 다르게 하려면, 아래와 같은 방식으로 하면 됩니다.

[ (1) 접속하는 스크린 크기에 따라 표시/숨김을 제어하는 CSS ]

@media all and (max-width: 959px) {
    .naeyong .x700{display:block;}
    .naeyong .x490{display:none;}
    .naeyong .x290{display:none;}
}

@media all and (max-width: 720px) {
    .naeyong .x700{display:none;}
    .naeyong .x490{display:block;}
    .naeyong .x290{display:none;}
}

@media all and (max-width: 479px) {
    .naeyong .x700{display:none;}
    .naeyong .x490{display:none;}
    .naeyong .x290{display:block;}
}

[ (2) 스크린 크기에 따라 보여줄 내용]

<div class="naeyong">
    <div class="x700">데스크탑과 같은 큰 스크린으로 접속시 보여줄 내용</div>
    <div class="x490">타블렛과 같은 중간 크기 스크린으로 접속시 보여줄 내용</div>
    <div class="x290">스마트폰 같은 작은 크기 스크린으로 접속시 보여줄 내용</div>
</div>

3. <DIV> 영역을 데스크탑 모니터에서만 표시되게 하는 코드 입니다.

[데스크탑 컴퓨터 등의 해상도가 높은 큰 모니터에만 보이게 하는 코드]

위와는 반대로 <DIV> 영역을 모바일 기기등과 같이 스크린 사이즈가 작은 경우에만 표시되게 하는 코드 입니다.

[모바일 기기와 같이 해상도가 낮은 작은 스크린에서만 보이게 하는 코드]

4. 위는 스크린 사이즈에 따라 표시(visible)하는 코드이고, 아래는 그와 반대로 스크린 사이즈에 따라 숨기는(hidden) 코드입니다. 사용법은 위와 같습니다.

[모바일 기기와 같이 해상도가 낮은 작은 스크린에서만 보이게 하는 코드]

hidden-sm
hidden-md
hidden-xs

5. <A> 링크 태그를 보이거나 숨기려면 아래와 같이 할 수 있습니다

도움이 되기를 바랍니다.

Search This Blog

사용법어찌?

HTML @media, class=visible : 화면 스크린 크기에 따라 영역이나 가젯을 표시 / 숨김 - 반응형 테마에서 모바일 데스크탑에서만 보이게 / 안보이게