728x90
-오늘은 위에 있는 예시처럼 슬라이드 형식의 페이지를 만들어 보겠습니다.
- 구조는 커다란 이미지 위에 텍스트가 되어 있는 형식입니다.
- 함께 바디부분의 코드를 먼저 보겠습니다.
<body>
<section class="slider__wrap nexon">
<div class="slider__inner">
<h2 class="blind">메인 슬라이드 영역</h2>
<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>
</body>- 일단 구역을 크게 slider__info, slider__arrow, slider__dot 구역으로 나누어 주었습니다.
- 그리고 구역을 각각 채워주면 되는데~!! 어라 이상한게 보이시나요??
- 바로 slider__dot의 안에 있는 <span>태그 안에 글자가 있는데 완성된 화면엔 안보이는 것이 보이시나요?
- 안보이는 것도 이상한데 굳이 안보이게 하면서 왜 썼는지도 궁금하시죠?
- 그건 바로 이건 바로 웹 표준화라는 건데요 보통의 상황에서는 사용할 일이 없지만 눈이 불편하거나 하시는 분들은 소리로 웹에 대해서 설명을 듣는데 그 때 정확한 정보를 전달하기 위해서 눈으로는 보이지 않는 글씨를 써준 것 입니다. 그리고 class="blind"를 주어 사라지게 해주었습니다.
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
vertical-align: top;
width: 100%;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
img {
text-decoration: none;
}
.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: #218d73;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.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: 70px !important;}
.mt70 {margin-top: 60px !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: 70px !important;}
.mb70 {margin-bottom: 60px !important;}
.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(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: #ffffff;
font-size: 16px;
border-radius: 50px;
text-transform: uppercase;
margin-bottom: 10px;
}
.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;
height: 20px;
line-height: 20px;
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);
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;
margin: 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: -161px -1px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
.slider__inner .slider {
background-image: url(../asset/img/sliderType01_01@2x.jpg);
}
}
</style>- reset 부분은 언제나 그렇듯 똑같습니다.
- 이미지를 slider__inner 안에 있는 slider 에게 background-image를 이용해 배경으로 주었습니다.
- 페이지의 모든 내용이 slider 안에 있기 때문에 slider에게 배경을 주면 되는 것이죠
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
z-index: 1;- 그 후 위에 있는 속성들을 주어 사이즈와 자리 등등의 값을 잡아주었습니다.
- 그리고 slider__info에게 padding값을 주어 페이지 위 아래에 간격을 주었습니다.
- 그리고 EVENT, 제목, 설명에 폰트사이즈,색,크기등의 설정 값을 주었습니다.
- 사실 이번에 중요한 건 다른 것보다 버튼 이미지에 있습니다. 다 같은 파일로 불러온 것 보이시나요?
.slider__dot a {
width: 16px;
height: 16px;
display: inline-block;
background-image: url(../asset/img/icon_main.svg);
background-size: 500px;
margin: 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: -161px -1px;
}- 그건 바로 진짜로 하나의 이미지로 했기 때문이죠
- 하나의 svg파일 안에 여러가지 이미지를 넣고 필요한 이미지의 좌표를 넣어 필요한 이미지를 불러왔습니다.
- 이렇게 하면 여러 장의 사진을 불러올 필요가 없어서 불필요한 리소스들을 절약할 수 있는 장점이 있습니다.
- 사실 저희 처럼 사진이 몇 장 되지않을 때는 중요하지 않지만 나중에 사진이 더 많아지게 된다면 매우 필요한 방법이죠!!
.slider__arrow a:first-child {
left: 20px;
}
.slider__arrow a:last-child {
right: 20px;
background-position: -52px 0;
}- 그리고 2번 째로 중요한 것!!
- 바로 first-child 와 입니다.
- 각각 각.slider__arrow의 자식요소로 있는 <a> 태그를 지칭하는 것인데 first-child는 앞에있는 <a> 태그를 last-child는 마지막에 있는 <a> 태그를 지정해 줍니다. 이처럼 같은 <a> 태그로 되어 있는데 각각 지정하고 싶을 때 사용하는 속성입니다.
- 끝~!!