하단 콘텐츠 고정 스타일링

웹 개발을 하다 보면 하단에 항상 보이는 footer나 고정 버튼을 만들어야 할 때가 있습니다. 이번 글에서는 하단 콘텐츠를 고정하는 방법과 가운데 정렬하는 기법을 정리해보겠습니다.

fixed vs sticky: 언제 무엇을 사용할까?

fixed - 뷰포트 기준 고정

fixed는 뷰포트(화면)를 기준으로 요소를 고정시킵니다. 스크롤을 해도 항상 같은 위치에 고정되어 있어, 하단 footer나 상단 네비게이션 바에 적합합니다.

<footer>
  <p className="fixed bottom-4 inset-x-0 text-center">
    하단에 항상 고정되는 텍스트
  </p>
</footer>

특징:

• 스크롤해도 항상 화면의 같은 위치에 고정
• 뷰포트 기준으로 위치 결정
• 다른 요소 위에 겹쳐서 표시됨

중요: fixed의 containing block

fixed는 일반적으로 뷰포트를 기준으로 하지만, 조상 요소에 다음 속성이 있으면 그 요소가 containing block이 됩니다:

• transform (값이 none이 아닌 경우)
• perspective (값이 none이 아닌 경우)
• filter (값이 none이 아닌 경우)
• will-change (위 속성 중 하나로 지정된 경우)

relative 자체는 fixed의 containing block을 변경하지 않습니다.

{
  /* fixed는 뷰포트 기준 */
}
<div className="relative">
  <p className="fixed bottom-4">뷰포트 기준으로 고정</p>
</div>;
 
{
  /* transform이 있으면 해당 요소 기준 */
}
<div className="transform translate-x-0">
  <p className="fixed bottom-4">이 div 기준으로 고정됨! (주의)</p>
</div>;

sticky - 부모 요소 기준 고정

sticky는 부모 요소를 기준으로 스크롤 시 지정한 위치에 "달라붙는" 동작을 합니다. 테이블 헤더나 섹션 제목처럼 스크롤 중 특정 지점에서 고정되어야 할 때 사용합니다.

<div className="h-screen overflow-y-auto">
  <div className="h-96">긴 콘텐츠 1</div>
  <div className="sticky top-0 bg-white z-10">스크롤하면 여기 달라붙음</div>
  <div className="h-96">긴 콘텐츠 2</div>
</div>

특징:

• 부모 요소 내에서만 동작
• 지정한 위치(top, bottom 등)에 도달하면 고정
• 부모 요소를 벗어나면 일반 요소처럼 동작

중요: sticky positioning이 작동하려면

sticky positioning이 작동하려면 다음 조건을 만족해야 합니다:

1. 임계점 위치 지정: top, bottom, left, right 속성 값 중 적어도 하나는 auto가 아닌 값으로 지정되어 있어야 합니다.

2. 스크롤 가능한 조상 요소 필요: 스크롤이 가능한 조상 요소(scrollport)의 영역 내에 sticky가 설정된 요소가 있어야 합니다.

3. 중간 요소의 overflow 제한: 가장 가까운 스크롤 가능한 조상 요소(scrollport)의 자손이면서 sticky 요소의 조상 사이의 요소에는 overflow 속성의 값이 auto, scroll, hidden으로 설정되어 있지 않아야 합니다.

{
  /* ✅ 올바른 예시 */
}
<div className="h-screen overflow-y-auto">
  {/* 스크롤 가능한 조상 */}
  <div>
    {/* 중간 요소에 overflow가 없음 */}
    <div className="sticky top-0">sticky 요소</div>
  </div>
</div>;
 
{
  /* ❌ 잘못된 예시 - 중간 요소에 overflow가 있음 */
}
<div className="h-screen overflow-y-auto">
  {/* 스크롤 가능한 조상 */}
  <div className="overflow-hidden">
    {/* 이 overflow-hidden이 sticky를 막음 */}
    <div className="sticky top-0">sticky가 작동하지 않음</div>
  </div>
