728x90
반응형
슬라이드 유형 사이트
완성 화면
https://fitalux.github.io/web2023/site/sliderType/sliderType01.html
코드 보기 / CSS
/* 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__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-right: -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: #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: 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);
}
}
코드 보기 / HTML
<section class="slider__wrap nexon">
<h2 class="blind">메인 슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">notice</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="dot"><span class="blind">네번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">다섯째 이미지</span></a>
<a href="#" class="play"><span class="blind">play</span></a>
<a href="#" class="stop"><span class="blind">stop</span></a>
</div>
</div>
</div>
</section>
background-image: url(../asset/img/sliderType01_01.jpg);
:slider 요소의 배경 이미지를 sliderType01_01.jpg로 지정하는 것.
background-size
:배경 이미지의 크기를 설정하는데 사용된다.
| 속성 | 역할 |
| cover | 이미지를 요소의 크기에 맞게 늘려서 모두 보이도록 한다. 이미지의 일부가 잘릴 수 있다. |
| contain | 이미지를 요소의 크기에 맞게 축소해서 모두 보이도록 한다. 요소의 일부가 노출될 수 있다. |
| 길이 값 (ex. 100px, 50px 등) | 이미지의 크기를 지정한 길이로 설정한다. 100px, 50px 등과 같이 가로와 세로의 크기를 각각 설정할 수 있다. |
| 백분율 값 (ex. 50%, 100% 등) | 이미지의 크기를 요소의 백분율로 설정한다. 50%, 100%와 같이 가로와 세로의 크기를 각각 설정할 수 있다. |
background-size: cover;
:배경 이미지를 요소 크기에 맞게 늘리거나 줄여서 모두 보이도록 설정하는 것.
background-repeat
:배경 이미지가 반복되는 방식을 설정하는데 사용된다.
| repeat | 이미지를 수평, 수직 방향으로 반복해서 배치 |
| repeat-x | 이미지를 수평 방향으로 반복해서 배치 |
| repeat-y | 이미지를 수직 방향으로 반복해서 배치 |
| no-repeat | 이미지를 반복하지 않고 한 번만 배치 |
background-repeat: no-repeat;
:배경 이미지가 반복되지 않도록 설정하는 것.
background-position: center;
:배경 이미지가 요소 중앙에 위치하도록 설정하는 것.
word-break
:한 줄에 글자가 너무 길어서 줄 바꿈이 필요할 때 단어를 분리하는 방식을 설정한다.
| nomal | 기본값으로 단어를 분리 |
| break-all | 모든 문자에서 줄바꿈을 하여 단어를 분리 |
| keep-all | 단어 중간에서는 분리하지 않고 다음 줄로 이동. 단어의 시작 부분에서만 분리. |
| break-word | 단어가 아니라 긴 문자열에서 줄바꿈을 하여 분리. 단어가 아니라도 분리할 수 잇는 경우에는 break-all과 동일하게 처리. |
word-break: keep-all
:클래스명이 desc인 요소 안의 텍스트들은 단어의 중간에서 분리하지 않고 다음 단어의 시작 부분에서 줄바꿈하도록 설정.
@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);
}@media 를 사용하여 디바이스의 픽셀 밀도가 2x 이상인 경우에만 적용되는 스타일을 정의한다.
(-webkit-min-device-pixel-ratio: 2)
: 웹킷 기반 브라우저에서 디바이스의 픽셀 밀도를 지정하는 속성
min-device-pixel-ratio
: 그 외 브라우저에서 디바이스의 픽셀 밀도를 지정하는 속성.
min-resolution
:디바이스의 해상도를 지정하는 속성.
이 중 하나라도 해당되는 경우, 슬라이더의 이미지를 @2x의 해상도로 변경한다.
@2x 해상도 이미지는 고해상도 디스플레이에서 더욱 선명한 이미지를 제공한다.