makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

반응형 해상도에 맞추어 이미지 슬라이더 출력시키기

‘홈페이지 첫 화면에 이미지 슬라이더 만들기’에서 만든 첫 화면 슬라이드는 PC 화면에 맞추어 만들었습니다.

 

하지만, 테블릿이나 모바일에서 보면 아래의 그림처럼 너무 작게 보이게되어 있으나마나하게 됩니다.

zpost_02img01

 

 

모바일 환경에 어울리도록 비율이 다른 두 가지 버전의 슬라이드를 만들어 배치하도록 하겠습니다.

 

1. 새로운 슬라이드 세트 추가하기

테블릿에서 보여질 970*400px, 모바일에서 보여질 590*300px 사이즈의 슬라이더 세트 두 개를 추가로 만듭니다.

 

[관리자] > [Meta Slider]에 접속합니다.

위에서 정한 사이즈의 슬라이더 세트 두 개를 ‘970’‘590’이라는 이름으로 추가하고 설정합니다.

Setting의 width와 height를 각 이미지 사이즈와 같게 입력하고, 다른 설정은 ‘홈페이지 첫 화면에 이미지 슬라이더 만들기’(글 보기)에서 만든 ‘1920’이라는 슬라이더의 설정과 같게 설정합니다.

zpost_02img02

 

 

2. 첫 화면에 배치하기

[관리자] > [외모] > [위젯]에 접속합니다.

‘Front Page Showcase’ 상자에 ‘Meta Slider’ 위젯을 세팅합니다. 아래의 그림처럼 각각 ‘970’과 ‘590’이라는 슬라이더로 설정합니다.

zpost_02img03

 

홈페이지 첫 화면에 세 개의 슬라이더가 배치된 걸 볼 수 있습니다.

이제 이 세개의 슬라이더를 해상도로 구분하여 하나씩만 보여지게 설정하겠습니다.

zpost_02img04

 

 

 

3. 해상도에 따라 구분하여 출력시키기

배치된 슬라이더는 아래의 그림처럼 각각 고유 ID를 가지고 있습니다.

슬라이더 ‘1920’은 ‘metaslider_container_101’, 슬라이더 ‘970’은 ‘metaslider_container_107’, 슬라이더 ‘590’은 ‘metaslider_container_111’로 지정되어 있습니다.

zpost_02img04

 

 

스타일(CSS)을 작성하여 세 개의 슬라이드를 해상도에 따라 하나씩 출력되도록 하겠습니다.

[관리자] > [외모] > [Custom CSS]에서 다음과 같은 추가스타일을 작성합니다.

각각의 해상도에 따라 다른 슬라이드가 출력되도록 하기위해 미디어쿼리를 사용해 959px 이하를 테블릿 환경으로, 600px이하를 모바일 환경으로 정하고, display 구문으로 구분하여 출력시킵니다.

/* 슬라이더 출력설정 */
#metaslider_container_107 {display:none;}
#metaslider_container_111 {display:none;}

@media screen and (max-width: 959px) {
  #metaslider_container_101 {display:none;}
  #metaslider_container_107 {display:block;}
  #metaslider_container_111 {display:none;}
}

@media screen and (max-width: 600px) {
  #metaslider_container_101 {display:none;}
  #metaslider_container_107 {display:none;}
  #metaslider_container_111 {display:block;}
}

미디어쿼리에서 구분하는 해상도는 필자가 BC TOWN™ 테마 작업을 하면서 정한 값으로 절대적인 값은 아닙니다.

 

 

 

홈페이지 첫 화면에 해상도에 따라 다른 슬라이드가 출력됩니다.

데모사이트 : http://makebct.cafe24.com

zpost_02img05

 

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함 1. Start with the system update sudo apt update...
Input error: k: Format of site key was invalid 에러 해결 방법
WP-Members 워드프레스 플러그인을 활용해서 회원가입 기능을 구현 하였는데, 다음과 같은 에러가 발생 하였습니다.         이는 WP-Members의...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우 원인 파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다. 그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...