[CSS] (overflow) 스크롤 막대 생성

개념 : overflow CSS 약식 속성 은 요소의 오버플로에 대해 원하는 동작을 설정합니다 . 
즉, 요소의 내용이 블록 형식 컨텍스트 에 맞지 않을 때 양방향으로 설정합니다.

overflow : visible
콘텐츠는 잘리지 않으며 패딩 상자 외부에서 렌더링될 수 있습니다.

overflow : hidden
패딩 상자에 맞게 필요한 경우 콘텐츠가 잘립니다. 스크롤 막대가 제공되지 않으며 사용자가 스크롤할 수 있도록(예: 끌기 또는 스크롤 휠 사용) 지원이 허용되지 않습니다. 콘텐츠 는 프로그래밍 방식으로 스크롤될 수scrollLeft 있으므로(예: 또는 메서드 와 같은 속성 값을 설정하여 scrollTo()) 요소는 여전히 스크롤 컨테이너입니다.

overflow : clip
와 유사하게 hidden콘텐츠가 요소의 패딩 상자에 잘립니다. clip와 의 차이점 은 키워드가 프로그래밍 방식 스크롤을 포함한 모든 스크롤을 금지 hidden한다는 것 입니다. clip상자는 스크롤 컨테이너가 아니며 새 서식 컨텍스트를 시작하지 않습니다. 새 서식 컨텍스트를 시작하려면 를 사용하여 시작할 수 있습니다 display: flow-root.

overflow : scroll
패딩 상자에 맞게 필요한 경우 콘텐츠가 잘립니다. 브라우저는 콘텐츠가 실제로 잘렸는지 여부에 관계없이 항상 스크롤바를 표시하여 콘텐츠가 변경될 때 스크롤바가 나타나거나 사라지는 것을 방지합니다. 프린터는 여전히 넘치는 콘텐츠를 인쇄할 수 있습니다.

overflow : auto
사용자 에이전트 에 따라 다릅니다 . 내용이 패딩 상자 안에 맞는 경우 와 같아 보이지만 visible여전히 새 블록 서식 컨텍스트를 설정합니다. 콘텐츠가 넘칠 경우 데스크톱 브라우저는 스크롤바를 제공합니다.

overflow : overlay 더 이상 사용되지 않음
와 동일하게 작동 auto하지만 공간을 차지하는 대신 콘텐츠 위에 스크롤 막대가 그려집니다.