30. 웹 표준 사이트 만들기(2019) - 배너 스크립트

30. 웹 표준 사이트 만들기(2019) - 배너 스크립트

※ 이미지 스프라이트 기법에는 a태그를 쓰고
쓰지않으면 img태그를 쓰는 듯. 큰이미지는 img를 쓴다.

이미지 사용시 어떤 때는 ul li를 쓰고 어떤 때는 그냥 a링크를 나열한다.
아마도 가로로 나열만 하는 거라면 블록태그인 ul li를 안쓰고 세로로 나열할 때만 ul li를 쓰는 듯하다.
하나로 묶어 주기 위한 용도로(a, img) li를 사용하기도 한다. 하나로 관리하기 편하게.

슬라이드 효과를 직접 만들수도 있지만 여기서는 slick.js 플러그인을 사용한다.

 

http://kenwheeler.github.io/slick에 접속한다.

slick - the last carousel you'll ever need

아래 usage를 클릭하여 순서대로 따라한다.

깃헙 사이트에 가면 옵션값을 확인할 수 있다.

소스

index.html

//header에 추가

<link rel="stylesheet" href="css/slick.css">

...

<div id="cont_ban">

           <div class="container">

                      <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>

           </div>

</div>

<!-- //cont_ban -->

...

//하단에 script 위에 추가 -> 추가한 후 브라우저로 확인한다. (페이지 소스보기한후 링크를 클릭해서 파일이 추가됬는지 확인한다.)

<script src="js/slick.min.js"></script>

<script type="text/javascript">

           //배너

           //html 마크업 세팅 -> css 연동 -> 제이쿼리 연동 -> 제이쿼리 호출 스크립트 작성

           $(".ban").slick({

             //infinite 무한히 돈다.

             infinite: true,

             //slidesToShow 이미지 3개가 나란히 나온다.

             slidesToShow: 3,

             slidesToScroll: 3,

             //arrows: false 화살표가 안나옴 기본은 true

             //autoplay: true,

             autoplaySpeed: 3000,

             //아래 번호 나오게

             dots: true

                     

           });

         ...

</script>

...

 

style.css

...

/* 슬릭배너 */

.ban {position: relative; padding: 24px 0 40px;}

.ban .slick-prev {position: absolute; left: -80px; top: 80px; width: 43px; height: 43px; background: #ccc; background: url(../img/icon.png) no-repeat -150px 0; text-indent: -9999px;}

.ban .slick-next {position: absolute; right: -80px; top: 80px; width: 43px; height: 43px; background: #ccc; background: url(../img/icon.png) no-repeat -150px -43px; text-indent: -9999px;}

.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;}

/* slick-slide 이미지 요소 */

.ban .slick-slide {margin: 10px;}

/* slick-dots 하단 점들을 감싸고 있는 ul 태그 (ul>li>button). bottom 밑에서부터 15px 떨어지게.

position: absolute를 주는 순간 .ban이 영역이 줄어드는데 이는 영역안에 속해있다가 자유로워졌기 때문이다. 블록영역안에 있는 태그들의 높이값에

따라 높이가 늘어나기 떄문. display: block; width: 100%;는 absolute를 쓰면 쓰는듯.*/

.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;}

/* font-size: 0; line-height: 0;는 폰트를 안보이게 한다(slick.js를 쓰면 글씨가 있다.). */

.ban .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 15px; height: 15px; cursor: pointer; background: #5dbfeb; border-radius: 50%;}

/* 활성화되면 slick-active 표시가 붙는다. */

.ban .slick-dots li.slick-active button {background: #2b91c8;}

...

 

reset.css

...

/* 버튼 초기화 */
button {border: 0;}

...