슬라이드유형 site 만들기

figma처럼 슬라이드유형의 site를 만들어봤어요 !

아래처럼 슬라이드 첫 번째 사진을 만들었어요 !

소스 전문 보기 

 

포인트를 볼게요 !

event  << 최상단에 있는 event 요소를 볼게요 ! 

.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;
}

 

section_small은 <span>테그에요 그래서

inline-block효과를 줬어요 block타입이라

text-transform: uppercase 는 대문자로 변경하기 ~~

자세히보기 & 상담신청<< 버튼을 볼게요 ! 

.slider__info .btn a { 
    width: 180px;
    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;

}

버튼도 inline-block효과를 줬어요 ! 

<a>태그로 감싸놓았는데 얘도 블록타입이라 inline타입으로 변환했어요 ! 

.slider__info .btn a:last-child { << 요건 

class= 'btn' 으로 설정된것중 :last-child (마지막 자식)만 css를 변환하게 해놨어요 ! 

:last-first (첫번째자식)은 첫번째만 css가 적용되겠쬬 ?

자세히보기 & 상담신청<< 버튼을 볼게요 ! 

위에 이미지를 불러오는거에요 ! 

피그마에 있는 이미지 파일 >> svg 파일 >> 변환해서 넣는거에요 ! 

.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;
}

img파일을 만들때 50px간격으로 <>를 만들구 동그란 버튼 & 재생& 정지 버튼을 만들땐 1px씩 띄워서 

해당파일의 위치를 표기해줬어요 !