사이트 만들기 - 슬라이드 유형

한번씩 읽고 가세요.

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

슬라이드 유형

슬라이드 유형이란?

슬라이드 유형은 웹사이트에서 사용되는 이미지나 콘텐츠를 일정한 간격으로 전환하여 보여주는 기능을 말합니다. 슬라이드는 일반적으로 이미지나 텍스트, 동영상 등 다양한 형태의 콘텐츠를 보여줄 수 있습니다.

슬라이드는 주로 웹사이트의 홈페이지나 특정 섹션에서 사용되며, 사용자가 더 많은 정보를 얻을 수 있도록 도와줍니다. 슬라이드는 여러 가지 방식으로 구현될 수 있으며, 자동으로 전환되거나 사용자가 버튼을 클릭하여 전환할 수도 있습니다. 슬라이드는 웹사이트 디자인에서 매우 중요한 역할을 하며, 사용자의 관심을 끌고 더 많은 정보를 제공하는 데 도움을 줍니다.

슬라이드 유형에는 여러가지가 존재합니다.

이미지 슬라이드: 대부분의 사이트에서 사용되는 슬라이드 유형입니다. 여러 장의 이미지를 일정한 간격으로 전환하여 보여줍니다.
텍스트 슬라이드: 이미지 대신 텍스트가 보여지는 슬라이드 유형입니다. 일정한 시간 간격으로 다음 텍스트가 전환되면서 보여집니다.
비디오 슬라이드: 동영상을 사용하여 슬라이드를 구성하는 유형입니다. 동영상이 끝나면 다음 슬라이드가 전환됩니다.
캐러셀 슬라이드: 이미지나 텍스트, 비디오 등 여러 유형의 콘텐츠를 하나의 슬라이드에서 보여줍니다. 일반적으로 좌우 화살표나 동그라미 버튼을 통해 슬라이드를 이동할 수 있습니다.

CSS 리셋 값 코드

 /* reset */
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
        }

        img {
            vertical-align: top;
            width: 100%;
        }
        .blind {
            position:absolute;
            clip:rect(0 0 0 0);
            width:1px;
            height:1px;
            margin:-1px;
            overflow:hidden
        }

        .mt10 {margin-top: 10px !important}
        .mt20 {margin-top: 20px !important}
        .mt30 {margin-top: 30px !important}
        .mt40 {margin-top: 40px !important}
        .mt50 {margin-top: 50px !important}
        .mt60 {margin-top: 60px !important}
        .mt70 {margin-top: 70px !important}

        .mb10 {margin-bottom: 10px !important}
        .mb20 {margin-bottom: 20px !important}
        .mb30 {margin-bottom: 30px !important}
        .mb40 {margin-bottom: 40px !important}
        .mb50 {margin-bottom: 50px !important}
        .mb60 {margin-bottom: 60px !important}
        .mb70 {margin-bottom: 70px !important}

        /* commmon */
        .container {
            width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
            /* background-color: rgba(0, 0, 0, 0.1); */
        }

        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }

        .section {
            padding: 120px 0;
        }

        .section__small {
            font-size: 14px;
            padding: 1px 23px;
            border-radius: 10px;
            background-color: #055a5b;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 20px;
            display: inline-block;
            margin-bottom: 10px;

        }

        .section.center {
            text-align: center;
        }

        .section__h2 {
            font-size: 50px;
            font-weight: 400;
            margin-bottom: 30px;
            line-height: 1;
        }

        .section__desc {
            font-size: 22px;
            color: #666;
            margin-bottom: 70px;
            font-weight: 300;
            line-height: 1.5;
        }

