본문 바로가기

하단 고정 플로팅 소스

2022. 12. 24. 댓글 개
반응형

하단에 위치해 있고 스크롤바를 내려도 고정되어 있는 플로팅 소스를 알아봤습니다. 하단 고정 플로팅 소스로 다양한 응용동작이 가능하기 때문에 스크랩 해두고 필요시 사용하면 좋습니다.

하단 고정 플로팅 소스

 

하단 고정 플로팅

스크롤을 내리면 고정 되는 부분이 직관적으로 잘 보이도록 색을 입혔습니다. 그 색이 들어 간 부분이 고정 되는 부분이니 다양하게 응용해서 사용하면 됩니다.

모바일 페이지 같은 경우 하단 고정 메뉴를 만들때 사용합니다.

<!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

 

반응형
쿠팡 파트너스 활동의 일환으로 일정액의 수수료를 제공받을 수 있으나 추가 금액 없이 구매 가능합니다

◀ 댓글 ▶