[css] 화면에 꽉차게 설정

화면 전체 너비를 채우는 div 요소를 만들고 싶지만, 가장 상위 요소에 padding: 16px이 적용되어 있다면, 해당 div 요소를 상위 요소의 padding에 영향받지 않도록 설정해야 합니다. 이를 위해 일반적으로 두 가지 방법을 사용할 수 있습니다:

• 음수 마진 사용: 가장 상위 요소의 padding과 동일하지만 반대 방향의 음수 마진을 적용하여 div 요소를 화면 전체 너비로 확장합니다.
• Viewport Width (vw) 단위 사용: div의 너비를 100vw로 설정하여 뷰포트(viewport)의 전체 너비와 동일하게 만듭니다. 이 방법은 스크롤바 너비에 따라 문제가 발생할 수 있으니 주의해야 합니다.

음수 마진 사용 예시

<div style={{ padding: '16px' }}>
  {/* 부모 요소에 padding 적용 */}

  <div style={{ width: 'calc(100% + 32px)', margin: '0 -16px' }}>
    {/* 화면 전체 너비를 채우는 div */}
    화면에 꽉 차는 내용
  </div>
</div>

Viewport Width 사용 예시

<div style={{ padding: '16px' }}>
  {/* 부모 요소에 padding 적용 */}

  <div style={{ width: '100vw', position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw' }}>
    {/* 화면 전체 너비를 채우는 div */}
    화면에 꽉 차는 내용
  </div>
</div>

두 번째 방법은 div를 왼쪽으로 50vw만큼 이동한 다음, 다시 margin을 사용하여 원래 위치로 되돌리는 방식으로 작동합니다. 이 방법은 스크롤바의 너비가 뷰포트 너비에 포함될 때 요소가 화면을 넘어갈 수 있으니 주의가 필요합니다.