CSS 슬라이드 유형 코드

 /* slider__wrap */
        .slider__wrap {}

        .slider__inner {}

        .slider__inner .slider {
            height: 600px;
            background-image: url(../asset/img/sliderType01-01\ .jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            z-index: 1;
        }
        .slider__inner .slider::after {
            content: '';
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
        .slider__info {
            padding: 100px 0;
        }
        .slider__info .small {
            display: inline-block;
            padding: 1px 30px;
            background-color: #055a5b;
            color: #fff;
            font-size: 16px;
            border-radius: 50px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .slider__info .title {
            font-size: 80px;
            color: #fff;
            margin-bottom: 40px;
            margin-left: -3px;
        }
        .slider__info .desc {
            font-size: 18px;
            line-height: 1.5;
            color: #fff;
            width: 70%;
            word-break: keep-all;
        }
        .slider__info .btn {
            margin-top: 100px;
        }
        .slider__info .btn a {
            width: 180px;
            background-color: #fff;
            font-size: 16px;
            display: inline-block;
            text-align: center;
            padding: 12px 0;
            margin-right: 4px;
        }
        .slider__info .btn a:last-child {
            background-color: #000;
            color: #fff;
        }
        .slider__arrow {}
        .slider__arrow a {
            position: absolute;
            top: 50%;
            background-image: url(../asset/img/icon_main.svg);
            background-size: 500px;
            width: 30px;
            height: 56px;
            display: block;
            margin-top: -28px;
        }
        .slider__arrow a:first-child {
            left: 20px;
        }
        .slider__arrow a:last-child {
            right: 20px;
            background-position: -52px 0;
        }
        .slider__dot {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
        }
        .slider__dot a {
            width: 16px;
            height: 16px;
            display: inline-block;
            background-image: url(../asset/img/icon_main.svg);
            background-size: 500px;
            background-position: -101px -1px;
        }
        .slider__dot a.dot {
            background-position: -100px -1px;
        }
        .slider__dot a.active {
            background-position: -121px -1px;
        }
        .slider__dot a.play {
            background-position: -162px -1px;
        }
        .slider__dot a.stop {
            background-position: -183px -1px;
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 2),
            only screen and (min-device-pixel-ratio: 2),
            only screen and (min-resolution: 2dppx) {
                .slider__inner .slider {
                    background-image: url(../asset/img/sliderType01-01\ \(2\).jpg);
                }
            }

HTML 코드

    <section class="slider__wrap nexon">
        <h2 class="blind">메인 슬라이드</h2>
        <div class="slider__inner">
            <div class="slider">
                <div class="slider__info container">
                    <span class="small">EVENT</span>
                    <h3 class="title">가구의 선택은 색상부터</h3>
                    <p class="desc">가구 색을 고르는 것은 방의 분위기와 느낌을 결정하는 중요한 요소 중 하나입니다.
                        가구 색상을 선택할 때, 방의 전체적인 색상 조화를 고려해야 합니다. 일반적으로, 
                        세 가지 색상을 조화롭게 조합하여 균형있는 디자인을 만들 수 있습니다.</p>
                    <div class="btn">
                        <a href="#">자세히보기</a>
                        <a href="#">상담신청</a>
                    </div>
                </div>
                <div class="slider__arrow">
                    <a href="#"><span class="blind">이전 이미지</span></a>
                    <a href="#"><span class="blind">다음 이미지</span></a>
                </div>
                <div class="slider__dot">
                    <a href="#" class="dot active"><span class="blind">첫번째 이미지</span></a>
                    <a href="#" class="dot"><span class="blind">두번째 이미지</span></a>
                    <a href="#" class="dot"><span class="blind">세번째 이미지</span></a>
                    <a href="#" class="play"><span class="blind">플레이</span></a>
                    <a href="#" class="stop"><span class="blind">정지</span></a>
                </div>
            </div>
        </div>
    </section>

슬라이드 유형은 한 섹션만 사용하기 때문에 하나의 큰 섹션 박스를 생성해줍니다.

섹션 박스 안에 이너 박스를 생성해 준 뒤 EVENT작은 박스 <span class = "small">, 텍스트인 h2 ,와 p,를 만들어 줍니다.

그 후 텍스트를 알맞게 넣어주고 css로 가 배경 이름 값 .slider__inner .slider에 배경이미지와 사이즈,포지션 등을 넣어줍니다. 텍스트가 잘 안보일수있기 때문에 .slider__inner .slider::after 가짜 박스를 만들어 배경색을 검은색으로 한 뒤 투명도를 넣어주어서 흰색인 텍스트가 조금 더 선명하게 보일수있게 해줍니다. 이벤트 박스는 .slider__info .small로 css작업을 해줍니다. block 속성을 뛰기 때문에 display: inline-block 를 설정해주고 모두 대문자이기 때문에 text-transform: uppercase; 를 사용해줍니다.

"uppercase"는 영어 단어로, 모든 문자를 대문자로 변환하는 CSS 속성 중 하나입니다. 이 속성을 사용하면 웹사이트에서 대문자로 표시되는 텍스트를 손쉽게 생성할 수 있습니다. 예를 들어, 다음과 같은 CSS 코드를 사용하면 HTML 요소의 모든 텍스트가 대문자로 변환됩니다.

그 후 슬라이드를 다음장으로 전환 할 수 있는 버튼과 현재 페이지를 나타내고 있다는 표시인 dot을 만들어 준다.

text-transform: uppercase;<div class="slider__arrow">

</div>

를 만들어 준 뒤 각 이미지에 맞는 형태를 피그마로 작업하여 svg 파일로 만들어 줍니다.

CSS로 각 이미지를 백그라운드 이미지로 넣고 맞는 위치로 설정해준다.

위치는 이미지를 백그라운로 넣었기 때문에 백그라운 포지션을 이용해 맞춰준다.

arrow

     .slider__arrow a {
            position: absolute;
            top: 50%;
            background-image: url(../asset/img/icon_main.svg);
            background-size: 500px;
            width: 30px;
            height: 56px;
            display: block;
            margin-top: -28px;
        }
        .slider__arrow a:first-child {
            left: 20px;
        }
        .slider__arrow a:last-child {
            right: 20px;
            background-position: -52px 0;

dot

        .slider__dot {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
        }
        .slider__dot a {
            width: 16px;
            height: 16px;
            display: inline-block;
            background-image: url(../asset/img/icon_main.svg);
            background-size: 500px;
            background-position: -101px -1px;
        }
        .slider__dot a.dot {
            background-position: -100px -1px;
        }
        .slider__dot a.active {
            background-position: -121px -1px;
        }
        .slider__dot a.play {
            background-position: -162px -1px;
        }
        .slider__dot a.stop {
            background-position: -183px -1px;
        }
        }

100S00