Leeyanggoo
[CSS] UI/UX 슬라이드 유형 레이아웃 만들기!! 본문
읽기 전에 잠깐!
이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다!
슬라이드 유형이란?
슬라이드 유형은 주로 웹의 메인 페이지에서 자주 활용합니다.
주로 브랜드의 중요 이벤트나 홍보, 소식 등을 보여주거나 제공하는 메인 서비스를 나열하기도 합니다.
지정한 몇 개의 레이아웃이 넘어가는 형태로 제작됩니다.
CJ AI center의 메인 페이지
CJ의 AI center는 메인 페이지에 슬라이드 유형을 사용하고 있습니다.
AI center가 제공하는 메인 기술 4가지를 소개하고 있습니다.
이런 슬라이드 유형은 사용자에게 보여주고자 하는 중요한 페이지로 쉽게 데려갈 수 있다는 장점이 있습니다.
🧐 배경 이미지는 최적화를 하자!
/* slider__wrap */
.slider__inner .slider {
height: 600px;
background-image: url(../assets/img/sliderType01_01.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center 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;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
.slider__inner .slider {
background-image: url(../assets/img/sliderType01_01@2x.jpg);
}
}
.slider__info {
padding: 100px 0;
}
.slider__info .small {
display: inline-block;
padding: 1px 30px;
background-color: rgba(255,255,255,0.5);
font-size: 16px;
color: #fff;
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: rgba(255,255,255,0.5);
font-size: 16px;
display: inline-block;
text-align: center;
padding: 12px 0;
margin-right: 4px;
}
.slider__info .btn a:last-child {
background-color: rgba(0,0,0,0.5);
color: #fff;
}
.slider__arrow a {
position: absolute;
top: 50%;
background-image: url(../assets/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: -51px 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(../assets/img/icon_main.svg);
background-size: 500px;
margin: 0 3px;
}
.slider__dot a.dot {
background-position: -100px -1px;
}
.slider__dot a.active {
background-position: -121px -1px;
}
.slider__dot a.play {
background-position: -163px 0px;
height: 18px;
}
.slider__dot a.stop {
background-position: -183px -1px;
}<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">Inhale, Exhale.</h3>
<p class="desc">They can not change me. Nothing can save me. <br>You try to run away. Run away from the world.</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>
슬라이드 유형처럼 배경 이미지가 전체의 width를 차지하는 경우 크기가 넓은 이미지를 사용하게 됩니다.
이미지의 크기가 클수록 용량이 늘어나기 때문에 웹 페이지를 열 때 다운로드의 시간이 길어지면서 시간이 지연됩니다.
페이지의 로딩이 길어지면 사용자의 이탈률이 크게 늘어나기 때문에 항상 어떻게 하면 로딩에 걸리는 용량을 줄일 수 있을지 고민해 봐야 합니다.
Optimalzilla(https://imagecompressor.com/ko/)와 같은 사이트는 이런 이미지를 최적화해주는 사이트입니다.
우리가 쓸 큰 사이즈의 이미지를 최적화하면 용량도 줄일 수 있고, 페이지 로딩도 줄일 수 있겠죠!?
점선의 박스에 최적화할 이미지를 끌어다 놓거나 업로드 한 뒤에 다운받기만 하면 끝입니다!
사용법도 간단하니 자주 이용하면 좋겠죠?
CSS 코드 중 "slider__inner" 하단에 쓴 "@media"가 보이시나요?
간단히 말씀드리자면 "pixel-ratio"와 "min-resolution"은 고밀도, 고해상도의 모니터가 우리가 만든 웹 페이지를 열었을 경우를 뜻합니다.
큰 모니터일수록 해상도가 높기 때문에 이미지 화질이 낮다면 깨져 보이는 현상이 나타납니다.
이런 경우를 대비해 비교적 해상도가 높고 용량이 큰 이미지만 해당 모니터에서 보이게 하는 기능입니다!
"min-resolution: 2" 혹은 "pixel-ratio: 2"는 해상도의 밀도가 2배율이라는 뜻입니다!!
다음으로 살펴볼 만한 것은 HTML 태그 중 "blind" 속성입니다.
다음 레이아웃으로 넘어가는 이미지로 여러 선(slider__arrow)과 도형(slider__dot)을 벡터 이미지(svg)로 이용했는데요.
이런 기호들은 웹 접근성 측면에선 저해되는 요소입니다.
스크린 리더나 다른 기타 기기를 이용해 웹 페이지를 이용하는 사람들은 해당 태그가 굳이 필요없을 것입니다.
이럴 때 사용하는 것이 "blind"이며, 해당 속성이 적용된 태그들은 스크린 리더에서 읽히지 않습니다.
레이아웃 첫 포스팅에서도 말씀드렸듯이, 우리가 웹 페이지를 제작할 때 항상 웹 접근성을 향상시키고 정보로서의 기능을 다할 수 있도록 만들어야 할 것입니다!! 😄
