슬라이드 유형 페이지를 만들어보자!

코딩 공부/HTML

슬라이드 유형 페이지를 만들어보자!

천서리 2023. 3. 15. 17:40

QUOTE THE DAY

“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”

- 이글슨 (Eagleson)

슬라이드 유형 페이지란?

슬라이더는 여러 콘텐츠를 중요한 공간에 한 번에 넣을 수 있게 해 준다. 하지만 화면이 크든 작든, 사람들은 슬라이더를 그냥 지나치는 경우가 많다. 정적인 히어로 이미지(메인 전체를 차지하는 큼직한 이미지와 텍스트)나 좋은 UI로 콘텐츠를 잘 배치하는 것이 더 나은 해결책이다. 하지만 슬라이더가 꼭 필요하면, 내비게이션을 잘 사용하고 내용을 잘 구성해야 한다.

특징

웹사이트 맨 위에 있다.
로딩했을 때 모니터 화면의 상당 부분을 차지한다.
(한 번에 하나씩) 여러 장을 보여 준다.
캐로셀 안에는 넘길 수 있는 내용이 더 있다는 것을 알려 주는 표시자나 내비게이션이 있다.
이미지와 짧은 텍스트가 있다.
내용은 조직의 소개나 사명에 대한 것 혹은 주요 정보나 프로모션이다.

장점

여러 내용을 가장 중요한 곳에 한 번에 배치할 수 있다.
맨 위에 있는 콘텐츠는 실제로 눈에 띌 가능성이 높아진다.

직접 만들어 본 슬라이드 유형 페이지

직접 만든 카드 유형 페이지 코드

아래 코드는 위에 있는 페이지 이미지의 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>슬라이드 유형01</title>

    <link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
    <style>
        /* reset */
        * {
            margin: 0;
            padding: 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;}
        /* common */
        .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.center {
            text-align: center;
        }
        .section__small {
            font-size: 14px;
            border-radius: 50px;
            background-color: #ff7c7c;
            color: #fff;
            padding: 1px 23px;
            text-transform: uppercase;
            margin-bottom: 20px;
            display: inline-block;
        }
        .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;
        }

        /* slider__wrap */
        .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(224, 217, 88, 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: #fff;
            color: #000;
            font-size: 16px;
            border-radius: 50px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .slider__info .title {
            font-size: 80px;
            color: #000;
            margin-bottom: 40px;
            margin-left: -5px;
        }
        .slider__info .desc {
            font-size: 18px;
            line-height: 1.5;
            color: #000;
            width: 50%;
            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 a {
            position: absolute;
            top: 50%;
            background-image: url(../asset/img/icon_main_black.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_black.svg);
            background-size: 501px;
            margin: 0 3px;
        }
        .slider__dot a.dot {
            background-position: -101px -1px;
        }
        .slider__dot a.active {
            background-position: -121px -1px;
        }
        .slider__dot a.play {
            background-position: -141px -1px;
        }
        .slider__dot a.stop {
            background-position: -162px -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@2x.jpg);
                }
            }

    </style>
</head>
<body>
    <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 class="slider"></div>
            <div class="slider"></div> -->
        </div>
    </section>
</body>
</html>

페이지 제작 공통 CSS

다른 페이지를 제작할 때도 공통으로 사용한 CSS입니다.

(하나의 페이지에 추가할 것이 있으면 모든 페이지에 추가를 해줘야 함.)

<style>
        /* reset */
        * {
            margin: 0;
            padding: 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;}
        /* common */
        .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.center {
            text-align: center;
        }
        .section__small {
            font-size: 14px;
            border-radius: 50px;
            background-color: #ff7c7c;
            color: #fff;
            padding: 1px 23px;
            text-transform: uppercase;
            margin-bottom: 20px;
            display: inline-block;
        }
        .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;
        }

        /* slider__wrap */
        .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(224, 217, 88, 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: #fff;
            color: #000;
            font-size: 16px;
            border-radius: 50px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .slider__info .title {
            font-size: 80px;
            color: #000;
            margin-bottom: 40px;
            margin-left: -5px;
        }
        .slider__info .desc {
            font-size: 18px;
            line-height: 1.5;
            color: #000;
            width: 50%;
            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 a {
            position: absolute;
            top: 50%;
            background-image: url(../asset/img/icon_main_black.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_black.svg);
            background-size: 501px;
            margin: 0 3px;
        }
        .slider__dot a.dot {
            background-position: -101px -1px;
        }
        .slider__dot a.active {
            background-position: -121px -1px;
        }
        .slider__dot a.play {
            background-position: -141px -1px;
        }
        .slider__dot a.stop {
            background-position: -162px -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@2x.jpg);
                }
            }

    </style>

blind

Blind는 웹 접근성을 고려하여 만들어진 웹 UI 컴포넌트 중 하나입니다. Blind는 일반적으로 콘텐츠를 보호하거나 스크린 리더 사용자에게 추가 정보를 제공하는 데 사용됩니다.

자바스크립트에서 Blind를 구현하는 단계

Blind는 컴포넌트를 생성할 요소를 HTML에 추가합니다.
Blind를 생성하고 초기화하는 javascript 함수를 작성합니다.
Blind를 활성화하거나 비활성화하는 javascript 함수를 작성합니다.
필요에 따라 Blind에 대한 이벤트 처리기를 추가합니다.

완성된 슬라이드 유형 페이지

참고!

속성	속성 설명
first-child	선택자는 해당 요소가 부모 요소의 첫번째 자식 요소인 경우에만 스타일을 적용합니다.
Blind	웹 접근성을 고려하여 만들어진 웹 UI 컴포넌트 중 하나입니다. Blind는 일반적으로 콘텐츠를 보호하거나 스크린 리더 사용자에게 추가 정보를 제공하는 데 사용됩니다.
z-index	CSS 속성 중 하나로, 요소의 스택 순서를 지정합니다. 즉, 요소가 다른 요소들 위에 위치하는 순서를 지정할 수 있습니다.
text-transform	CSS 속성 중 하나로, 텍스트의 대소문자를 변환하는데 사용됩니다.

현재글슬라이드 유형 페이지를 만들어보자!

GIT 블로그

Loading data ...

자바스크립트, jabascript, 이미지텍스트유형, mysql, 함수, 매개변수 함수, 코딩, 오서방닭개장, xor연산, HTML, function, 카드 유형, 선언적함수, 텍스트유형, or연산, 안산순두부짬뽕, 마우스이펙트, javascript, 리턴 함수, 시흥순두부맛집,

Today :
Yesterday :

SEOLHEE

슬라이드 유형 페이지를 만들어보자!