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 to 이재원 Cancel 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...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우 원인 파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
Ubuntu 20.04에 MySQL 5.7 설치
비씨티원 인공지능 서비스 플랫폼 BAP(Bctone AI service Platform)의 설치 환경은 공식적으로 Ubuntu 18.04와 MySQL 버전 5.7 입니다. 최근 Ubuntu...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다. 1. apt update 사용자...