Post

웹디자인기능사) 슬라이드 효과 유형

Posted Updated
Preview Image
By parksohyunnn 9 min read

웹디자인 기능사 슬라이드 유형 : S-1

1. html 구조 잡기

위의 코드는 이미지 슬라이더를 만들기 위한 HTML 구조를 정의하고 있습니다. sliderWrap 요소 안에 각각의 슬라이드가 포함되어 있으며, 각 슬라이드에는 이미지와 해당 이미지에 대한 설명이 포함되어 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<article id="slider">
    <div class="sliderWrap">
        <div class="slider s1">
            <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider01.jpg" alt="이미지 설명">
            <span>이미지1</span>
        </div>
        <div class="slider s2">
            <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider02.jpg" alt="이미지 설명">
            <span>이미지2</span>
        </div>
        <div class="slider s3">
            <img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider03.jpg" alt="이미지 설명">
            <span>이미지3</span>
        </div>
    </div>
</article>
<!-- //slider -->

  1. <article id=”slider”>: article 요소는 문서, 페이지, 애플리케이션, 또는 사이트 내의 다른 부분과 독립적으로 구성되거나 재사용될 수 있는 콘텐츠를 정의합니다. 여기서는 id 속성을 사용하여 이 article 요소를 구별하고 slider라는 식별자를 부여했습니다.

  2. <div class=”sliderWrap”>: div 요소는 문서 내에서 구획을 나타내는 데 사용됩니다. 여기서는 sliderWrap이라는 클래스를 가진 div 요소로, 이미지 슬라이더의 컨테이너 역할을 합니다.

  3. <div class=”slider s1”>: 이미지 슬라이더의 각 슬라이드를 나타내는 div 요소입니다. slider 클래스와 s1, s2, s3와 같은 추가 클래스를 가지고 있습니다. 이를 통해 CSS나 JavaScript에서 슬라이드를 조작하거나 스타일링할 수 있습니다.

  4. <img src=”https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider01.jpg” alt=”이미지 설명”>: 각 슬라이드 안에 포함된 이미지를 나타내는 img 요소입니다. src 속성에는 이미지의 URL이 지정되어 있고, alt 속성에는 이미지에 대한 설명이 포함됩니다.

  5. <span>이미지1</span>: 이미지 슬라이더 슬라이드에 대한 추가 설명이나 제목을 나타내는 span 요소입니다. 여기서는 단순히 “이미지1”이라는 텍스트가 포함되어 있습니다.

2. css로 스타일링 작업

스타일링된 CSS 코드를 통해 이미지 슬라이더의 모양과 레이아웃을 조정할 수 있습니다.

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

/* slider */
.sliderWrap {
    position: relative;
}
.sliderWrap > div {
    display: none;
}
.sliderWrap > div:first-child {
    display: block;
}
.sliderWrap .slider {
    position: absolute;
    left: 0;
    top: 0;
}
.sliderWrap .slider img {
    vertical-align: top;
}
.sliderWrap .slider span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.4);
    padding: 10px 20px;
    color: #fff;
}

  1. .sliderWrap: 이미지 슬라이더를 감싸는 컨테이너를 스타일링합니다.

  2. position: relative;: 컨테이너를 기준으로 위치 지정을 합니다.

  3. .sliderWrap > div: 슬라이더의 각 이미지를 담고 있는 div 요소들을 스타일링합니다.

  4. display: none;: 기본적으로 모든 슬라이드를 숨깁니다.

  5. .sliderWrap > div:first-child: 첫 번째 슬라이드를 나타내는 div 요소를 스타일링합니다.

  6. display: block;: 첫 번째 슬라이드를 보여줍니다.

  7. .sliderWrap .slider: 슬라이더 내부의 이미지와 텍스트를 스타일링합니다.

  8. position: absolute;: 절대 위치를 사용하여 슬라이드를 배치합니다.

  9. left: 0; top: 0;: 컨테이너의 좌상단을 기준으로 슬라이드를 배치합니다.

  10. .sliderWrap .slider img: 슬라이드 내의 이미지를 스타일링합니다.

  11. vertical-align: top;: 이미지의 수직 정렬을 상단으로 설정합니다.

  12. .sliderWrap .slider span: 슬라이드 내의 텍스트를 스타일링합니다.

  13. position: absolute;: 절대 위치를 사용하여 텍스트를 배치합니다.

  14. left: 50%; top: 50%;: 슬라이드의 가운데에 텍스트를 배치합니다.

  15. transform: translate(-50%, -50%);: 텍스트를 가운데로 정렬합니다.

  16. background-color: rgba(0,0,0,0.4);: 배경색을 검은색의 40% 불투명도로 설정합니다.

  17. padding: 10px 20px;: 내부 여백을 설정합니다.

  18. color: #fff;: 텍스트 색상을 흰색으로 설정합니다.

