알려드립니다
- 현재까지 알려진 많은 Masonry 레이아웃 구현 방법이 완벽하지 않기에 이 템플릿에서는 Masonry JS 라이브러리를 직접 사용합니다.
- Masonry 기능은 Preview와 실제 서비스 페이지에서만 작동합니다. 편집 환경에서는 DOM 렌더링에 부하를 주지 않기 위해 작동하지 않습니다.
시작하기
핵심 레이어
Settings - jetcraft-block-masonry
* 핵심 레이어는 원하는 페이지에 붙여 넣어야 할 가장 중요한 레이어입니다. 자세한 내용은 템플릿 기본 사용 안내 문서를 참고해 주세요.
사용하지 않는 레이아웃 인스턴스 삭제
반응형과 고정형 중 하나를 선택했다면
미리보기 비활성화
CSS Classes 필드에서 preview 클래스를 삭제하면 각 컬럼의 배경색과 컬럼 넘버가 사라집니다.
컨테이너의 너비와 간격 수정
반응형 레이아웃
CSS Classes필드에responsive클래스가 존재해야 합니다.- 그리드 컬럼의 너비와 간격은
Custom CSS필드의 지역 변수를 수정하면 자동으로 반영됩니다. - 자바스크립트 코드를 직접 수정할 필요가 없습니다.
고정형 레이아웃
CSS Classes필드에responsive클래스가 없어야 합니다.- 고정형은 컬럼의 너비와 간격을 CSS, 자바스크립트 인스턴스 양 쪽 모두 동일하게 맞추어야 합니다.
- 고정형은 한 줄에 나열 될 컨테이너의 갯수를 정할 수 없습니다. 컨테이너의 고정 너비보다 큰 공간이 있으면 채우고 없으면 줄바꿈 합니다.
고급 설정
Masonry JS API
이 템플릿은 Masonry JS 라이브러리의 모든 API를 사용할 수 있습니다. 컨테이너의 구조와 클래스 이름도 모두 해당 라이브러리의 매뉴얼과 동일하게 구성되어 있습니다.
템플릿 CSS 스타일 수정
- Jetcraft의 템플릿은 공통된 방식으로 CSS 스타일을 수정할 수 있습니다. 자세한 내용은 템플릿의 스타일을 관리하는 방법 게시물을 참고해 주세요.
- 엘리멘터가 CSS를 처리하는 원리에 대해 이해하면 템플릿과 위젯의 CSS를 보다 장기적의고 체계적으로 관리할 수 있습니다. 엘리멘터 사용에 익숙해 졌다면 별도의 블로그 게시물(공개 예정)을 보다 효율적으로 스타일을 관리하세요.