반응형
하단에 위치해 있고 스크롤바를 내려도 고정되어 있는 플로팅 소스를 알아봤습니다. 하단 고정 플로팅 소스로 다양한 응용동작이 가능하기 때문에 스크랩 해두고 필요시 사용하면 좋습니다.
하단 고정 플로팅
스크롤을 내리면 고정 되는 부분이 직관적으로 잘 보이도록 색을 입혔습니다. 그 색이 들어 간 부분이 고정 되는 부분이니 다양하게 응용해서 사용하면 됩니다.
모바일 페이지 같은 경우 하단 고정 메뉴를 만들때 사용합니다.
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>하단 고정 플로팅 소스</title>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #2080D0;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>LIST_1</h1>
<h1>LIST_2</h1>
<h1>LIST_3</h1>
<h1>LIST_4</h1>
<h1>LIST_5</h1>
<h1>LIST_6</h1>
<h1>LIST_7</h1>
<h1>LIST_8</h1>
<h1>LIST_9</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
하단 고정 플로팅소스 - 이미지 배너
배너 광고를 하단에 고정해서 보여주고 싶을때 아래와 같이 사용하면 됩니다.
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>하단 고정 플로팅 소스 - 이미지 배너</title>
<style>
.footer_btn {
position: fixed;
bottom: 0px;
z-index: 99999;
text-align: center;
width: 100%;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h1>LIST_1</h1>
<h1>LIST_2</h1>
<h1>LIST_3</h1>
<h1>LIST_4</h1>
<h1>LIST_5</h1>
<h1>LIST_6</h1>
<h1>LIST_7</h1>
<h1>LIST_8</h1>
<h1>LIST_9</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
<h1>LIST_10</h1>
</div>
<div class='footer_btn'>
<a href="https://giftjoa.biz/new/events/events.php?eid=EV0527" target='_blank'><img src='https://url.kr/img/giftshop/rolling_bn01.jpg' style='vertical-align:bottom'></a>
</div>
</body>
</html>
마무리
하단 고정 플로팅 소스는 텍스트/이미지 어떤 것에 적용해도 되고 소스도 비슷합니다.
이글의 단축URL https://late40s.tistory.com/300
반응형
'돈되는 이야기 > 생활코딩' 카테고리의 다른 글
| HestiaCP 사용법 - 도메인 추가 하기 (0) | 2023.04.13 |
|---|---|
| HestiaCP 사용법 - 사용자 계정 추가 하기 (0) | 2023.04.13 |
| Vultr 웹서버 설치부터 사이트 운영까지 - DNS 설정으로 도메인 연결하기 (0) | 2023.04.13 |
| Vultr 웹서버 설치부터 사이트 운영까지 - Hestia Control Panel 설치 (1) | 2023.04.09 |
| Vultr 웹서버 설치부터 사이트 운영까지 - 비 개발자 용 (1) | 2023.04.09 |
◀ 댓글 ▶