</div>;

핵심: sticky 요소와 스크롤 가능한 조상 요소 사이에 overflow: auto, scroll, hidden이 있으면 sticky가 작동하지 않습니다. relative와는 직접적인 관계가 없습니다.

하단 고정 + 가운데 정렬 방법

하단에 고정된 요소를 가운데 정렬하는 방법은 두 가지가 있습니다.

방법 1: inset-x-0 사용 (간단한 방법)

<p className="fixed bottom-4 inset-x-0 text-center">하단 가운데 정렬</p>

• inset-x-0: left: 0; right: 0;을 의미 (전체 너비)
• text-center: 텍스트 가운데 정렬
• 장점: 간단하고 직관적
• 단점: 요소가 화면 전체 너비를 차지

방법 2: left-1/2 -translate-x-1/2 사용 (정확한 방법)

<p className="fixed bottom-4 left-1/2 -translate-x-1/2 text-center">
  하단 가운데 정렬
</p>

• left-1/2: 요소의 왼쪽 끝을 화면의 50% 지점에 위치
• -translate-x-1/2: 요소 너비의 50%만큼 왼쪽으로 이동 (중심 정렬)
• 장점: 요소의 중심이 정확히 가운데에 위치, 요소 너비 유지
• 단점: 약간 복잡

왜 -translate-x-1/2가 필요한가?

left-1/2만 사용하면 요소의 왼쪽 끝이 화면 가운데에 위치해 오른쪽으로 치우칠 수 있습니다. 요소를 완전히 가운데 정렬하려면 요소 너비의 50%만큼 왼쪽으로 이동시켜야 합니다.

실제 사용 예시

React + Tailwind CSS를 사용한 실제 예시입니다:

export function Welcome() {
  return (
    <main className="min-h-screen p-8">
      <div className="max-w-2xl mx-auto">
        <h1>제목</h1>
        <div>콘텐츠</div>
 
        {/* 방법 1: 간단한 방법 */}
        <footer>
          <p className="fixed bottom-4 inset-x-0 text-center text-gray-500">
            하단 footer 텍스트
          </p>
        </footer>
 
        {/* 방법 2: 정확한 방법 */}
        <footer>
          <p className="fixed bottom-4 left-1/2 -translate-x-1/2 text-center text-gray-500">
            하단 footer 텍스트
          </p>
        </footer>
      </div>
    </main>
  );
}

주의사항

1. z-index 고려: fixed 요소는 다른 요소 위에 겹쳐지므로 필요시 z-index를 설정하세요.

<p className="fixed bottom-4 inset-x-0 text-center z-50">하단 고정 요소</p>

2. 반응형 디자인: 모바일에서는 bottom-4 대신 bottom-2 등으로 조정할 수 있습니다.

<p className="fixed bottom-2 md:bottom-4 inset-x-0 text-center">
  반응형 하단 고정
</p>

3. 콘텐츠와 겹침: fixed 요소는 일반 문서 흐름에서 제외되므로, 하단 콘텐츠가 가려질 수 있습니다. 필요시 padding-bottom을 추가하세요.

<main className="min-h-screen pb-20">
  {/* 콘텐츠 */}
</main>
<footer>
  <p className="fixed bottom-4 inset-x-0">footer</p>
</footer>

정리

• 하단에 항상 보이게: fixed bottom-4 (여백 자유) 사용
• 가운데 정렬 (간단): inset-x-0 text-center
• 가운데 정렬 (정확): left-1/2 -translate-x-1/2 text-center
• 스크롤 중 특정 위치 고정: sticky 사용

하단 콘텐츠를 고정할 때는 fixed를 사용하고, 가운데 정렬은 상황에 따라 inset-x-0 또는 left-1/2 -translate-x-1/2를 선택하면 됩니다.

참고 자료

• CSS position: sticky 완벽 가이드