마카로닉스

1938 No

웹 표준 사이트 만들기 - Webstandard2019 (Webstoryboy) - 3 이벤트 및 추가 기능 실습, slick slide, 슬릭 갤러리 스크립트, 레이어 팝업, 윈도우 팝업, 라이트 박스

2022-09-27 15:01:02 By 라이트 0 1139 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

유튜브 강의목록 : https://www.youtube.com/playlist?list=PL4UVBBIc6giKixok-bC7XVEx0ZFsngr5Z

인프런 강의 : https://www.inflearn.com/course/웹-표준-사이트-만들기/dashboard

강의 참고자료

3.이벤트 및 추가 기능 실습

25. 갤러리

index.html

                                <!-- 갤러리 -->
                                <div class="gallery">
                                    <h4>포트폴리오</h4>
                                    <div class="gallery_btn">
                                        <ul>
                                            <li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>
                                            <li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>
                                            <li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>
                                            <li class="gb_icon4"><a href="#"><span class="ir_pm">   다음이미지</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="gallery_img">
                                        <ul>
                                            <li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
                                            <li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
                                            <li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
                                            <li><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></li>
                                             <li><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- //갤러리 -->

style.css

/* 갤러리 */
.gallery{ position: relative; border: 1px solid #ccc; height: 254px; overflow: hidden;}
.gallery h4{font-size: 14px; color: #0093bd; border-bottom: 1px solid #ccc; padding: 10px 0 8px 11px; font-weight: bold;}
.gallery .gallery_btn{position: absolute; right: 5px; top: 7px;}
.gallery .gallery_btn ul{overflow: hidden;}
.gallery .gallery_btn ul li{float: left; margin: 1px 2px;}
.gallery .gallery_btn ul li a{display: block; width: 23px; height: 23px; background: url(../img/icon.png) no-repeat; }
.gallery .gallery_btn ul li.gb_icon1 a{background-position: -150px -120px;}
.gallery .gallery_btn ul li.gb_icon2 a{background-position: -150px -143px;}
.gallery .gallery_btn ul li.gb_icon3 a{background-position: -150px -166px;}
.gallery .gallery_btn ul li.gb_icon4 a{background-position: -150px -189px;}
.gallery .gallery_btn ul li.gb_icon1 a:hover{background-position: -173px -120px;}
.gallery .gallery_btn ul li.gb_icon2 a:hover{background-position: -173px -143px;}
.gallery .gallery_btn ul li.gb_icon3 a:hover{background-position: -173px -166px;}
.gallery .gallery_btn ul li.gb_icon4 a:hover{background-position: -173px -189px;}
.gallery .gallery_img img{width: 100%;}

26. 로그인

index.html

                                <!-- 로그인 -->
                                <div id="login-wrap">
                                    <h4 class="ir_su">로그인 정보</h4>
                                    <form  id="login_form" name="login_form"  action="post">
                                        <fieldset>
                                            <legend class="ir_su">로그인 및 관련 설정</legend>
                                            <div class="login_header">
                                                <h5 class="ir_su">로그인 보안</h5>
                                                <div class="lh_check">
                                                    <input id="infor_check" type="checkbox" class="input_check">
                                                    <label for="infor_check">로그인 상태 유지</label>
                                                </div>
                                                <div class="lh_ip">
                                                    IP보안 <em>ON</em>
                                                </div>
                                            </div>
                                            <div class="login_content">
                                                <h5 class="ir_su">로그인 영역</h5>
                                                <div class="lc_text">
                                                    <label for="uid" class="ir_su">아이디</label> 
                                                    <input type="text" id="uid" name="uid" class="input_text" maxlength="20" placeholder="아이디">
                                                    <label for="upw" class="ir_su">비밀번호</label> 
                                                    <input type="password" id="upw" name="upw" class="input_text" maxlength="20" placeholder="비밀번호">                                                    
                                                </div>
                                                <button class="lc_btn" type="submit">로그인</button>
                                            </div>
                                            <div class="login_footer">
                                                <h5 class="ir_su">로그인 문제해결</h5>
                                                <ul>
                                                    <li><a href="#"><strong>회원가입</strong></a> / </li>
                                                    <li><a href="#">아이디</a>&middot;<a href="#">비밀번호 찾기</a></li>
                                                </ul>
                                            </div>
                                        </fieldset>

                                    </form>
                                </div>
                                <!-- //로그인 -->

style.css

/* 로그인 */
#login-wrap{background: #f2f4f5; padding: 15px; margin-bottom: 15px;}
.login_header{overflow: hidden;font-size: 12px; height: 30px;}
.login_header .lh_check{float: left; padding-right: 15px;}
.login_header .lh_check .input_check{vertical-align: -2px;}
.login_header .lh_ip{float: left;}
.login_header .lh_ip em{color:#0093bd; text-decoration: underline; cursor: pointer;}

.login_content{position: relative; overflow: hidden;}
.login_content .lc_text{}
.login_content .input_text{width: 182px; height: 16px; padding: 2px 5px; border: 1px solid #b2b2b2; background: #fff;margin-bottom: 3px;}
.login_content .lc_btn{position: absolute; right: 0; top: 0; width: 62px; height: 47px; border: 1px solid #b2b2b2; background: #fff;}


.login_footer{margin-top: 5px;}
.login_footer li{ display: inline;}
.login_footer li a{font-size: 12px;}

27. 팝업

index.html

                                <!-- 팝업 -->
                                <div class="popup">
                                    <h4>Advertisement</h4>
                                    <ul>
                                        <li><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>
                                        <li><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>
                                        <li class="last"><a href="#"><img src="img/sban09.jpg" alt="이미지3"></a></li>
                                    </ul>
                                </div>
                                <!-- //팝업 -->

style.css

/* 팝업 */
.popup h4{font-size: 14px; color: #0093bd; padding-bottom: 4px; font-weight: 700;}
.popup ul{overflow: hidden;}
.popup ul li{float: left; width: 93px; margin-right: 5px;}
.popup ul li.last{margin-right: 0;}
.popup ul li img{width: 100%;}

28. 푸터 & W3C 수정

index.html

            <div id="footer">
                <div class="container">
                    <h2 class="ir_su">푸터 영역</h2>
                    <div class="footer">
                        <ul>
                            <li> <a href="#">사이트 도움말</a></li>
                            <li> <a href="#">사이트 이용약관</a></li>
                            <li> <a href="#">사이트 운영규칙</a></li>
                            <li> <a href="#"><strog>개인정보취급방침</strog></a></li>
                            <li> <a href="#">책임의 한계와 법적고지</a></li>
                            <li> <a href="#">게시중단요청 서비스</a></li>
                            <li> <a href="#">고객센터</a></li>                            
                        </ul>
                        <address>
                            Copyright&copy;macaronics.net All Right Reserved
                        </address>
                        <div class="w3c">
                                <p>
                                <a href="http://jigsaw.w3.org/css-validator/check/referer">
                                    <img style="border:0;width:88px;height:31px"
                                        src="//jigsaw.w3.org/css-validator/images/vcss"
                                        alt="올바른 CSS입니다!" />
                                </a>
                            </p>
                            <p>
                                <a href="http://jigsaw.w3.org/css-validator/check/referer">
                                    <img style="border:0;width:88px;height:31px"
                                        src="//jigsaw.w3.org/css-validator/images/vcss-blue"
                                        alt="올바른 CSS입니다!" />
                                </a>
                            </p>
                        </div>
                    </div>

                </div>   
            </div>
            <!-- //footer -->

style.css

/* 푸터 */
.footer{padding: 25px 0; text-align: center;}
.footer ul{margin-bottom: 20px;}
.footer li{ display: inline; padding: 0px 7px 0 10px; position: relative;}
.footer li:before{content:''; width: 1px; height: 12px; background: #ccc; position: absolute; left: 0px; top: 0px;}
.footer li:first-child:before{width: 0px; height: 0px;}
.w3c{margin-top: 15px;}
.w3c p{display: inline;}

4.마무리 실습

29. 전체 메뉴 스크립트

index.html

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".tit .btn").on("click", function(e){
            e.preventDefault();            
            // $("#cont_nav").css("display", "block");
            // $("#cont_nav").show();
            // $("#cont_nav").fadeIn();
            // $("#cont_nav").slideDown();
            // $("#cont_nav").toggle();
            //  $("#cont_nav").fadeToggle();
            $("#cont_nav").slideToggle(200);
            $(this).toggleClass("on");
        });
    </script>

30. 배너 스크립트

https://kenwheeler.github.io/slick/

index.html

    <!DOCTYPE html>
    <html lang="ko">
    <head>
~

        <!-- CSS STYLE -->
        <link rel="stylesheet"  href="./css/reset.css" />
        <link rel="stylesheet"  href="./css/style.css" />
        <link rel="stylesheet"  href="./css/slick.css" />
~

</head>
<body>
~

                        <div class="ban">
                            <!-- <a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
                            <ul>
                                <li class="ban_img1">
                                    <a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a>
                                </li>
                                <li class="ban_img2">
                                    <a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a>
                                </li>
                                <li class="ban_img3">
                                    <a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a>
                                </li>                                                        
                            </ul>
                            <a href="#" class="next"><span class="ir_pm">이전 이미지</span></a> -->

                           
                            <div><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></div>
                            <div><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></div>
                            <div><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></div>
                            <div><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></div>
                            <div><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></div>
                            <div><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></div>             
                            <div><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></div>
                            <div><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></div>
                            <div><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></div>                        


                        </div>





    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script>
        //배너
        //html 마크업 셋팅 -> css 연동  -> 제이쿼리 연동 -> 제이쿼리 호출
        $(document).ready(function(){
            $('.ban').slick({
                 infinite: true,
                 slidesToShow: 3,
                 slidesToScroll: 3,
                 autoplay:true,
                 autoplaySpeed:3000,
                 dots:true
            });
        });

    </script>
</body>
</html>

style.css

/* 슬릭 배너 */
.slick-slider{padding:0;}
.ban{position: relative; padding: 24px 0 40px  !important; }

.ban .slick-arrow{position: absolute; text-indent: -9999px;top: 80px; width: 43px; height: 43px; background: #ccc;cursor: pointer;}
.ban .slick-prev{left: -80px; background: url(https://cdn.jsdelivr.net/gh/braverokmc79/webstandard2019@v1.0.0/web/img/icon.png) no-repeat -150px 0;}
.ban .slick-next{right: -80px;background: url(https://cdn.jsdelivr.net/gh/braverokmc79/webstandard2019@v1.0.0/web/img/icon.png) no-repeat -150px -43px;}
.ban .slick-prev:hover{ background-position:  -193px 0;}
.ban .slick-next:hover{background-position:  -193px -43px;}
.ban img{border: 4px solid #dcdcdc; }
.ban img:hover{border-color: #98bcdc; }

.ban .slick-slide{margin: 10px;}
.ban .slick-dots{position: absolute; bottom:15px; display: block; width: 100%; text-align: center;}
.ban .slick-dots li{display: inline-block; width: 15px; height: 15px; margin: 5px;}
.ban .slick-dots li button{font-size: 0; line-height: 0; display: block; width: 15px; height: 15px; cursor: pointer;background: #5dbfeb;border-radius: 50%; }
.ban .slick-dots li.slick-active button{background: #2b91c8;}
/* slick-prev slick-arrow */

31. 탭메뉴 스크립트

index.html

                                <!-- 탭메뉴 -->
                                <div class="tab_menu">
                                    <h4 class="ir_su">탭 메뉴</h4>
                                    <ul>
                                        <li class="active"><a href="#">공지사항1</a>
                                            <ul>
                                                <li><a href="#">첫번째 공지사항 탭 메뉴 테스트 목록 입니다. 첫번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                                <li><a href="#">두번째 공지사항 탭 메뉴 테스트 목록 입니다. 두번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                                <li><a href="#">세번째 공지사항 탭 메뉴 테스트 목록 입니다. 세번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                            </ul>      
                                        </li>
                                        <li><a href="#">공지사항2</a>
                                            <ul style="display: none;">
                                                <li><a href="#">공지사항2 첫번째 공지사항 탭 메뉴 테스트 목록 입니다. 첫번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                                <li><a href="#">공지사항2 두번째 공지사항 탭 메뉴 테스트 목록 입니다. 두번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                                <li><a href="#">공지사항2 세번째 공지사항 탭 메뉴 테스트 목록 입니다. 세번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                            </ul>                                         
                                        </li>
                                        <li><a href="#">공지사항3</a>
                                           <ul style="display: none;">
                                                <li><a href="#">공지사항3 첫번째 공지사항 탭 메뉴 테스트 목록 입니다. 첫번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                                <li><a href="#">공지사항3 두번째 공지사항 탭 메뉴 테스트 목록 입니다. 두번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                                <li><a href="#">공지사항3 세번째 공지사항 탭 메뉴 테스트 목록 입니다. 세번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
                                            </ul>                                     
                                        </li>
                                    </ul>                                    
                                </div>
                                <!-- //탭메뉴 -->

script

            //탭 메뉴
            $(".tab_menu > ul li").on("click", function(e){
                e.preventDefault();
                $(".tab_menu > ul li").removeClass("active");
                $(".tab_menu > ul li ul").hide();
               
                $(this).addClass("active").find("ul").show();               
            });

32. 갤러리 스크립트

index.html

                            <!-- 갤러리 -->
                                <div class="gallery">
                                    <h4>포트폴리오</h4>
                                    <div class="gallery_btn">
                                        <!-- <ul>
                                            <li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>
                                            <li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>
                                            <li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>
                                            <li class="gb_icon4"><a href="#"><span class="ir_pm">   다음이미지</span></a></li>
                                        </ul> -->
                                        <button class="gb_icon1 play"><span class="ir_pm">시작</span></button>
                                        <button class="gb_icon2 pause"><span class="ir_pm">정지</span></button>
                                        <button class="gb_icon3 prev"><span class="ir_pm">이전이미지</span></button>
                                        <button class="gb_icon4 next"><span class="ir_pm">다음이미지</span></button>
                                    </div>
                                    <div class="gallery_img">
                                        <!--
                                         <ul>
                                            <li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
                                            <li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
                                            <li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
                                            <li><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></li>
                                             <li><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></li>
                                         </ul> 
                                        -->


                                        <div><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></div>
                                        <div><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></div>
                                        <div><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></div>
                                        <div><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></div>
                                        <div><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></div>                                              

                                    </div>
                                </div>
                                <!-- //갤러리 -->

style.css

/* 슬릭 갤러리 */
.gallery{ position: relative; border: 1px solid #ccc; height: 255px; overflow: hidden; }
.gallery h4{font-size: 14px; color: #0093bd; border-bottom: 1px solid #ccc; padding: 10px 0 8px 11px; font-weight: bold;}
.gallery .gallery_btn{position: absolute; right: 5px; top: 7px;}
.gallery .gallery_btn ul{overflow: hidden;}
.gallery .gallery_btn ul li{float: left; margin: 1px 2px;}
.gallery .gallery_btn button{float: left; margin: 1px 2px;display: block; width: 23px; height: 23px; background: url(../img/icon.png) no-repeat; cursor: pointer;}
.gallery .gallery_btn .gb_icon1{background-position: -150px -120px;}
.gallery .gallery_btn .gb_icon2{background-position: -150px -143px}
.gallery .gallery_btn .gb_icon3{background-position: -150px -166px;}
.gallery .gallery_btn .gb_icon4{background-position: -150px -189px;}
.gallery .gallery_btn .gb_icon1:hover{background-position: -173px -120px;}
.gallery .gallery_btn .gb_icon2:hover{background-position: -173px -143px}
.gallery .gallery_btn .gb_icon3:hover{background-position: -173px -166px;}
.gallery .gallery_btn .gb_icon4:hover{background-position: -173px -189px;}
.gallery .gallery_img img{width: 100%;}

scirpt

            //갤러리
            $(".gallery_img").slick({
                arrows:false,
                autoplay:true,
                autoplaySpeed:3000,
                pauseOnHover:true,
                fade:true,
                infinite:true,
                slidesToShow:1,
                speed:300
            });

            $(".play").click(function(){
                $(".gallery_img").slick("slickPlay");
            });

            $(".pause").click(function(){
                $(".gallery_img").slick("slickPause");
            });

            $(".prev").click(function(){
                $(".gallery_img").slick("slickPrev");
            });

            $(".next").click(function(){
                $(".gallery_img").slick("slickNext");
            });

33. 레이어 팝업

index.html

   

                     <!-- 팝업 -->
                                <div class="popup">
                                    <h4>Advertisement</h4>
                                    <ul>
                                        <li class="layerPopup"><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>
                                        <li class="windowPopup"><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>
                                        <li class="last"><a href="#"><img src="img/sban09.jpg" alt="이미지3"></a></li>
                                    </ul>
                                </div>
                                <!-- //팝업 -->

~


 <!-- 레이어 팝업 -->
        <div id="layer">
            <img src="img/webstandard1.jpg" alt="웹표준 사이트">
            <a href="#" class="close">close</a>
        </div>
    <!-- //레이어 팝업 -->

style.css

/* 레이어팝업 */
#layer{display: none; position: fixed; left: 50px; top:50px; width: 700px; border: 10px solid #dceff7; box-shadow: 3px 3px 3px rgba(0,0,0,0.4);}
#layer img{width: 100%; display: block;}
#layer .close{position: absolute; right: 20px; top: 20px; background: #0093bd; color: #fff; padding: 1px 6px;}
#layer .close:hover{text-decoration: underline;}

            $(".layerPopup").on("click", function(e){
                e.preventDefault();
                 //$("#layer").slideDown();
                $("#layer").fadeIn();
            })

            $(".close").on("click", function(e){
                e.preventDefault();
                //$("#layer").slideUp();
                $("#layer").fadeOut();
            })

34. 윈도우 팝업

index.html

                <!-- 팝업 -->
                                <div class="popup">
                                    <h4>Advertisement</h4>
                                    <ul>
                                        <li class="layerPopup"><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>
                                        <li class="windowPopup"><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>
                                        <li class="last"><a href="#"><img src="img/sban09.jpg" alt="이미지3"></a></li>
                                    </ul>
                                </div>
                                <!-- //팝업 -->

popup.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹스토리보이, 웹표준, 웹접근성, 사이트만들기">
    <meta name="generator" content="Visual Studio Code">    
    <title>WEBSTNDARD SITE</title>
    <style>
        *{margin: 0;padding: 0;}
        img{width:100%}
    </style>
</head>
<body>
    <div>
        <img src="img/webstandard2.jpg" alt="웹표준">
    </div>
</body>
</html>

        //윈도우 팝업
        $(".windowPopup").click(function(e){
            e.preventDefault();
            //window.open("파일명", "파일이름", "옵션설정");
            //옵션 :left, top , width, height, status, toolbar, location, menubar, scrollbars, fullscreen
            window.open("popup.html", "popup01", "width=800, height=590px ,left=50, top=50, scrollbars=0, toolbar=0, menubar=0");
        })

35. 라이트박스

lightGallery

https://www.lightgalleryjs.com/

https://github.com/sachinchoolur/lightGallery

css 소스

        <link type="text/css" rel="stylesheet" href="./css/lightgallery.css" />
        <link type="text/css" rel="stylesheet" href="./css/lg-zoom.css" />
        <link type="text/css" rel="stylesheet" href="./css/lg-thumbnail.css" />

js 소스

    <script src="js/lightgallery.umd.js"></script>
    <script src="js/plugins/thumbnail/lg-thumbnail.umd.js"></script>
    <script src="js/plugins/zoom/lg-zoom.umd.js"></script>

<!--     
  
    <script src="js/plugins/autoplay/lg-autoplay.umd.js"></script>
    <script src="js/plugins/comment/lg-comment.umd.js"></script>
    <script src="js/plugins/fullscreen/lg-fullscreen.umd.js"></script>
    <script src="js/plugins/hash/lg-hash.umd.js"></script>
    <script src="js/plugins/mediumZoom/lg-medium-zoom.umd.js"></script>
    <script src="js/plugins/pager/lg-pager.umd.js"></script>
    <script src="js/plugins/relativeCaption/lg-relative-caption.umd.js"></script>
    <script src="js/plugins/rotate/lg-rotate.umd.js"></script>
    <script src="js/plugins/share/lg-share.umd.js"></script>
    <script src="js/plugins/vimeoThumbnail/lg-video.umd.js"></script>
    <script src="js/plugins/video/lg-video.umd.js"></script>
 -->

index.html

                                <!-- 팝업 -->
                                <div class="popup">
                                    <h4>Advertisement</h4>
                                    <ul>
                                        <li class="layerPopup"><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>
                                        <li class="windowPopup"><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>
                                        <li class="last lightgallery" id="lightgallery">
                                            <a href="img/webstandard3.jpg"><img src="img/sban09.jpg" alt="이미지3"></a>
                                            <a href="img/webstandard3.jpg" style="display: none;"><img src="img/sban09.jpg" alt="이미지3"></a>
                                            <a href="img/webstandard3.jpg" style="display: none;"><img src="img/webstandard3.jpg" alt="이미지3"></a>
                                            <a href="img/webstandard3.jpg" style="display: none;"><img src="img/webstandard1.jpg" alt="이미지3"></a>
                                            <a href="img/webstandard3.jpg" style="display: none;"><img src="img/webstandard2.jpg" alt="이미지3"></a>
                                            <a href="img/webstandard3.jpg" style="display: none;"><img src="img/webstandard3.jpg" alt="이미지3"></a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- //팝업 -->

script

        
    //   lightGallery(document.getElementById('lightgallery'), {
    //     plugins: [lgZoom, lgThumbnail],
    //     licenseKey: 'your_license_key',
    //     speed: 500,
    //     thembnail:true,
    //     autoplay:true,
    //     pause:3000,
    //     progressBar:true
    //     // ... other settings
    // });

    lightGallery(document.querySelector(".lightgallery"), {
        plugins: [lgZoom, lgThumbnail],
        licenseKey: 'your_license_key',
        speed: 500,
        thembnail:true,
        autoplay:true,
        pause:3000,
        progressBar:true
        // ... other settings
    });

36. 마무리