슬라이드유형을 만들어 봅시다!

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>

메인에 들어가는 슬라이드를 피그마로 만들어 HTML로 구현 하였습니다. 제가 원하는 컨테이너영역에 이미지가 꽉 차서  화살표 버튼으로 움직이는 모양으로 구현하였습니다. 

밑에 점으로 이미지가 움직일때마다 변화될 수 있도록 HTML을 구현하였습니다.

 

 

CSS

/* 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: #17C37B;
    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;
}

리셋과 common은 기존에 해왔던 코드를 재활용하여 사용하였습니다.

재활용할 때 페이지마다 필요한 코드가 있고 없는 코드가 있기때문에 재활용하기위해 만든

common은 그대로 사용하거나 수정하여 사용합니다.

 

 

슬라이드 CSS

/* 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: 10;
        }
        .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;
            padding: 1px 30px;
            background-color: #fff;
            color: #000;
            font-size: 16px;
            border-radius: 50px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .slider__info .title {
            font-size: 80px;
            color: #fff;
            margin-bottom: 40px;
            margin-left: -4px;
        }
        .slider__info .desc {
            font-size: 18px;
            line-height: 1.5;
            color: #fff;
            width: 75%;
            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.svg);
            width: 30px;
            height: 56px;
            display: block;
            margin-top: -28px;
        }

우선 피그마에서 만든 이미지를 받아 사용합니다.

width값은 100%가 필요하기때문에 사용하지 않지만 height 값은 600px로 지정해 줍니다.

그 후 background-size: cover;로 배경 이미지의 크기를 꽉차게 늘리거나 줄여서 보여줍니다.

하지만 사이즈의 맞게 지정되어있어 이미지가 늘어나거나 줄어들지 않습니다.

배경 이미지가 반복되는 성질이 있는데 background-repeat: no-repeat;를 사용하여 반복되는 것을 없앱니다.

그리고 배경을 background-position: center;로 가운데 맞추어 줍니다.

 

디자인을 보게되면 위에 검은 화면이 있는데 그부분은 ::after 을 사용하여 위에  불투명도 10%의 검은 화면을 덮어 

글자를 더 잘 보이게 합니다.

 

이 이후는 모르는 것만 정리하도록 하겠습니다. (일일이 하게 되면 너무 길어져요😂)

 

속성값	내용	설명
text-transform: uppercase;	텍스트를 모두 대문자로 변환하는데 사용됩니다.	NOTICE에 글자를 무조건 대문자로 만듭니다.
word-break: keep-all;	단어의 분리를 조절하는데 사용됩니다.	긴글을 쓸때 줄바꿈될때 단어로 끊을 수 있습니다.

 

 

.slider__arrow a {
    position: absolute;
    top: 50%;
    background-image: url(../asset/img/icon_main.svg);
    width: 30px;
    height: 56px;
    display: block;
    margin-top: -28px;
}
.slider__arrow a:first-child {
    left: 0;
}
.slider__arrow a:last-child {
    right: 0;
    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;
    margin: 0 3px;
}
.slider__dot a.dot{
    background-position: -100px -1px;
}
.slider__dot a.active{
    background-position: -121px -1px;
}
.slider__dot a.play{
    background-position: -142px -1px;
}
.slider__dot a.stop{
    background-position: -163px -2px;
}

아이콘을 만들때 한 화면에 여러가지 아이콘을 만들어 넣고 필요한 부분을 선택자로 만들어 HTML에 선택자로 적용하도록 만들었습니다.

background-position으로 원하는 이미지가 있는 위치를 속성으로 주어 이미지를 보여줍니다.

 

 

반응형 웹

@media only screen and (-webkit-min-device-pixel-ratio: 3),
    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);
        }
}

반응형 웹으로 만들기 위해 미디어 쿼리를 사용하였는데 이때 이미지의 상태을 최상으로 하기 위해 해상도가 좋은 다른 이미지를 더 사용하였습니다.