[CSS] 넘치는 컨텐츠 제어 <overflow> <overflow-x, y>

<overflow>

• inherit (상속) : 지정된 영역에서 컨텐츠가 넘치지 않을 때
  • 부모에 적용된 overflow가 없으면 상속 받지 못함

• visible : 지정된 영역에서 컨텐츠가 넘치면 무조건 보여짐.

• hidden : 지정된 영역에서 컨텐츠가 넘치면 무조건 숨김.

• auto : 지정된 영역에서 컨텐츠가 넘치면 자동으로 스크롤이 생기고, 넘치지 않으면 스크롤 x

• scroll : 지정된 영역에서 컨텐츠가 넘치든 넘치지 않든 무조건 스크롤 생성.

---

<overflow-x>

가로 방향, x축으로 오버플로우 적용

• 웹의 특성상 컨텐츠가 넘치면 아래로 떨어지기 때문에 overflow-x 만으로 가로 스크롤을 만들기는 어려움.
• white-space:nowrap 으로 줄바꿈을 없애고 강제로 한 줄로 길게 만들어서 적용하는 방법이 있음.
• white-space : 공백을 처리하는 속성

<overflow-y>

세로 방향, y축으로 오버플로우 적용

---