끈끈해지기 — CSS 끈끈한 위치 지정 문제 해결

작사: Ibadehin Mojeed✏️

당신은 세련된 웹페이지를 만들기 위해 며칠, 어쩌면 몇 달 동안 일했습니다. 처음에는 모든 것이 좋아 보이지만 스크롤을 시작하면 갑자기 끈적한 요소(내비게이션 메뉴, 헤더 또는 사이드바 클릭 유도 문구)가 전혀 고정되지 않거나 원래 위치에 머물지 않습니다.

답답하시죠?

처음에는 사소한 버그처럼 보일 수도 있지만, 금방 큰 골칫거리가 될 수 있으며, 해결하지 못한 채 방치하면 사이트 참여도에 큰 타격을 줄 수 있습니다.

이 가이드에서는 가장 일반적인 고정 위치 지정 문제를 해결합니다.

• 오프셋이 지정되지 않았습니다
• 플렉스/그리드 컨테이너 내부의 끈적한 요소
• 끈적끈적한 요소의 용기 높이
• Ancestor에는 오버플로 속성이 있습니다
• 본문 요소에 오버플로

그런 다음 끈적끈적한 포지셔닝 전문가가 되기 위한 실제 사례와 팁을 통해 이러한 끈적한 포지셔닝 문제를 해결하는 방법을 살펴보겠습니다. 일반적인 문제를 살펴본 후 위치 속성 및 CSS 고정 위치에 대한 개요를 확인할 수도 있습니다.

오프셋이 지정되지 않았습니다.

첫 번째이자 가장 간단한 문제 해결 단계는 위쪽, 오른쪽, 아래쪽 또는 왼쪽과 같은 속성을 사용하여 오프셋을 지정하는 것입니다.

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

오프셋이 없으면 고정 동작이 활성화되지 않습니다. 또한 적용된 오프셋이 의도한 스크롤 방향에 적합한지 확인하세요. 예를 들어 세로 스크롤의 경우 위쪽 또는 아래쪽, 가로 스크롤의 경우 왼쪽 또는 오른쪽입니다.

플렉스/그리드 컨테이너 내부의 끈적한 요소

아래 CodePen은 그리드 컨테이너 내부의 고정 요소를 보여줍니다.

CodePen에서 Ibaslogic(@ibaslogic)이 그리드 컨테이너 내부에 있는 Pen Sticky 요소를 확인하세요.

CodePen에서는 각 제목을 담는 컨테이너에 스크롤 가능한 공간이 충분하기 때문에 제목이 고정됩니다. 레이아웃을 더 잘 시각화하려면 콘텐츠 주위에 테두리를 추가해 보세요. 이렇게 하면 섹션을 스크롤할 때 각 제목이 제자리에 어떻게 유지되는지 확인하는 데 도움이 됩니다.

 

HTML 코드에서 제목은 그리드 컨테이너 내에 배치되고 그리드 항목은 사용 가능한 공간을 채우기 위해 자연스럽게 늘어납니다. 그러나 이렇게 늘어나면 끈적한 요소가 스크롤하고 붙일 공간이 충분하지 않게 될 수 있습니다.

이 문제를 해결하기 위해 그리드 컨테이너에 align-items: start를 적용했습니다. 이렇게 하면 접착 요소가 늘어나는 것을 방지하여 의도한 대로 작동할 수 있는 충분한 공간을 확보할 수 있습니다.

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

정렬 항목이 없으면 시작하면 그리드 컨테이너가 사용 가능한 공간을 채우기 위해 제목을 늘려 요소가 뷰포트 상단에 달라붙는 것을 방지합니다. 이는 아래에 설명된 것처럼 요소를 올바르게 첨부할 수 있는 스크롤 가능한 공간이 충분하지 않기 때문에 발생합니다.

 

예제는 그리드 구현을 보여주지만 Flexbox 레이아웃에도 동일한 솔루션이 적용됩니다.

끈적한 요소의 컨테이너 높이

아래 CodePen과 상호 작용하고 뷰포트를 스크롤하여 고정 동작을 관찰하면 첫 번째 고정 요소가 예상대로 작동하지 않는 반면 두 번째 고정 요소는 레이아웃이 시각적으로 유사해 보이지만 올바르게 작동한다는 것을 알 수 있습니다. :

앞서 언급했듯이 고정 요소가 제대로 작동하려면 해당 컨테이너의 높이나 스크롤 가능한 공간이 충분해야 합니다. 컨테이너를 자세히 살펴보겠습니다. 첫 번째 레이아웃에서 고정 요소는 추가

:
내에 포함되어 있습니다.

article {
  align-items: start;
  /* ... */
}

아래 CodePen에서 섹션을 스크롤하여 고정 제목이 섹션 자체 내에 어떻게 고정되는지 관찰할 수 있습니다. 스크롤 가능한 영역을 시각화하기 위해 테두리가 추가되었습니다:

본문 요소의 오버플로

body 요소에 오버플로를 설정하면 일반적으로 다른 상위 요소와 마찬가지로 고정 위치 지정이 중단되지 않습니다.

