_imgTag_

           

[ 27 INFINITE ] 갤러리 게시판의 디자인 변경 / 관리 방법 안내
  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

    • 이 상품은 해외배송이 가능한 상품입니다

    [ 27 INFINITE ] 갤러리 게시판의 디자인 변경 / 관리 방법 안내품절
    갤러리 게시판의 배열수, 비율, 개수 등을 관리 할 수 있는 메뉴얼을 제공합니다.

    기본 정보
    [ 27 INFINITE ] 갤러리 게시판의 디자인 변경 / 관리 방법 안내
    갤러리 게시판의 배열수, 비율, 개수 등을 관리 할 수 있는 메뉴얼을 제공합니다.
    사용후기 0
    수량 수량증가수량감소
    타임세일

    카드혜택안내 미확인 입금자

    개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다.
  • 상품 수량
    수량
    증가 감소
    상품 옵션
    옵션 선택

  • 수량을 선택해주세요.

    옵션선택 박스를 선택하시면 아래에 상품이 추가됩니다.

    최소주문수량 1개 이상 / 최대주문수량 0개 이하입니다.

    상품 목록
    상품명 상품수 가격
    [ 27 INFINITE ] 갤러리 게시판의 디자인 변경 / 관리 방법 안내 수량증가 수량감소 0 (  )
    사이즈 가이드
  • TOTAL PRICE 0 (0개)

    할인가가 적용된 최종 결제예정금액은 주문 시 확인할 수 있습니다.

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
  • 공급사 바로가기

카페24의 갤러리 게시판 뿐만 아니라, 모든 웹상에 존재하는 갤러리 게시판의 문제점은
가로 세로에 대한 비율을 미리 지정할 수 없다는 문제인데요 ( 고객이 등록하므로 더더욱 ) 
이 문제를 해결하기 위해 이미지를 배경으로 처리 했으며, 일정 비율을 유지함으로써 디자인의 일관성을 유지합니다.

이러한 목적 때문에 코드를 약간 다뤄야 할 경우가 있는데, 알아보겠습니다.




1. 우선 갤러리 게시판의 코드를 열어주세요.
   갤러리 게시판의 디자인 부터 수정해보겠습니다.



        <!-- 갤러리 목록 -->
        <div module="board_list_8">
            <!--
                $count = 20
                $login_page_url = /member/login.html
                $deny_access_url = /index.html
            -->
            <div class="sp--box" grid="4" gap="3xl" mobile="2" tablet="3">
                <!--@import(/board/inc/list_gallery.html)-->
            </div>
        </div>


갤러리 게시판은 이 부분만 보시면 되는데요.


$count = 20 // 한 페이지에 보여지는 갤러리의 개수 입니다.

grid="4" // 가로로 몇개씩 나열할지 결정합니다. 1 ~ 10을 지원합니다.

gap="3xl" // 갤러리 사이의 여백을 의미합니다. xs, sm, md, lg, xl, 2xl, 3xl 을 지원합니다.

mobile="2" // 모바일 환경이 되었을때 가로로 몇개씩 나열할지 결정합니다. 1 ~ 10을 지원합니다.

tablet="3" // 테블릿 환경이 되었을때 가로로 몇개씩 나열할지 결정합니다. 1 ~ 10을 지원합니다.


이정도 옵션으로 갤러리 게시판을 컨트롤 할 수 있습니다.

이 옵션은 사실 상품 목록의 옵션과 같습니다.


spstrap library 를 사용하기 때문에 기본적으로 박스는 같은 구조를 지닙니다.





2. 갤러리 이미지가 정사각형인데, 가로로 길게 혹은 세로로 길게 수정하고 싶어요.


이 경우는 코드 수정이 약간 필요한데요,

여러번 수정해서 자신에게 가장 잘 맞는 코드로 수정하시면 됩니다.


 

customize.css 파일을 여시고 최 하단에


* 가로로 길게 할 경우 아래의 코드를 넣어주세요.

* 100%는 정사각형 입니다. 이 수치가 줄어들수록 가로 비율이 늘어납니다.

.xans-board--gallery-list .thumb img { width: 100%; }


* 세로로 길게 할 경우 아래의 코드를 넣어주세요.

* 0%는 정사각형 입니다. 이 수치가 커질수록 세로 비율이 늘어납니다.

.xans-board--gallery-list .thumb img { padding-bottom: 0%; }


생각보다 간단하지만, 여러분이 직접 수정해보시는것이 가장 좋은 방법이니,

여러번 수정해보시고 가장 알맞은 수치로 고정하시길 바랍니다.


 


  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
MORE VIEW

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

REVIEW

게시물이 없습니다

목록

후기 작성하기 모두보기

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

Q & A

게시물이 없습니다

목록

상품 문의하기 모두보기