오늘은 슬라이드 타입의 레이아웃을 만들어보겠습니다~!!
슬라이드 유형 페이지 만들기
피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다.
기본 CSS 리셋값 설정해주기
CSS 리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다.초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠??
이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다.
<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;
text-align: center;
}
.section.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #ff4191;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
</style>슬라이드 섹션 구성해주기
<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">Custom making</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 class="slider"></div>
<div class="slider"></div> -->
</div>
</section>
</body>이번 슬라이드 유형엔 section 부분이 없기 때문에 container 영역부터 바로 지정해주겠습니다.
slider__inner를 정해준 뒤, 슬라이더에 들어가는 정보들을 slider__info container라고 구역을 정해줍니다. event라는 박스는 span이라는 태그를 통해 정해주고, 나머지 정보들은 h3, p, btn 등을 통해 지정해줍니다. 그리고 슬라이드 유형에서 추가된 것은 화살표와 동그란 점? 부분인데요, 그 부분은 따로 slider__arrow와 slider__dot을 통해 구역을 지정해줍니다.
이렇게 구조만 잘 짜주면 소스가 깔끔하고 CSS를 넣기도 편해집니다!
슬라이드 구역 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__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: 45px;
margin-left: -3px;
}
.slider__info .desc{
font-size: 18px;
line-height: 1.5;
color: #fff;
width: 50%;
word-break: keep-all;
}
.slider__info .btn{
margin-top: 150px;
}
.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;
}
저희가 만든 요소들을 svg파일로 저장해 넣어줍니다. 그리고 그 각각의 요소 위치를 잡아주면서 CSS를 설정해주시면 됩니다.
이미지 최적화
그리고 여기서 중요한 것은 슬라이더에 들어가는 이미지를 최적화시켜주는 것입니다!
그래야 메모리도 줄어들고, 화질도 유지되기 때문에 이미지 최적화를 꼭 해주시길 바랍니다.
이미지 최적화 사이트: https://imagecompressor.com/ko/
그리고 media를 통해 최적화한 이미지를 넣어줍니다.
@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);
}
}
완성된 페이지와 링크
그러면 슬라이드 타입의 페이지가 뚝딱 완성이 됩니다 ㅎ_ㅎ
다른 유형의 페이지 보러가기
카드 유형 : https://duektmf34.tistory.com/32
이미지 유형 : https://duektmf34.tistory.com/37
이미지텍스트 유형 : https://duektmf34.tistory.com/42
텍스트 유형 : https://duektmf34.tistory.com/48
배너 유형 : https://duektmf34.tistory.com/59
푸터 유형 : https://duektmf34.tistory.com/53
도움이 되셨다면 많은 공감과 댓글 부탁드려용 ^^!
728x90
반응형
