Sample Page

PORTFOLIO

포트폴리오 메뉴는 게시판이 아닌, html/css/script 로 구현되고 있습니다.
모든 소스가 하나의 페이지로 구현됩니다.
HTML/이미지가 많을 경우 저사양 디바이스에서 로딩 이슈가 발생할 수 있습니다.


01 photo

.col- 클래스를 이용하여 레이아웃을 변경할 수 있습니다.

02 Albums

03 video

04 popup

data-bs-target 에 팝업소스의 id 의 값을 삽입하세요.
ID 값은 중복사용이 불가합니다.

/ basic

/ full


필터 설정

1.필터값 지정

data-filter=".영문소문자"에 필터값을 삽입합니다.
한글은 불가합니다.

    <div class="grid-filter-wrap justify-content-center">
       <ul class="grid-filter style-3" data-container="#portfolio">
          <li class="activeFilter"><a href="#" data-filter="*">All</a></li>
          <li><a href="#" data-filter=".필터값1">white</a></li>
          <li><a href="#" data-filter=".필터값2">black</a></li>
       </ul>
     </div>

2.항목 설정

article 항목에 설정한 필터값을 삽입하세요.
중복 삽입 가능합니다.

<div id="portfolio" class="portfolio row grid-container" data-layout="fitRows">
   <article class="portfolio-item 필터값1 필터값2">
     ....
   </article>
</div>