CSS의 position: fixed vs position: sticky 이해하기: 간단 비교

모던 웹 페이지를 만들 때, 개발자들이 자주 직면하는 과제 중 하나는 사용자 경험을 개선하기 위해 요소를 어떻게 위치시킬 것인가입니다. 이러한 목적으로 자주 사용되는 두 가지 CSS 속성은 position: fixed와 position: sticky입니다. 이 두 속성은 비슷해 보이지만, 웹 디자인에서 서로 다른 역할을 수행합니다.

이번 글에서는 fixed와 sticky 위치 설정의 차이점을 간략히 살펴보고, 각 속성을 언제 사용하는 것이 좋은지 알아보겠습니다.

예제: 두 헤더의 이야기

다음 코드 스니펫을 살펴보세요:

 

 

<header class="sticky-header-fixed">Sticky Header : Fixed</header>
<div class="container">
  <header class="sticky-header-sticky">Sticky Header : Sticky</header>
  <div class="content">
    <!-- 긴 내용이 여기에 있습니다 -->
  </div>
</div>

그리고 다음의 CSS 코드:

.container {
  height: 1500px;
  background: skyblue;
}

.sticky-header-fixed {
  position: fixed;
  background-color: #333;
  color: white;
}

.sticky-header-sticky {
  position: sticky;
  top: 20px;
  background-color: #333;
  color: white;
}

body {
  height: 5000px;
}

이 예제는 두 개의 헤더를 보여줍니다: 하나는 position: fixed를 사용하고, 다른 하나는 position: sticky를 사용합니다. 이 두 위치 설정 전략이 어떻게 다른지 살펴보겠습니다.

1. position: fixed

첫 번째 헤더(sticky-header-fixed)는 position: fixed를 사용합니다. 이 헤더는 브라우저의 뷰포트에 상대적으로 고정된 위치에 남아 있게 됩니다.

이게 무슨 뜻일까요?

• 항상 보임: sticky-header-fixed 헤더는 사용자가 스크롤을 내리더라도 항상 페이지 상단에 남아 있습니다. 뷰포트에 상대적으로 영구히 고정된 위치에 놓이게 됩니다.
• 다른 콘텐츠와 독립적: 주변 콘텐츠나 스크롤 위치와 상관없이 "뷰포트에 고정된" 상태로 남아 있습니다.

position: fixed의 사용 사례:

• 항상 접근할 수 있어야 하는 고정 내비게이션 바.
• "위로 가기" 버튼이나 떠다니는 버튼.
• 탐색이나 브랜딩을 위해 항상 보이는 헤더 또는 푸터.

2. position: sticky

두 번째 헤더(sticky-header-sticky)는 position: sticky를 사용합니다. 이 헤더는 다르게 작동합니다:

어떻게 작동하나요?

• 특정 지점까지 스크롤됨: 처음에는 sticky-header-sticky가 콘텐츠와 함께 스크롤되지만, 지정된 오프셋(top: 20px)에 도달하면 그 위치에 고정됩니다.
• 부모 요소에 상대적: fixed와는 달리, sticky 위치 설정은 가장 가까운 스크롤 조상(이 경우 .container)에 상대적입니다. 해당 부모 컨테이너의 경계를 벗어나지 않습니다.

position: sticky의 사용 사례:

• 특정 섹션이 보이는 동안 그 섹션에 머물러야 하는 고정 섹션 헤더.
• 데이터 행을 스크롤하는 동안 테이블 헤더가 상단에 고정되는 경우.
• 특정 섹션 내에서만 보이는 상태를 유지해야 하는 사이드바 메뉴나 콜투액션 요소.

차이점 시각화

• 고정 헤더 (Fixed Header): 페이지를 스크롤하면 sticky-header-fixed는 뷰포트 상단에 고정되어 항상 보이는 상태로 남아 있습니다.
• 스티키 헤더 (Sticky Header): sticky-header-sticky는 부모 컨테이너와 함께 스크롤되다가, 뷰포트 상단에서 20픽셀 지점에 도달하면 그 위치에 "고정"됩니다. 부모 컨테이너의 콘텐츠가 모두 스크롤되면 더 이상 고정되지 않습니다.

핵심 요약

• position: fixed는 요소가 스크롤과 상관없이 화면에 항상 고정된 상태로 남아 있어야 할 때 사용합니다. 글로벌 내비게이션, 헤더, 항상 보이는 액션 버튼에 적합합니다.
• position: sticky는 더 동적입니다. 콘텐츠와 함께 처음에는 스크롤되다가 특정 지점에 도달하면 "고정"됩니다. 특정 섹션의 콘텐츠와 관련된 요소(예: 섹션 헤더, 스티키 메뉴 등)에 적합합니다.

결론

position: fixed와 position: sticky 중 어느 것을 사용할지 선택하는 것은 웹 요소의 원하는 동작에 따라 달라집니다. 요소가 항상 고정된 상태로 있어야 한다면 fixed를 사용하세요. 요소가 콘텐츠와 함께 스크롤되다가 특정 지점에서만 고정되기를 원한다면 sticky를 사용하세요.

이러한 미묘하지만 강력한 차이점을 이해하면 더 동적이고 사용자 친화적인 웹 페이지를 만들 수 있습니다. 즐거운 코딩 되세요!