갤러리에서 가로이미지 갯수와 세로 사이즈를 변경해보도록 하겠습니다.
먼저 갤러리 가로 이미지 갯수 변경 방법입니다.
먼저 자료실게시판 → 갤러리게시판으로 변경을 해주어야 합니다. 관리자 화면에서 "Mangboard > 게시판관리"를 클릭해주세요. 해당 게시판의 갤러리 Shortcode를 복사합니다.
관리자 화면에서 "페이지 > 모든페이지"를 클릭해주세요. 해당 페이지를 클릭한 뒤, Shortcode를 붙여넣기 합니다.
이제 갤러리 게시판으로 설정되었습니다.
이제 반응형에 따라 갤러리 게시판의 이미지 개수를 설정하는 방법을 살펴보겠습니다.
갤러리 가로 이미지 개수를 수정하는 숏코드 속성은 갤러리 숏코드에 아래와 같이 responsive_class="col-543" 속성을 추가해서 사용하시면 됩니다.
[mb_board name="board2" list_type="gallery" style="" responsive_class="col-543"] 여기서 543이란...
PC에서 갤러리 게시판 가로 이미지 갯수 5개, Tablet에서 갤러리 게시판 가로 이미지 갯수 4개, Mobile에서 갤러리 게시판 가로 이미지 갯수 3개로 설정해라 라는 의미입니다.
숏코드 속성에 responsive_class="col-432" 를 추가하시면 아래와 같이 접속 환경에 따라 4개,3개,2개 형태로 나타나게 됩니다. [mb_board name="board2" list_type="gallery" style="" responsive_class="col-432"]
PC에서는 아래와 같이 이미지가 4개씩 보입니다.
Tablet에서는 3개씩 보입니다.
Mobile에서는 2개씩 보입니다.
갤러리 게시판 반응형 클래스에 대한 설정은 위와 같이 아주 간단합니다.
이제 반응형에 따라 갤러리 게시판의 이미지 세로 사이즈를 설정하는 방법을 살펴보겠습니다.
갤러리 이미지 세로 사이즈를 수정하는 숏코드 속성은 갤러리 숏코드에 아래와 같이 height="200px" 속성을 추가해 주시면 됩니다.
[mb_board name="board2" list_type="gallery" responsive_class="col-421" height="200px"] Mobile과 Tablet에서 갤러리 세로 사이즈를 다르게 설정하실 경우에는 아래와 같이 tablet_height="210px" mobile_height="220px" 속성을 추가해 주시면 됩니다.
[mb_board name="board2" list_type="gallery" responsive_class="col-421" height="200px" tablet_height="210px" mobile_height="220px"]
위의 숏코드는 반응형 클래스가 col-421로 설정하고 3개의 이미지 사이즈를 설정하였기 때문에 PC에서는 한줄에 이미지 4개(세로 사이즈 200px), Tablet에서는 한줄에 이미지 2개(세로 사이즈 210px), Mobile에서는 한줄에 이미지 1개(세로 사이즈 220px)가 표시됩니다.
보다 세부적인 속성은 아래 주소의 망보드 사용팁을 참고해 보시기 바랍니다
| 
Hometory
