Frontend
day04_positon_(2) fixed
AIHYEONJI
2025. 4. 4. 12:46
1.2 fixed
- 브라우저 화면(뷰포트)을 기준으로 요소를 고정
단, 고정된 위치는 부모 요소가 아닌 브라우저 창 자체를 기준으로 하므로 반응형 디자인 시 주의가 필요함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fixed</title>
<style>
body {
margin: 0;
padding: 20px;
line-height: 2;
}
.content {
height: 2000px;
}
.fixed-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4caf50;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.fixed-button:hover {
background-color: #388e3c;
}
</style>
</head>
<body>
<div class="content">
<h1>스크롤을 내려보세요</h1>
<p>이 페이지는 fixed 속성을 테스트하기 위한 예제입니다.</p>
</div>
<a href="#" class="fixed-button">위로가기</a>
</body>
</html>