모바일과 데스크톱에서 이미지 숨기기 및 표시하기

제품 지원
1

게시글에 이미지가 10개 있습니다.

첫 번째 이미지 5개는 모바일에서 숨기고(데스크톱에서는 표시) 싶습니다.

마지막 이미지 5개는 데스크톱에서 숨기고(모바일에서는 표시) 싶습니다.

위와 같은 효과를 내기 위한 합리적인 HTML과 CSS가 있을까요?

Discourse 전문가분들, 감사합니다.

2

안녕하세요,

가장 확실한 방법은 이미지를 래핑하는 것 같습니다.

[wrap="hide-mobile"]
... 첫 번째부터 다섯 번째 이미지
[/wrap]

[wrap="hide-desktop"]
... 여섯 번째부터 열 번째 이미지.
[/wrap]

그리고 CSS는 다음과 같습니다:

모바일 탭에서:

[data-wrap="hide-mobile"] {
    display: none;
}

데스크톱 탭에서:

[data-wrap="hide-desktop"] {
    display: none;
}

어떻게 생각하시나요?