<p>본문이 전체 페이지에 대한 기본 스크롤 컨텍스트를 생성하고 이 경우 고정 요소가 여전히 뷰포트를 기준으로 고정되기 때문입니다.</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVzBJx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>스크롤 메커니즘이 생성되더라도 더 작은 컨테이너 내에서처럼 고정 동작을 방해하지 않습니다. 단, 뷰포트를 오버플로하는 콘텐츠를 스크롤하는 기능을 제거하는 Overflow: Hidden을 설정하는 경우는 예외입니다. </p>

<p>이제 일반적인 고정 문제를 다루었으므로 위치 속성과 고정 위치에 대한 보다 일반적인 개요를 읽을 수 있습니다.</p><h2>
  
  
  위치 속성에 대한 간략한 개요
</h2>

<p>CSS 위치 속성은 요소가 웹페이지에 배치되는 방식을 제어합니다. 상대, 절대, 고정 또는 고정과 같은 값을 사용하면 포함 블록이나 뷰포트 내에서 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 사용하여 요소의 배치를 조정할 수 있습니다. 또한 이러한 값을 사용하면 Z-인덱스를 사용하여 요소를 서로 관련하여 배치할 수 있습니다. </p>

<p>그러나 이러한 오프셋 속성(예: 위쪽, 오른쪽, 아래쪽, 왼쪽)과 Z-색인은 기본 정적 위치 지정이 있는 요소에는 적용되지 않습니다. </p>

<p>고정 포지셔닝 문제를 해결할 때 고정 값이 무엇인지 다시 살펴보는 것이 도움이 됩니다. 해당 동작을 이해하면 일반적인 문제와 이를 효과적으로 해결하는 방법을 보다 명확하게 파악할 수 있습니다.</p>

<h2>
  
  
  CSS 고정 위치
</h2>

<p>위치: 고정 요소를 적용하면 문서 흐름에서 해당 위치를 유지하여 상대적으로 배치된 요소와 유사하게 동작합니다. 그러나 "고착"되어 스크롤에 응답하는 기능도 얻습니다. </p>

<p>상위: 10px와 같은 오프셋을 정의하면 아래로 스크롤할 때 요소가 해당 위치에 고정되어 위치: 고정을 사용하는 것처럼 동작합니다. 가로 스크롤의 경우 왼쪽이나 오른쪽과 같은 오프셋을 사용하여 비슷한 효과를 얻을 수 있습니다. 고정 동작은 요소의 포함 블록 내에서만 적용된다는 점에 유의하는 것이 중요합니다. 해당 블록의 경계를 지나 스크롤하면 고정 요소는 일반 요소처럼 스크롤되어 사라집니다. </p>

<p>아래 CodePen은 끈적한 동작을 보여줍니다. 뷰포트를 스크롤하여 고정 제목이 실제로 작동하는지 확인하세요.</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVKrrq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>각 HTML 제목은 위치: 고정 및 상단: 0으로 스타일이 지정되어 콘텐츠를 스크롤할 때 표시 영역 상단에 고정됩니다. 그러나 고정 제목은 해당 섹션에만 국한되어 있습니다. 섹션의 콘텐츠가 완전히 스크롤되면 해당 제목이 위로 이동하여 다음 제목이 제자리에 고정됩니다. 이는 고정 요소가 상위 컨테이너를 벗어나지 않음을 보여줍니다.</p>

<h2>
  
  
  결론
</h2>

<p>고정 요소가 예상대로 작동하지 않으면 웹페이지를 구축하는 것이 좌절스러울 수 있습니다. 그러나 상위 오버플로 속성 및 상위 컨테이너 높이와 같은 주요 요소를 이해하면 고정 위치 지정 문제를 해결하는 데 도움이 될 수 있습니다. </p>

<p>이 가이드의 예시와 팁을 사용하면 고정 탐색, 헤더, 사이드바 클릭 유도 문구가 원활하게 작동하는지 확인할 수 있습니다. 이 가이드가 도움이 되었다면 온라인으로 자유롭게 공유해 주세요. 질문이나 의견이 있으시면 댓글 섹션에 참여해 주세요!</p><hr>

<h2>
  
  
  프런트엔드가 사용자의 CPU를 많이 사용하고 있나요?
</h2>

<p>웹 프런트엔드가 점점 더 복잡해짐에 따라 리소스를 많이 사용하는 기능으로 인해 브라우저에서 점점 더 많은 것을 요구하게 됩니다. 프로덕션에 있는 모든 사용자의 클라이언트측 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있다면 LogRocket을 사용해 보세요.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173266096142897.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Getting sticky with it — Troubleshooting CSS sticky positioning"></p>

<p>LogRocket은 웹 앱, 모바일 앱 또는 웹사이트에서 일어나는 모든 일을 기록하는 웹 및 모바일 앱용 DVR과 같습니다. 문제가 발생한 이유를 추측하는 대신 주요 프런트엔드 성능 지표를 집계 및 보고하고, 애플리케이션 상태와 함께 사용자 세션을 재생하고, 네트워크 요청을 기록하고, 모든 오류를 자동으로 표시할 수 있습니다.</p>

<p>웹 및 모바일 앱 디버깅 방법을 현대화하고 무료로 모니터링을 시작해 보세요.</p>


          

위 내용은 끈끈해지기 — CSS 끈끈한 위치 지정 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!