비주얼 스튜디오 코드 42 _ slick, dots, autoplay

728x90

● slick 사이트 : 이벤트 코드를 복사해서 이용할 수 있는 사이트

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

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

get it now > download now 해서 다운로드를 받는다

두개의 파일을 복사해서 작업하고있는 비주얼 스튜디오 코드 파일에 javascript 파일은 js 파일(새로만들기)에 붙여넣는다.

slick.css 는 css 파일에 넣는다.

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

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

slick > usage 들어가서 방법보고 따라하면 된다.

.ban 골격잡아주기

div>img 태그 9개 만들어주기

slick.css 링크 걸어주기

slick.js 도 script에 링크 걸어주기

demos > 넣어줄 효과의 코드를 복사해서 script 안에 붙여넣는다

괄호안에 적용해줄 클래스를 넣어준다.

previous, next 글자를 클릭하면 이미지가 좌우로 슬라이드 되는것을 볼 수 있다.

previous, next 수정하기 위해 클래스 찾기

previous 선택해서 slick-prev 복사한다

css 에 붙여넣는다.

.slick-prev 위치잡아주기

.slick-prev 에 아이콘 이미지 불러오기

마우스오버시 이미지 변경되게하기

previous 글씨 없애주기

● text-indent: -99999px 글씨 창에 벗어나게하기

.slick-next도 편집한다.

slick은 여백을 맞추는 것이 어렵다.

.ban에 padding으로 여백을 맞춘다.

셋팅 옵션 들어가기

코드 별로 설명이 나와있다.

슬릭에 나와있는 셋팅 표를 참고해서 액션 제어를 할 수 있다.

닷버튼 이용하기

● 이미지 border 마우스 오버시 테두리 색 변경하기

img와 img:hover에 border로 잡아주고 img에 border 색상을 투명으로 해주면 이미지 크기가 고정된다.

script > slideToscroll : 1 로 변경

검사 들어가서 닷의 클래스 이름을 복사해온다.

css에서 .slick-dots 붙여넣고 편집을 한다.

li 위치 잡아주기

닷 모양 만들어주기

선택된 닷 표현하기

검사에 들어가면 선택된 class의 이름은 slick-active 이다.

css 에 클래스 붙여넣고 편집해주기

.slick-dots에 margin-left로 정렬 위치를 해준다.

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="조반짝 팀프로젝트 이름(제작자)">
    <meta name="description" content="웹표준에 의한 웹페이지 샘플링입니다.(내용)">
    <meta name="keywords" content="웹표준, 조반짝, 하이미디어, 샘플사이트(키워드)">
    <meta name="generator" content="Visual Studio Code(작성도구)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹표준_header</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/slick.css">
    <link rel="stylesheet" href="./css/style.css">


    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 스킵 네비게이션 -->
    <div id="skip">
        <a href="#cont_nav">전체 메뉴 바로가기</a>
        <a href="#cont_ban">배너 영역 바로가기</a>
        <a href="#cont_cont">컨텐츠 영역 바로가기</a>
    </div>

    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header">
                    <div class="header_menu">
                        <a href="#">로그인 가입</a>
                        <a href="#">CONTACT US</a>
                        <a href="#">ENGLISH</a>
                    </div>
                    <div class="header_tit mt50">
                        <h1>하이미디어 구로캠퍼스</h1><br>
                        <a href="https://www.himedia.co.kr/">자바기반 풀스택 웹개발자3</a>
                    </div>
                    <div class="header_icon mt30">
                        <a href="#" class="icon1"><span>icon1</span class="ir_pm"></a>
                        <a href="#" class="icon2"><span>icon2</span class="ir_pm"></a>
                        <a href="#" class="icon3"><span>icon3</span class="ir_pm"></a>
                        <a href="#" class="icon4"><span>icon4</span class="ir_pm"></a>
                    </div>
                </div>
            </div>
        </div>
        <section id="contents">
            <article id="cont_nav">
            <div class="container">
                <h2 class="ir_su">전체메뉴</h2>
                <div class="nav clearfix">
                    <div>
                        <h3 class="h3">HTML5</h3>
                        <ol class="clearfix">
                            <li><a href="#">html1</a></li>
                            <li><a href="#">html2</a></li>
                            <li><a href="#">html3</a></li>
                            <li><a href="#">html4</a></li>
                            <li><a href="#">html5</a></li>
                            <li><a href="#">html6</a></li>
                            <li><a href="#">html7</a></li>
                            <li><a href="#">html8</a></li>
                            <li><a href="#">html9</a></li>
                            <li><a href="#">html10</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="h3">CSS3</h3>
                        <ol class="clearfix">
                            <li><a href="#">css1</a></li>
                            <li><a href="#">css2</a></li>
                            <li><a href="#">css3</a></li>
                            <li><a href="#">css4</a></li>
                            <li><a href="#">css5</a></li>
                            <li><a href="#">css6</a></li>
                            <li><a href="#">css7</a></li>
                            <li><a href="#">css8</a></li>
                            <li><a href="#">css9</a></li>
                            <li><a href="#">css10</a></li>
                            <li><a href="#">css11</a></li>
                            <li><a href="#">css12</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="h3">웹표준</h3>
                        <ol class="clearfix">
                            <li><a href="#">웹표준1</a></li>
                            <li><a href="#">웹표준2</a></li>
                            <li><a href="#">웹표준3</a></li>
                            <li><a href="#">웹표준4</a></li>
                            <li><a href="#">웹표준5</a></li>
                            <li><a href="#">웹표준6</a></li>
                            <li><a href="#">웹표준7</a></li>
                            <li><a href="#">웹표준8</a></li>
                        </ol>
                    </div>
                </div>
            </div>
            </article>
            <article id="cont_tit">
            <div class="container">
                <div class="tit">
                    <h2> &ldquo; 프론트 엔드는 너무 쉬워서 금방 끝난다.&rdquo; </h2>
                    <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                </div>
            </div>
            </article>
            <article id="cont_ban">
            <div class="container">
                <div class="ban">
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                </div>
            </article>
            <article id="cont_cont">
            <div class="container"></div>
            </article>
        </section>
        <div id="footer">
            <div class="container"></div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./js/slick.js"></script>

    <script>
        // 배너이미지(슬릭)
        $('.ban').slick({
        infinite: true, //무한반복
        slidesToShow: 3, //한번에 보여주는 이미지 갯수
        slidesToScroll: 1, //버튼을 눌렀을 때 넘어가는 이미지 갯수
        autoplay: true, //자동이로 이미지 이동
        autoplaySpeed: 3000, //3초마다 자동으로 이미지 이동
        dots: true, //닷버튼 생성
        });


        $(".tit .btn").click(function(){
            // $(".nav").show();
            // $(".nav").fadeIn(500);
            // $(".nav").slideDown(500);
            // $(".nav").css("display","block"); // block은 보여주는 기능도 있다.
            // $(".nav").toggle();
            $(".nav").slideToggle();

            $(this).toggleClass("on");

        });
    </script>

