slider 유형01

사이트 만들기 : 슬라이드 유형01

사이트 만들기 - 슬라이드 유형입니다. 헤더 이후로 바로 보이는 페이지로 글씨가 잘 보이도록 이미지 선정이 중요합니다.

HTML

HTML 영역입니다. 제목을 blind 처리해주고, 슬라이드 영역 내부에 이미지, 본문, 버튼 등이 모두 들어있도록 구성해줍니다.
이전, 다음으로 넘어가거나 재생, 일시정지 아이콘들에는 웹표준 준수를 위하여 ir 클래스를 사용해줍니다.

<section id="sliderType" class="slider__wrap">
    <h2 class="blind">슬라이드 영역</h2>
    <div class="slider__inner">
        <div class="slider">
            <div class="slider__img">
                <div class="desc">
                    <span>DEVELOPER</span>
                    <h3>NEW PROJECT</h3>
                    <p>
                        너무 무리하지 말아요! 이미 당신은 잘하고 있고!<br>
                        앞으로도 잘 할 수 있어요!
                    </p>
                    <div class="btn">
                        <a href="#">자세히 보기</a>
                        <a href="#" class="black">사이트 보기</a>
                    </div>
                </div>
            </div>
            <div class="slider__arrow">
                <a href="#" class="left"><span class="ir">이전 이미지</span></a>
                <a href="#" class="right"><span class="ir">다음 이미지</span></a>
            </div>
            <div class="slider__dot">
                <a href="#" class="dot active"><span class="ir">1</span></a>
                <a href="#" class="dot"><span class="ir">2</span></a>
                <a href="#" class="dot"><span class="ir">3</span></a>
                <a href="#" class="play"><span class="ir">플레이</span></a>
                <a href="" class="stop"><span class="ir">정지</span></a>
            </div>
        </div>
    </div>
</section>

CSS

CSS 속성은 ir이나 blind 같은 공통부분을 제외한 sliderType만 가져왔습니다.
background-position을 사용해 아이콘 반전효과, 위치 지정을하였습니다.

/* sliderType */
.slider__inner {
    margin-top: 70px;
}

.slider {
    position: relative;
}

.slider__img {
    background: url(img/slider_bg01.jpg) no-repeat center / cover;
}

.slider__img .desc {
    width: 1160px;
    margin: 0 auto;
    padding: 100px 20px;
}

.slider__img .desc span {
    font-size: 16px;
    background-color: #fff;
    padding: 1px 14px 0 14px;
    border-radius: 30px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
}

.slider__img .desc h3 {
    font-size: 110px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-left: -8px;
}

.slider__img .desc p {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 130px;
}

.slider__img .desc .btn a {
    font-size: 16px;
    background-color: #fff;
    padding: 11px 50px;
    display: inline-block;
}

.slider__img .desc .btn a.black {
    background: #000;
    color: #fff;
}

.slider__arrow a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 56px;
    background-image: url(img/slider_icon.svg);
}

.slider__arrow a.left {
    left: 20px;
}

.slider__arrow a.right {
    right: 20px;
    background-position: -50px 0;
}

.slider__dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 25px;
}

.slider__dot a {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../img/slider_icon.svg);
    background-position: -20px -70px;
}

.slider__dot a.active {
    background-position: 0px -70px;
}

.slider__dot a.play {
    background-position: -40px -70px;
}

.slider__dot a.stop {
    background-position: -60px -70px;
}

원본 소스 보기 원본 사이트 보기