웹 페이지를 아래로 스크롤해도 화면 상단에 계속 붙어 있는 고정(sticky) 이미지를 CSS만으로 간단하게 구현할 수 있습니다. 핵심은 position: sticky 속성을 활용하는 것입니다.
position: sticky란?
position: sticky는 요소가 일반적인 문서 흐름을 따르다가, 지정된 임계점(예: top: 0)에 도달하면 그 자리에 고정되는 속성입니다. 스크롤 내비게이션 바나 강조하고 싶은 이미지를 고정할 때 유용하게 사용됩니다.
예제 코드
다음은 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>헤더 텍스트</h1>
<img src="https://i.picsum.photos/id/721/400/400.jpg">
<h1>헤더 텍스트</h1>
<h1>헤더 텍스트</h1>
<h1>헤더 텍스트</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>코드 설명
position: sticky;— 이미지를 스티키(고정) 요소로 지정합니다.top: 0;— 뷰포트 최상단에서 고정되도록 임계점을 설정합니다.width,height— 이미지의 크기를 300px로 지정합니다.
실행 결과
위 코드를 실행하면 페이지 로딩 직후 다음과 같이 이미지가 일반적인 위치에 표시됩니다.
그러나 페이지를 조금만 아래로 스크롤하면 이미지가 원래 위치에 그대로 고정되어 있는 것을 확인할 수 있습니다.
참고 사항
position: sticky는 부모 요소의 범위 안에서만 동작합니다. 또한 일부 구형 브라우저에서는 지원되지 않을 수 있으므로, 필요하다면 @supports 쿼리나 JavaScript 폴백(fallback)을 함께 고려하는 것이 좋습니다.