bxslider를 이용하면 배경화면이 슬라이드로 넘어가게 할 수 있다!
<script>
$(document).ready(function(){
$('.slider').bxSlider({
// 옵션 추가
controls:false,
pager:false,
auto:true
});
});
</script>
-> bxslider에 있는 options를 확인 후 원하는 옵션을 추가
controls:false (컨트롤버튼 안보이게)
pager:false (페이지버튼 안보이게)
auto:true (화면자동넘김)
폰트어썸을 이용하면 다양한 아이콘들을 삽입할 수 있다.
.contents_list li{
display: inline-block;
width: 52px;
height: 52px; // 크기를 맞춤
line-height: 52px; // 크기를 맞춤
border: 1px solid white;
border-radius: 50%;
font-size: 16px;
margin-right: 25px;
}
-> line-height 를 height와 크기를 맞추기
: 한줄짜리 텍스트를 특정 영역에서 수직중앙에 위치하게 하려면
line-height를 부모영역의 높이와 똑같이 지정하면된다.
.contents{
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -211px;
}
개발자도구 - 배치하고싶은 영역의 크기 확인
width의 1/2 값을 margin-left에서 빼준다
height의 1/2 값을 margin-top에서 빼준다
부모태그에도 높이 넓이 값을 지정해야함
Html
<div class=“background__01”></div>
Css
Html, body {
width:100%;
height:100%;
}
.background {
width: 100%;
height:100%;
background:url(“../images/a.jpg”) no-repeat;
background-size:cover;
background-position: center;
}
어두운 배경 효과
배경화면 겹치기
Position: absolute;
Top:0;