</body>
</html>

<css>

@charset "utf-8";

#wrap{
    width: 100%;
}

#header{
    width: 100%;
    height: 325px;
    /* 헤더 이미지 높이 고려 */
    background: url(../image/header_bg.jpg) no-repeat top center;
    /* 이미지를 고정하기 위해 no-repeat을 해주고 위치를 잡아주어야하고 repeat으로 변경*/
}

#contents{}
#cont_nav{
    width: 100%;
    /* height: 200px; */
    /* background-color: lightcoral; */
}
#cont_tit{
    width: 100%;
    /* height: 200px; */
    background-color: lightcyan;
}
#cont_ban{
    width: 100%;
    /* height: 200px; */
    /* background-color: lightgray; */
}
#cont_cont{
    width: 100%;
    height: 200px;
    background-color: lightgreen;
}

#footer{
    width: 100%;
    height: 220px;
    background-color: lightseagreen;
}

/* container */
.container{
    width: 990px;
    margin: 0 auto;
    height: inherit;
    background-color: rgba(255,255,255,0.3);
}

/* skip */
#skip{
    /* 기준점 잡아주기 */
    position: relative;
}
#skip a{
    position: absolute;
    width: 140px;
    background-color: #333;
    color: #fff;
    height: 30px;
    text-align: center;
    line-height: 30px;
    /* 탭 위치 설정 */
    left:0;
    top: -40px;
}
/* 스킵 네비게이션 활성화 */
#skip a:active,
#skip a:focus{
    top: 0;
}

/* header */
.header{    
    /* height: 325px; */
}

.header .header_menu{
    /* background-color: aqua; */
    /* 메뉴 오른쪽으로 정렬하기 */
    text-align: right;
}
.header .header_menu a{
    color: #fff;
    /* top,left,bottom 여백주기 */
    padding: 10px 0 10px 20px; 
    /* 윗쪽여백이 안 먹힘 > inline-block 을 사용함 */
    display: inline-block;
    /* 마우스 오버 속도 넣기 */
    transition: all 0.5s;
}

.header .header_menu a:hover{
    /* 마우스 오버시 글자색 바뀔수 있도록 한다. */
    color: #333;
}

.header .header_tit{
    /* background-color: red; */
    text-align: center;

}
.header .header_tit h1{
    color: #fff;
    background-color: #4aa8d4;
    font-size: 28px;
    /* 글자에만 색칠해주기 문제는 a태그에 붙게됨 */
    display: inline-block;
    padding: 5px 20px;
    transition: all 0.5s;
    text-shadow: 0 2px 2px darkblue;
    
}

.header .header_tit h1:hover{
    background-color: darkblue;
    cursor: pointer;
}

.header .header_tit a{
    font-size: 18px;
    background-color: #2698cb;
    display: inline-block;
    /* 위아래 박스 여백이 없어짐 */
    padding: 5px 20px;
    color: #fff;
    /* 위아래 박스 겹쳐지게하기 */
    margin-top: -7px;
}

