다음은 CSS로 스티커 이미지를 만드는 코드입니다 -
예시
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
position: sticky;
top: 0;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Some header text</h1>
<img src="https://i.picsum.photos/id/721/400/400.jpg">
<h1>Some header text</h1>
<h1>Some header text</h1>
<h1>Some header text</h1>
<p style="font-size: 40px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat odio ratione officia quod qui blanditiis animi! Repudiandae culpa recusandae dolor id soluta porro commodi quidem, incidunt voluptatum vitae similique nesciunt obcaecati odit enim repellat doloribus. Explicabo quisquam in beatae earum?</p>
</body>
</html> 출력
위의 코드는 다음 출력을 생성합니다 -
아래로 조금 스크롤하면 이미지가 아래 출력과 같이 제자리에 유지됩니다 -
