[CSS 레이아웃] left,right 중앙정렬 + right fixed

✏️하고 싶은 것

• left_div, right_div의 전체영역이 화면 중앙 정렬이 되면서
• left_div는 스크롤 되고
• right_div는 고정되어 스크롤 되지 않는 인스타그램과 동일한 레이아웃 구현을 하고자 합니다.

html

<div class="wrap">
  <div class="left-div">
    메인 컨턴츠 영역
  </div>
  <div class="right-div-wrap">
      <div class="right-div">
        Fixed 영역
      </div>
  </div>
</div>

• left-div, right-div를 감싸는 div
• right-div를 감싸는 right-div-wrap으로 영역 점유
• right-div는 position:fixed 설정

CSS

.left-div, .right-div  {
  width: 300px;
  height: 300px;
  border:1px solid #000;
}

.wrap {
  display: flex;
  justify-content: center;
}

.right-div-wrap {
  width: 300px;
}

.right-div {
  position: fixed;
  top: 0;
}

반응형 웹 스타일 추가

@media only screen and (max-width: 980px) {
    
    .right-div {
        display: none;
    }

    .right-div-wrap {
        width: 0;
    }
}

컨터이너 최대 너비가 980px보다 적어질 경우에는 left-div만 보이도록
스타일 추가