3. 스크립트 작업 : 제이쿼리

jQuery의 $(document).ready() 단축 형식입니다.
이 코드는 jQuery를 사용하여 간단한 이미지 슬라이더를 구현하는 스크립트입니다. 각 부분을 자세히 설명하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(function(){
        let currentIndex = 0;   //현재 이미지
        
        setInterval(function(){     //3초에 한번씩 실행
            let nextIndex = (currentIndex + 1) % 3; // 1 2 0 1 2 무한반복

            $(".slider").eq(currentIndex).fadeOut(1200);    //첫번째 이미지 사라짐
            $(".slider").eq(nextIndex).fadeIn(1200);        //두번째 이미지 나타남

            currentIndex = nextIndex;  //두번째 인덱값을 현재 인덱값에 저장
        }, 3000);
    });
</script>
  1. jQuery 라이브러리를 CDN에서 가져와서 사용합니다. 이 스크립트는 jQuery 코드를 사용하기 위해 필요합니다.
  2. $(function(){ … });:
    jQuery의 $(document).ready()의 축약형입니다. 문서가 로드되면 내부의 코드를 실행합니다.
  3. let currentIndex = 0;:
    현재 표시되는 이미지의 인덱스를 나타내는 변수를 초기화합니다.
  4. setInterval(function(){ … }, 3000);:
    3초마다 주기적으로 실행되는 함수를 설정합니다. 슬라이드가 3초마다 변경되도록 합니다.
  5. let nextIndex = (currentIndex + 1) % 3;:
    다음에 표시될 이미지의 인덱스를 계산합니다. 이미지는 총 3개이며, 0부터 2까지 인덱스가 할당되어 있습니다. 6.따라서 (currentIndex + 1) % 3를 통해 다음 이미지의 인덱스를 구합니다. 이렇게 함으로써 이미지가 순환됩니다.
  6. $(“.slider”).eq(currentIndex).fadeOut(1200);:
    현재 표시되는 이미지를 점진적으로 사라지게 합니다. fadeOut() 함수는 요소를 서서히 투명하게 만들어 사라지게 합니다. 1200은 효과의 지속 시간을 밀리초 단위로 나타냅니다.
  7. $(“.slider”).eq(nextIndex).fadeIn(1200);:
    다음에 표시될 이미지를 서서히 나타나게 합니다. fadeIn() 함수는 요소를 서서히 나타나게 합니다. 1200은 효과의 지속 시간을 밀리초 단위로 나타냅니다.
  8. currentIndex = nextIndex;:
    다음 이미지의 인덱스를 현재 이미지의 인덱스로 업데이트합니다.
    이렇게 구현된 스크립트는 페이지가 로드되면 첫 번째 이미지를 표시하고, 3초마다 이미지가 자동으로 전환됩니다. 전환되는 과정에서는 점진적으로 페이드아웃되고 다음 이미지는 점진적으로 페이드인됩니다.

웹디자인기능사
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github