HTML
<body>
<div class="kakao">
<img src="./img/kakao.svg" alt="">
</div>
</body>CSS
1. 이미지 위치, 오른쪽 하단 지정 & svg 사이즈
<style>
.kakao{
position: fixed;
width: 70px;
height: 70px;
right: 20px;
bottom: 20px;
border-radius: 50%;
background-color: #F4DB4D;
}
.kakao img{
/* svg는 반드시 사이즈를 잡아줘야 함 */
height: 45%;
}
</style>2. display: flex
- position: fixed;
바디 높이 3000px로 지정 → 스크롤을 올리고 내려도 아이콘이 같은 위치에 고정!
<style>
/* 스크롤을 올리고 내려도 같은 위치에 가만히 있다 */
/* 그것이 position: fixed; */
body{height: 3000px;}
.kakao{
position: fixed;
width: 70px;
height: 70px;
right: 20px;
bottom: 20px;
border-radius: 50%;
background-color: #F4DB4D;
display: flex;
flex-direction: column; /* 요소검사에서 flex 버튼으로 지정/복붙 */
align-items: center; /* 요소검사에서 flex 버튼으로 지정/복붙 */
justify-content: center; /* 요소검사에서 flex 버튼으로 지정/복붙 */
}
.kakao img{
/* svg는 반드시 사이즈를 잡아줘야 함 */
height: 45%;
}
</style>- display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
3. body에 가상선택자 ::before 지정
body가 클래스.show를 가지면 → before가 태어남!
<style>
/* 스크롤을 올리고 내려도 같은 위치에 가만히 있다 */
/* 그것이 position: fixed; */
body{height: 3000px;}
/* body가 클래스.show를 가지면 -> before가 태어남 */
body.show:before{
content: "";
display: block;
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.kakao{
position: fixed;
width: 70px;
height: 70px;
right: 20px;
bottom: 20px;
border-radius: 50%;
background-color: #F4DB4D;
display: flex;
flex-direction: column; /* 요소검사에서 flex 버튼으로 지정/복붙 */
align-items: center; /* 요소검사에서 flex 버튼으로 지정/복붙 */
justify-content: center; /* 요소검사에서 flex 버튼으로 지정/복붙 */
}
.kakao img{
/* svg는 반드시 사이즈를 잡아줘야 함 */
height: 45%;
}
</style>
4. z-index: 10;
z-index
-요소 위에 요소를 쌓을 때, 쌓는 순서를 지정하는 속성
-값이 작을수록 아래에 쌓이고, 클수록 위에 쌓임
-z-index 값을 명시하지 않을 경우 맨 먼저 삽입하는 요소값 1, 이후 순서대로 2→3→4...
-무조건 맨앞에 표시해야 한다면 매우 큰 값을 사용 ex) z-index: 1000;
<style>
/* 스크롤을 올리고 내려도 같은 위치에 가만히 있다 */
/* 그것이 position: fixed; */
body{height: 3000px;}
/* body가 클래스.show를 가지면 -> before가 태어남 */
body.show:before{
content: "";
display: block;
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10; /* 왜인지 흐려짐 */
}
.kakao{
position: fixed;
width: 70px;
height: 70px;
right: 20px;
bottom: 20px;
border-radius: 50%;
background-color: #F4DB4D;
display: flex;
flex-direction: column; /* 요소검사에서 flex 버튼으로 지정/복붙 */
align-items: center; /* 요소검사에서 flex 버튼으로 지정/복붙 */
justify-content: center; /* 요소검사에서 flex 버튼으로 지정/복붙 */
}
.kakao img{
/* svg는 반드시 사이즈를 잡아줘야 함 */
height: 45%;
}
</style>
5. body에 클래스 .show 추가
body가 클래스.show를 가지면 → before가 태어남! (검정 배경색)
<body class="show">
<div class="kakao">
<img src="./img/kakao.svg" alt="">
</div>
</body>6. 제이쿼리 연결
"화면이 준비됐다. 이제 자바스크립트 실행해도 됨!"
"브라우저에서 스크롤이 발생하면 function 실행시켜!!"
<script>
$(document).ready(function(){ // "화면이 준비가 되었다. 이제 자바스크립트 실행해도 됨!"
$(window).scroll(function(){ // "브라우저의 스크롤을 일으키면 실행시켜!!"
$('body').removeClass('show')
})
})
</script>
