container

특정 구역만 크기를 지정하고 싶거나(ex)🌿max-width 설정) 스타일 작업을 하고 싶을 때 원하는 범위를 div로 감싸고 container나 wrapper 클래스 속성을 준다.

ex)

<main>
  <div class="container">
    <h2>첫 번째 섹션</h2>
    <p>이 섹션의 내용입니다.</p>
  </div>
</main>

이런 container는 여러 곳에서 재활용해서 쓴다! (같은 클래스 이름을 써서)

🌿 팁: 반응형 화면을 구현하고 싶을 때 max-width 속성을 적용하면 좋다. 현재 보고 있는 화면(뷰포트?) 너비가 max-width 값 이하일 때는 width가 화면 너비와 같게 자동으로 지정되기 때문.

---

참고: https://scrimba.com/learn/frontend/solution-8-containing-our-layout-cn4JgRhr?a=10236.101.12.L44_8