레슨
시작
학습 시작
CodeGym /자바 코스 /Frontend SELF KO /스티키 포지셔닝

스티키 포지셔닝

Frontend SELF KO
레벨 22 , 레슨 0
사용 가능

6.1 position: sticky

CSS에서 스티키 포지셔닝(position: sticky)은 상대 포지셔닝과 고정 포지셔닝의 특성을 결합해. 스티키 포지셔닝을 가진 요소들은 지정된 스크롤 임계값에 도달할 때까지는 상대 포지셔닝처럼 행동하고, 그 뒤로는 고정되어 있는 거야.

스티키 포지셔닝의 특징:

  • position: sticky를 가진 요소는 특정 스크롤 포지션에 도달할 때까지는 상대 포지셔닝처럼 동작해.
  • 지정된 임계값을 넘어서면 요소는 고정되어 그 자리에 남아 다른 스크롤 임계값을 초과할 때까지 움직이지 않아.
  • 스티키 포지셔닝은 부모 컨테이너 내에서만 작동해. 부모 컨테이너가 뷰포트의 경계를 벗어나면, 스티키 요소는 고정 특성을 잃게 돼.

스티키 포지셔닝의 문법

스티키 포지셔닝을 적용하기 위해서는 position: sticky 속성과 스크롤 임계값을 정하는 top, right, bottom, left와 같은 좌표들을 사용해. 

    
      .element {
        position: sticky;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

여기서:

  • top: 브라우저 창의 상단 가장자리에서 요소의 상단 가장자리까지의 거리
  • right: 브라우저 창의 오른쪽 가장자리에서 요소의 오른쪽 가장자리까지의 거리
  • bottom: 브라우저 창의 하단 가장자리에서 요소의 하단 가장자리까지의 거리
  • left: 브라우저 창의 왼쪽 가장자리에서 요소의 왼쪽 가장자리까지의 거리

예시:

CSS
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .header {
        position: sticky;
        top: 0;
        background-color: deepskyblue;
        padding: 10px;
        font-size: 24px;
        color: white;
      }

      .content {
        margin-top: 25px;
        background-color: lightgrey;
        padding: 20px;
      }
HTML
    
      <div class="wrapper">
        <div class="header">Sticky Header</div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        </div>
      </div>

이 예제에서 .header 클래스를 가진 헤더는 페이지가 스크롤될 때 브라우저 뷰포트 상단 가장자리에 도달할 때까지 그 자리에 머무르는 거야.

6.2 스티키 포지셔닝의 장단점

스티키 포지셔닝의 장점

  1. 사용자 인터페이스 개선:
    • 헤더, 내비게이션 바 및 사이드바와 같은 스티키 요소들은 긴 페이지에서도 사용자에게 항상 보이도록 함으로써 내비게이션과 콘텐츠 접근성을 향상시켜.
  2. 상대 포지셔닝과 고정 포지셔닝의 장점을 결합:
    • 스티키 포지셔닝은 요소들이 스크롤 임계값에 도달할 때까지 문서 흐름에 남아 상대적 위치를 유지하게 해, 좀 더 자연스러운 요소 동작을 제공해.
  3. 간단한 구현:
    • 스티키 포지셔닝은 최소한의 코드로 쉽게 구현할 수 있고, JavaScript 없이도 가능해.

스티키 포지셔닝의 단점

  1. 오래된 브라우저에서의 제한된 지원:
    • 스티키 포지셔닝은 대부분의 최신 브라우저에서 지원되지만, 오래된 브라우저에서는 작동하지 않을 수 있어. 이로 인해 호환성을 위한 추가 솔루션이 필요할 수 있지.
  2. 부모 컨테이너에 대한 종속성:
    • 스티키 포지셔닝은 부모 컨테이너 내에서만 작동해. 부모 컨테이너가 뷰포트의 경계를 벗어나면, 스티키 요소는 고정 특성을 잃게 돼.
  3. 콘텐츠 중첩 문제:
    • 스티키 요소들은 디자인 시 요소의 높이나 너비를 고려하지 않으면 페이지의 다른 요소들과 겹칠 수 있어.

6.3 스티키 포지셔닝 사용 예제

1. 스티키 사이드바

콘텐츠를 스크롤할 때 항상 보이는 스티키 사이드바 만들기.

CSS
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .container {
        display: flex;
      }

      .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: lightgreen;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 20px;
      }
HTML
    
      <div class="wrapper">
        <div class="container">
          <div class="sidebar">Sticky Sidebar</div>
          <div class="content">
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          </div>
        </div>
      </div>

이 예제에서 .sidebar 클래스를 가진 사이드바는 콘텐츠가 스크롤될 때 그 자리에 머무르게 돼.

2. 스티키 테이블 헤더

많은 양의 데이터를 스크롤할 때 항상 보이는 스티키 테이블 헤더 만들기.

CSS
    
        .wrapper {
          height: 200px;
          overflow: auto;
        }

        table {
          width: 100%;
          border-collapse: collapse;
        }

        th, td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        th {
          position: sticky;
          top: 0;
          background-color: deepskyblue;
          color: white;
        }

        tbody {
          min-height: 300px;
          display: block;
        }

        tbody tr {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
HTML
    
      <div class="wrapper">
        <table>
          <thead>
            <tr>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
          </tbody>
        </table>
      </div>

이 예제에서 테이블의 헤더는 테이블 콘텐츠가 스크롤될 때 그 자리에 머무르게 돼.

코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION