슬라이드 유형 사이트
슬라이드 사이트(Slide site)란 이미지나 동영상, 텍스트 등을 슬라이드 형태로 구성한 웹사이트를 말합니다. 슬라이드 사이트는 보통 특정한 주제나 테마에 대해 정보를 제공하거나, 프리젠테이션을 위해 사용됩니다.
VSCode
<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>
</section>
</body>HTML 부분 입니다!
피그마의 사진중 맨 윗장을 작업했습니다.
슬라이더 클래스를 만들어 사진이 들어갈 자리를 만들어 주고,
슬라이더 클래스 안에 event박스, 타이틀, 내용,을 적어두고 밑에 버튼인 '자세히 보기', '상담 신청' 을 추가 해줍니다.
그 후 양쪽에 화살표를 만들어 슬라이더 답게 사진 전환표시 버튼을 주고
사진 하단쪽에서 현재 몇번째 페이지인지, 슬라이더를 정지, 재생 시킬 수 있는 버튼을 추가 해 줍니다!
다 써봤던 태그,속성들이기 때문에 어려운 부분은 없는거 같습니다!
<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: #FF8F8F;
color: #fff;
padding: 1px 23px;
text-transform:uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section__h2 {
font-size: 50px;
color: #000000ed;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
}
/* slider__wrap */
.slider__wrap {}
.slider__inner {}
.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.05); */
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: 10px;
}
.slider__info .title {
font-size: 80px;
color: #fff;
margin-bottom: 40px;
margin-left: -2px;
}
.slider__info .desc {
font-size: 18px;
line-height: 1.5;
color: #fff;
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 {
}
.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: 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: -161px -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>
CSS 부분입니다!
reset부분부터 ~ section까지는 저의 다른 사이트 공통 css 부분입니다.
.slider__inner .slider
화면 전체를 차지할 부분 이면서 사진이 들어갈 자리 입니다.
여기서 background-repeat: no-repeat; 는 처음 써보는데요. 뜻을 정의 해보자면
CSS의 background-repeat: no-repeat은 요소의 배경 이미지가 반복되지 않도록 설정하는 속성입니다. 즉, 이미지를 한 번만 표시하고 그 이상으로는 반복하지 않도록 합니다.
우리의 친구 gpt가 이렇게 잘 설명을 해줬습니다.
처음에 사진이 반복되게 나와서 당황했었습니다..
.slider__inner .slider::after
이 속성은 글씨를 잘 보이게, 돋보이게 해주는 속성들 입니다.
사진 크기만큼 검은색 투명도가 적당히 있는 네모박스를 깔아줘 배경을 어둡게하고 글자들이 더 잘보이도록 한겁니다!
사진이 어둡게 잘 나오고 글자들은 잘 보여서 현재 사용은 하지 않는 모습입니다.
.slider__arrow
요 녀석이 좀 어려웠던거 같습니다.
좌 우로 슬라이더 해주는 역할인 화살표 버튼인데
이미지를 svg로 불러왔습니다. html쪽에 a링크로 같은 이름을 두개 만들어 줬기 때문에
first-child, last-child란 속성을 이용할 수 있었습니다.
.slider__dot
요놈이 가장 어려웠습니다...
이모티콘을 한 자리에 모아 svg로 저장해 최대한 데이터,공간활용을 하며 출력하는 자리를 바꿔가며
그림들을 하나씩 뽑아내는 그런 작업이였습니다.
이상 슬라이더 유형 사이트였습니다!