소개
안녕하세요!. 웹스토리보이입니다. 가장 기본적인 슬라이드 유형02을 만들어 보겠습니다. 쉬우니까 잘 따라해보세요~
-
webstandard
- 01_sliderType01
- 02_sliderType02
- slider02_01.html :
디자인
디자인도 간단합니다.
이론
!
를 치고 tab
을 누르겠습니다.
언어를 ko
로 변경하고 title
은 메뉴 유형01로 변경하겠습니다.
코드
<!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>슬라이드 유형02</title>
<style>
/* font */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: "GmarketSans";
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
em {
font-style: normal;
}
.ir_so {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.gray {
background-color: #F6F8FD;
}
/* sliderType */
.slider__wrap {}
.slider {}
.slider__img {}
.slider__img .desc {
width: 1160px;
margin: 0 auto;
padding: 100px 20px;
position: relative;
}
.slider__img .desc h3 {
font-size: 100px;
font-weight: 300;
margin-left: -8px;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.1;
}
.slider__img .desc p {
font-size: 20px;
line-height: 1.5;
font-weight: 300;
}
.slider__img .desc .btn a {
background: #4857EC;
padding: 10px 50px;
color: #fff;
display: inline-block;
margin-top: 20px;
}
.slider__img .desc .img .bg1 {
position: absolute;
right: 0;
top: 120px;
width: 450px;
height: 450px;
background: url(../img/slider02_bg01.png) no-repeat center center;
background-size: cover;
}
.slider__img .desc .img .icon1 {
position: absolute;
right: 50px;
top: 100px;
width: 240px;
height: 240px;
background: url(../img/slider02_icon01.png) no-repeat center center;
background-size: cover;
z-index: 10;
}
.slider__img .desc .img .icon2 {
position: absolute;
right: 70px;
top: 300px;
width: 200px;
height: 200px;
background: url(../img/slider02_icon02.png) no-repeat center center;
background-size: cover;
z-index: 10;
}
.slider__img .desc .img .icon3 {
position: absolute;
right: 260px;
top: 230px;
width: 200px;
height: 200px;
background: url(../img/slider02_icon03.png) no-repeat center center;
background-size: cover;
z-index: 10;
}
.slider__img .deco .circle1 {
position: absolute;
left: 10%;
top: 30%;
width: 23px;
height: 23px;
border-radius: 50%;
background-color: #4857EC;
}
.slider__img .deco .circle2 {
position: absolute;
left: 40%;
top: 60%;
width: 49px;
height: 49px;
border-radius: 50%;
background-color: #4857EC;
}
.slider__img .deco .circle3 {
position: absolute;
left: 40%;
top: 20%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #2FEFB1;
}
.slider__img .deco .circle4 {
position: absolute;
left: 60%;
top: 30%;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #FF3344;
}
.slider__img .deco .circle5 {
position: absolute;
left: 80%;
top: 40%;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #2FEFB1;
}
.slider__img .deco .circle6 {
position: absolute;
left: 30%;
top: 20%;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #F7E36D;
}
</style>
</head>
<body>
<section id="sliderType" class="slider__wrap gmarket">
<h2 class="ir_so">슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__img">
<div class="desc">
<h3>NEW<br>PORTFOLIO</h3>
<p>
너무 무리하지 말아요!<br>
이미 당신은 해내고 있고 <br>
앞으로도 잘 할 수 있을거예요!
</p>
<div class="btn">
<a href="#">더 알아보기</a>
</div>
<div class="img">
<span class="icon1" aria-hidden="true"></span>
<span class="icon2" aria-hidden="true"></span>
<span class="icon3" aria-hidden="true"></span>
<span class="bg1" aria-hidden="true"></span>
</div>
</div>
<div class="deco">
<span class="circle1" aria-hidden="true"></span>
<span class="circle2" aria-hidden="true"></span>
<span class="circle3" aria-hidden="true"></span>
<span class="circle4" aria-hidden="true"></span>
<span class="circle5" aria-hidden="true"></span>
<span class="circle6" aria-hidden="true"></span>
</div>
</div>
<div class="slider__arrow">
<a href="#" class="left"><span class="ir_pm">이전이미지</span></a>
<a href="#" class="right"><span class="ir_pm">다음이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="ir_pm">1</span></a>
<a href="#" class="dot"><span class="ir_pm">2</span></a>
<a href="#" class="dot"><span class="ir_pm">3</span></a>
<a href="#" class="dot"><span class="ir_pm">4</span></a>
<a href="#" class="play"><span class="ir_pm">자동플레이</span></a>
<a href="#" class="stop"><span class="ir_pm">정지</span></a>
</div>
</div>
</div>
</section>
<!-- //sliderType -->
</body>
</html>
view2
view3
view4