overflow-x: hidden

overflow-x: hidden 

• 요소의 가로 방향으로 넘치는 모든 콘텐츠가 잘리며 표시되지 않음
• 가로 스크롤바를 제거, 콘텐츠가 잘려 보이지 않게 됨

.container {
  width: 300px;
  height: 200px;
  overflow-x: hidden;
}

.container 요소의 폭이 300px을 초과하는 콘텐츠는 가려지게 됨

---

🤔 언제 사용할까?

(1) 레이아웃 고정 
(2) 불필요한 스크롤 제거   
(3) 디자인 제어

---

overflow-y

• 세로 방향(y 축)으로 넘치는 콘텐츠에 대한 처리

overflow

• 가로, 세로 방향의 콘텐츠 넘침 동시에 처리