Sticky 요소의 너비를 화면 꽉 채우기

포트폴리오 사이트 프로젝트에서 화면이 768px 이하로 줄어들면, 탭 메뉴가 최상단에서 레이아웃의 중앙으로 배치되도록 했고,position sticky로 변경되도록 구현했습니다.

그런데 탭 메뉴의 상위 부모 컨테이너에 padding: 10px이 적용되어 있어, fixed로 되어 있는 헤더와 통일감을 주기 위해 탭 메뉴의 너비를 화면 전체로 설정하고 싶었습니다.

이를 해결하기 위해 다음과 같은 CSS 코드를 사용했습니다.

@media screen and (max-width: 768px) {
    .list {
        position: sticky;
        top: var(--header-height);
        z-index: 10;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
}

width: 100vw

• 100vw는 뷰포트 너비(Viewport Width) 전체를 차지하는 값입니다. 즉, 화면 전체의 너비만큼 요소를 확장시킵니다.
• 부모 요소에 패딩이 있더라도, 요소 자체는 화면 전체를 차지하게 설정할 수 있습니다.

margin-left: calc(-50vw + 50%):

• -50vw: 요소를 화면의 절반만큼 왼쪽으로 이동시킵니다. 이 값은 100vw로 확장된 요소가 부모 컨테이너의 패딩을 무시하고, 화면 전체에 걸치도록 만드는 역할을 합니다.
• +50%: 화면 너비에 맞추어 요소가 완전히 중앙에 오도록 조정합니다.