Sparta Coding Club/Today I Learned [TIL]

[TIL] #DAY - 001 - 첫 TIL 작성하기! (내일배움캠프AI 3기, slickslider)

양한마리 2022. 8. 29. 21:55

728x90

아 우선은 너무 힘들다.. 하루종일 현재 12시간 경과.... ㅋㅋㅋ

진작에 크로스핏이라도 하면서 운도해놔서 그나마 버티는중... 근데 이렇게 얘기하다보니 이게 개발일지인지 넋두리인지..

그래도 한번 적어보자구요~!

우선 오늘은 웹개발 복습부터 시작했다. (역시 공부는 예습과 복습이지..)

내일배움캠프 AI 3기 시작전 -> 내일배움단 웹개발종합반 수료하기가 있어서 5주정도되는 분량을 2주만에 수료한거같다..

이범규튜터님 웹개발 종합반 강추..

수업 들으러 가기 Click!

복습하면서 하고있던 미니 프로젝트도 준비했다다다다.. 저번주 금요일부터 배정받은 A-3 분들과 열심히 만들었다 ㅋㅋ

우리는 PC팀이다 자세한건 나중에 서술하는걸루~

오늘 개발일지에 적고싶은 코드가 있다 ( 복잡해서 포기할뻔한 코드라.. 적어야겠다 )

그 코드는 ...! 바로 ! slick slide를 이용한 다중 목록 슬라이드를 만드는일이다!

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

대충 이런 화면을 구성하는건데 하기전에 외부 css 부터 script, js 까지 코딩해야한다.

시작하기도전에 GG치고 뒤로가기 누를뻔... 그래도 하라는대로 하니깐 ... ?????? 안된다 :(

뭐지뭐지 하다가 역시 유튜브 쵝오 유튜브에 있더라 하는법이 찾아서 했다.

Slick Slider Multiple Items | Slick Slider Tutorial

https://www.youtube.com/watch?v=jrHr1CDYn_k

위 링크 동영상을 보면 적용할수있다 ( 할수이따 )

1. 최종 코드블럭

<!doctype html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PC TEAM (peflix) | profile</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
          integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        imageList .mm {
            width: 400px;
            height: 100%;
        }
        imageList .mm .tt {
            padding: 10px 10px 10px 10px;
        }

        imageList .content-list .slider {
            display: flex;
            gap: 0.5rem;
            overflow-x: scroll;
            scroll-behavior: smooth;

            width: 50vh;
            height: 400px;

        }

        imageList .content-list .slider .item1 {
            width: 90%;
            height: 100%;
            border-radius: 5px;
        }

        imageList .content-list .slider .item1 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: 10px 10px 10px 10px;
        }


    </style>
</head>
<body>
<imageList>
    <h1 class="name">슬릭 슬라이더</h1>
    <div class="mm">
        <img class="tt" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpecc7%2FbtrKHvt13eS%2FlSAwkhxh73xX44zta7KTrK%2Fimg.jpg" alt="">
        <img class="tt" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA3YEi%2FbtrKGxF9zHO%2F4Qz5KEytf3iugMTDzTZtq1%2Fimg.jpg" alt="">
        <img class="tt" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpecc7%2FbtrKHvt13eS%2FlSAwkhxh73xX44zta7KTrK%2Fimg.jpg" alt="">
        <img class="tt" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA3YEi%2FbtrKGxF9zHO%2F4Qz5KEytf3iugMTDzTZtq1%2Fimg.jpg" alt="">
        <img class="tt" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpecc7%2FbtrKHvt13eS%2FlSAwkhxh73xX44zta7KTrK%2Fimg.jpg" alt="">
        <img class="tt" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA3YEi%2FbtrKGxF9zHO%2F4Qz5KEytf3iugMTDzTZtq1%2Fimg.jpg" alt="">
        <img class="tt" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpecc7%2FbtrKHvt13eS%2FlSAwkhxh73xX44zta7KTrK%2Fimg.jpg" alt="">
        <img class="tt" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA3YEi%2FbtrKGxF9zHO%2F4Qz5KEytf3iugMTDzTZtq1%2Fimg.jpg" alt="">
    </div>
    <div class="content-list">
        <div class="slider">
            <div class="item1">
                <img class="tt"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpecc7%2FbtrKHvt13eS%2FlSAwkhxh73xX44zta7KTrK%2Fimg.jpg"
                     alt="">
                <img class="tt"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA3YEi%2FbtrKGxF9zHO%2F4Qz5KEytf3iugMTDzTZtq1%2Fimg.jpg"
                     alt="">
                <img class="tt"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpecc7%2FbtrKHvt13eS%2FlSAwkhxh73xX44zta7KTrK%2Fimg.jpg"
                     alt="">
                <img class="tt"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA3YEi%2FbtrKGxF9zHO%2F4Qz5KEytf3iugMTDzTZtq1%2Fimg.jpg"
                     alt="">
                <img class="tt"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpecc7%2FbtrKHvt13eS%2FlSAwkhxh73xX44zta7KTrK%2Fimg.jpg"
                     alt="">
                <img class="tt"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA3YEi%2FbtrKGxF9zHO%2F4Qz5KEytf3iugMTDzTZtq1%2Fimg.jpg"
                     alt="">
                <img class="tt"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpecc7%2FbtrKHvt13eS%2FlSAwkhxh73xX44zta7KTrK%2Fimg.jpg"
                     alt="">
                <img class="tt"
                     src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA3YEi%2FbtrKGxF9zHO%2F4Qz5KEytf3iugMTDzTZtq1%2Fimg.jpg"
                     alt="">
            </div>
        </div>
    </div>
