css_ Bxslider, Font awesome

NARA·2022년 7월 19일
0

Westudy

목록 보기
4/12

Bxslider

bxslider를 이용하면 배경화면이 슬라이드로 넘어가게 할 수 있다!

  1. 1번&2번에 있는 script 를 복사해서 넣는다.

  1. Bxslider - options에서 다양한 옵션들 확인 가능
<script>
        $(document).ready(function(){
          $('.slider').bxSlider({
          // 옵션 추가
            controls:false,
            pager:false,
            auto:true
          });
        });
</script>    

-> bxslider에 있는 options를 확인 후 원하는 옵션을 추가

controls:false (컨트롤버튼 안보이게)
pager:false (페이지버튼 안보이게)
auto:true (화면자동넘김)

Font Awesome 라이브러리

폰트어썸을 이용하면 다양한 아이콘들을 삽입할 수 있다.

아이콘을 영역의 수직중앙에 오게하는 방법

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

0개의 댓글