“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
슬라이드 유형
오늘은 홈페이지 슬라이드 유형을 제작해 봤습니다! 전체적인 슬라이드 유형을 작업하는 과정과 옆으로 넘길 수 있는 아이콘을 만드는 방법을 알아보도록 하겠습니다!
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">event</span>
<h3 class="title">FESTIVAL LABLE F.LAB</h3>
<p class="desc">F.LAB은 세계적으로 열리는 페스티벌 음악들을 공유하며 함께 페스티벌을 즐기고 있습니다.
페스티벌에서 함께 즐긴 공연의 음원과 아티스트의 정보를 공유하고 있습니다.</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#">F.LAB</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 class="slider"></div>
<div class="slider"></div> -->
</div>
</section>만드는 방법
- slider wrap을 만들어 준 후 글씨 nexon을 넣어줍니다.
- <h2>태그를 이용해서 blind로 숨겨준 후 제목을 써줍니다.
- div박스를 만들고 class로 slider__inner, slider__info, slider__arrow, slider__btn태그를 만들어 줍니다.
- slider__inner는 하나의 큰 container로 event라는 요소가 들어가기 위해 span으로 small을 만들어 준 후 event를 써줍니다.
- 그리고 title과 desc를 사용해서 제목과 내용을 써줍니다.
- 그 안에 btn 태그를 사용해서 밑에 부분에 작은 버튼으로 자세히보기와 F.LAB을 써줍니다.
- arrow박스 안에는 화살표를 넣어주는데 넣어주기전 그 안에 이전 이미지, 다음 이미지로 위치를 잡아준 후 blind처리를 해줍니다.
- dot버튼 안에는 맨 밑에 아이콘을 설정해 주는데 거기서 이미지를 처리를 해줍니다.
CSS
/* slider wrap */
.slider__inner .slider{
height: 600px;
background-image: url(../asset/img/sliderType01_01-min.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
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(../asset/img/sliderType01_01-min.jpg);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3),
only screen and (min-resolution: 3dppx) {
}
.slider__inner .slider::after {
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
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: -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;
height: 40px;
line-height: 40px;
background-color: #fff;
font-size: 16px;
display: inline-block;
text-align: center;
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);
width: 30px;
height: 56px;
margin-top: -28px;
display: block;
}
.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;
}
</style>속성 알아보기!
- background-size: cover = 배경 이미지의 크기를 조정하는 데 사용됩니다. "cover"는 배경 이미지를 화면에 꽉 차게 늘리거나 줄이면서 적절한 비율을 유지하는 것을 의미합니다.
- background-repeat: no-repeat = 배경 이미지를 반복하지 않고 한번만 표시하도록 설정합니다.
- @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(../asset/img/sliderType01_01-min.jpg) = 미디어 쿼리를 사용한 속성입니다. 해당 미디어 쿼리는 저밀도 디스플레이 장치에 적용됩니다. 즉 디바이스의 물리적 해상도가 2dppx이상인 경우에만 해당 스타일이 적용되는 것입니다. 이 코드에서 .slider__inner . slider 요소의 배경 이미지를 로드할 때, 이미지의 해상도를 높이기 위해 고밀도 디스플레이를 위한 이미지를 사용하도록 설정하고 있습니다. 이러면 고밀도 디스플레이에서 더 높은 해상도의 이미지를 표시할 수 있으며 이미지의 선명도를 향상 시킬 수 있습니다.
- transform: translateX(-50%) = 요소의 위치를 수평으로 이동시키는데 사용됩니다. translateX()는 함수의 요소로 x축으로 이동시키는 함수입니다. 이동하는 거리는 인수로 지정할 수 있는데 -50%는 부모 요소의 가로폭의 50%만큼 왼쪽으로 이동한다는 의미입니다. 따라서 요소가 부모 요소의 중앙에 위치할 수 있으며 이는 반응형 디자인에서 가로 폭이 변하는 경우에도 요소가 항상 중앙에 위치하게 하기 위해 자주 사용하며 translateY()를 사용하여 요소를 y축으로 이동시킬 수 있으며 또한 translate()함수를 사용하여 x축과 y축으로 함께 이동시킬 수 있습니다.