728x90
반응형
슬라이드 타입
웹페이지의 슬라이드 타입에는 여러 종류가 있지만, 가장 일반적으로 사용되는 슬라이드 타입은 아래와 같습니다.
- 이미지 슬라이드: 여러 장의 이미지를 차례로 보여주는 슬라이드로, 이미지 간에 전환 효과를 줄 수도 있습니다.
- 텍스트 슬라이드: 여러 페이지로 구성된 텍스트를 차례로 보여주는 슬라이드로, 페이지 간 전환 효과를 줄 수도 있습니다.
- 동영상 슬라이드: 여러 개의 동영상을 차례로 재생하는 슬라이드로, 동영상 간 전환 효과를 줄 수도 있습니다.
- 혼합 슬라이드: 이미지, 텍스트, 동영상 등 여러 종류의 콘텐츠를 조합하여 보여주는 슬라이드로, 적절한 전환 효과를 줄 수도 있습니다.
위와 같은 슬라이드 타입을 사용하여 웹페이지를 구성하면, 사용자에게 보다 다양하고 흥미로운 콘텐츠를 제공할 수 있기 때문에
많이 사용하는 형식입니다.
HTML
<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">Space</span>
<h3 class="title">우주에 대한 흥미로운 사실🧑🚀</h3>
<p class="desc">우주는 공간과 시간 그리고 행성, 항성, 은하 및 다른 모든 형태의 물질과 에너지를 포함하는 것인데 이에 대해 흥미롭고도 의외의 사실들을 한 번 알아보는 곳입니다.</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#">Q&A</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>주요 속성들을 파헤쳐 보겠습니다!
- <div class="slider__info container">: 슬라이드 내부에 표시되는 정보를 담는 div 요소로, slider__info 클래스와 container 클래스가 추가되어 있습니다.
- <span class="small">Space</span>: 정보 영역의 작은 제목을 나타내는 span 요소입니다.
- <div class="btn">: 버튼을 감싸는 div 요소입니다.
- <a href="#">자세히 보기</a>: 정보 영역의 버튼 중 하나로, 자세한 정보를 보여주는 링크입니다.
- <a href="#">Q&A</a>: 정보 영역의 버튼 중 하나로, 질문과 답변을 보여주는 링크입니다.
- <div class="slider__arrow">: 이전 이미지와 다음 이미지로 이동하는 버튼을 감싸는 div 요소입니다.
- <a href="#"><span class="blind">이전 이미지</span></a>: 이전 이미지로 이동하는 버튼입니다
- <a href="#"><span class="blind">다음 이미지</span></a>: 다음 이미지로 이동하는 버튼입니다.
- <div class="slider__dot">: 이미지를 나타내는 도트 버튼을 감싸는 div 요소입니다.
- <a href="#" class="dot active"><span class="blind">첫번째 이미지</span></a>: 첫 번째 이미지를 나타내는 도트 버튼입니다.
CSS
/* slider__wrap */
.slider__inner .slider {
height: 600px;
background-image: url(../asset/image/SLIDE_TYPE04.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.3);
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: 16px;
}
.slider__info .title {
font-size: 80px;
color: #fff;
margin-bottom: 40px;
margin-left: -5px;
}
.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: #454545;
color: #fff;
}
.slider__arrow a {
position: absolute;
top: 50%;
background-image: url(../asset/image/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;
background-image: url(../asset/image/icon_main.svg);
display: inline-block;
background-size: 500px;
margin: 0 3px;
}
.slider__dot a.dot {
background-position: -121px -1px;
}
.slider__dot a.active {
background-position: -100px -1px;
}
.slider__dot a.play {
background-position: -143px -1px;
}
.slider__dot a.stop {
background-position: -162px -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/image/SLIDE_TYPE04.jpg);
}
}- .slider__wrap 클래스는 슬라이드 전체를 감싸는 것을 의미합니다.
- position 속성을 이용해 슬라이드 이미지를 배치합니다.
- z-index 속성은 슬라이드 이미지의 층위를 결정합니다.
- .slider__inner .slider::after 클래스는 슬라이드 이미지 위에 덮어씌울 검은 반투명 레이어를 의미하며, content 속성을 이용해
- 가상 요소를 생성합니다.
- .slider__info .btn 클래스는 콘텐츠 정보 중 버튼 영역을 의미하며, margin-top 속성으로 버튼과 설명 사이의 간격을 설정합니다.
- .slider__info .btn a 클래스는 버튼 스타일을 의미합니다.
- .slider__dot .. : 동작 플레이 스탑 버튼 설정입니다.