</imageList>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" integrity="sha512-WNZwVebQjhSxEzwbettGuQgWxbpYdoLf7mH+25A7sfQbbxKeS5SQ9QBf97zOY4nOlwtksgDA/czSTmfj4DUEiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $('.mm').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });

    $('.item1').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });
</script>


</body>
</html>

2. slick slider 필요한 필수 코드

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<imageList>
    <h1 class="name">슬릭 슬라이더</h1>
    <div class="multiple-items">
        <img src="image01" alt="">
        <img src="image02" alt="">
        <img src="image03" alt="">
        <img src="image04" alt="">
        <img src="image05" alt="">
        <img src="image06" alt="">
        <img src="image07" alt="">
        <img src="image08" alt="">
        <img src="image09" alt="">
    </div>
</imageList>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" integrity="sha512-WNZwVebQjhSxEzwbettGuQgWxbpYdoLf7mH+25A7sfQbbxKeS5SQ9QBf97zOY4nOlwtksgDA/czSTmfj4DUEiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $('.multiple-items').slick({
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 3
    });
</script>
</body>
</html>

3. 최종 코드블럭 화면

오늘의 Today I Learned 는 여기까지~ 내일도 코딩하러 가보자고~

728x90

'Sparta Coding Club > Today I Learned [TIL]' 카테고리의 다른 글

[Python] #006 - 1008번 파이썬 :: A/B - Coding Farm (0)	2022.09.02
[TIL] #DAY - 004 - 파이썬 공부 시작! (내일배움캠프AI 3기, 백준, 코딩 공부 사이트) (0)	2022.09.01
[TIL] #DAY - 003 - 첫 프로젝트 발표! (내일배움캠프AI 3기, PC-TEAM [PEFLIX], 클론코딩, 넷플릭스 따라하기) (0)	2022.08.31
[TIL] #DAY - 002 - 오늘 내 최애 코드를 골라보자! (내일배움캠프AI 3기, URL 과 HTML 연결하기) (0)	2022.08.30

현재글[TIL] #DAY - 001 - 첫 TIL 작성하기! (내일배움캠프AI 3기, slickslider)

250x250

Coding Farm

개발일지, 문제풀이, 비전공자, 백엔드, 파이썬, Wil, 코딩테스트, 내일배움캠프AI3기, 장고, 부트캠프, Til, 알고리즘, 개발자, django, AI, 스파르타코딩클럽, 반복문, 백준, 머신러닝, Python,

Today :
Yesterday :

Coding Farm

[TIL] #DAY - 001 - 첫 TIL 작성하기! (내일배움캠프AI 3기, slickslider)

Slick Slider Multiple Items | Slick Slider Tutorial

1. 최종 코드블럭

2. slick slider 필요한 필수 코드

3. 최종 코드블럭 화면

'Sparta Coding Club > Today I Learned [TIL]' 카테고리의 다른 글

'Sparta Coding Club/Today I Learned [TIL]'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					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

[TIL] #DAY - 001 - 첫 TIL 작성하기! (내일배움캠프AI 3기, slickslider)

Slick Slider Multiple Items | Slick Slider Tutorial

1. 최종 코드블럭

2. slick slider 필요한 필수 코드

3. 최종 코드블럭 화면

'Sparta Coding Club > Today I Learned [TIL]' 카테고리의 다른 글

'Sparta Coding Club/Today I Learned [TIL]'의 다른글

관련글

티스토리툴바