.header .header_icon{
    text-align: center;
}
.header .header_icon a{
    width: 60px;
    height: 60px;
    background-color: #333;
    /* 인라인 구조이기 때문에 display: inline-block 적용*/
    display: inline-block;
    /* 양옆 여백주기 */
    margin: 0 5px;

    /* 아이콘 이미지 넣어주기 */
    background: url(../image/icon.png);
}

.header .header_icon a.icon1{
    background-position: 0px 0px;
    /* 백그라운드 포지션으로 이미지의 위치(X,Y)를 지정해준다.  */
}
.header .header_icon a.icon2{
    background-position: 0px -60px;
}
.header .header_icon a.icon3{
    background-position: 0px -120px;
}
.header .header_icon a.icon4{
    background-position: 0px -180px;
}

.header .header_icon a.icon1:hover{
    background-position: -60px 0px;
}

.header .header_icon a.icon2:hover{
    background-position: -60px -60px;
}
.header .header_icon a.icon3:hover{
    background-position: -60px -120px;
}
.header .header_icon a.icon4:hover{
    background-position: -60px -180px;
}

.header .header_icon a span{
    font-size: 0;
    /* lineheight 값이 먹기 때문에 매번 주기가 번거롭다. */
}

/* nav */

.nav{
    padding: 30px 0;
    /* background-color: #4aa8d4; */
    display: none;
}
.nav > div{
    float: left;
    width: 40%;
    /* 전체너비의 40%사용 */
}

.nav > div:nth-of-type(3){
    width: 20%;
    /* 마지막 div 전체너비의 20%사용 */
}

/* .nav > div > h3{
    font-size: 18px;
    font-weight: bold;
    color: #25a2d0;
    하단 여백 띄워주기
    margin-bottom: 4px;
} */

.nav > div > ol{}
.nav > div > ol > li{
    width: 50%;
    float: left;
}

.nav > div:nth-of-type(3) li{
    width: 100%;
}

.nav > div > ol > li > a{}

.nav > div > ol > li > a:hover{
    text-decoration: underline;
}

/* .tit */
.tit{
    position: relative;
}
.tit h2{
    font-size: 40px;
    /* 아이콘 사이여백 넣기 위해 10px 추가 */
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-family: 'Black Han Sans', sans-serif;
}
.tit a.btn{
    width: 60px;
    height: 60px;
    background: url(../image/icon.png) 0px -600px;
    display: block;
    position: absolute;
    right: 0;
    top: 5px;
}

.tit a.btn:hover{
    background-position: -60px -600px;
}

.tit a.btn.on{
    background-position: 0px -660px;
}

.tit a.btn.on:hover{
    background-position: -60px -660px;
}

/* ban */
.ban{
    padding: 30px 0px 30px 20px;
    position: relative;
}
.slick-prev{
    /* 이전아이콘 위치잡아주기 */
    position: absolute;
    top: 65px;
    left: -80px;
    /* 아이콘이미지 불러오기 */
    width: 43px;
    height: 43px;
    background: url(../image/icon.png) -150px 0;
    /* 글씨없애주기 */
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}

.slick-prev:hover{
    background-position: -193px 0;
    cursor: pointer;
}

.slick-next{
    position: absolute;
    top: 65px;
    right: -80px;
    width: 43px;
    height: 43px;
    background: url(../image/icon.png) -150px -43px;
    font-size: 0;
    line-height: 0;
    text-indent: 99999px;
}

.slick-next:hover{
    background-position: -193px -43px;
    cursor: pointer;
}

.ban img{
    /* border: 4px solid #dcdcdc; */
    border: 4px solid transparent;
    /* 마우스오버시 이미지크기가 변경되지 않도록 고정하는 역할 */
}

.ban img:hover{
    border: 4px solid red;
}

.ban .slick-dots{
    /* background-color: #2698cb; */
    text-align: center;
    /* 위치 잡아주기 위해 포지션을 띄움 */
    position: absolute;
    bottom: 0px;
    /* position을 띄우면서 너비값을 잃음 다시 너비값 넣어줌 */
    width: 100%;
    margin-left: -22px;
}

.ban .slick-dots li{
    /* 위치 잡아주기 */
    display: inline-block;
    margin: 10px;
}
.ban .slick-dots li button{
    /* 닷 만들어주기 */
    width: 15px;
    height: 15px;
    background-color: aqua;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}

.ban .slick-dots li.slick-active button{
    background-color: #2698cb;
}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 42_ 지도 넣기 (0)	2023.06.22
[JAVASCRIPT]요소 선택하기 (0)	2023.06.21
비주얼 스튜디오 코드 41 _ 패밀리사이트 (0)	2023.06.21
[JAVASCRIPT]2. 자바스크립트로 스타일 제어하기 (0)	2023.06.20
비주얼 스튜디오 코드 40_ 웹표준) 네비게이션 / 배너 (0)	2023.06.20