div요소에 세로 스크롤바 넣는법

구현 내용

위의 이미지처럼 div 영역 안에 텍스트가 있을 경우 텍스트가 div영역 안을 벗어나지 않고 div영역 안에 세로 스크롤바를 넣어주는 방법에 대해서 알아보겠습니다

 

 

HTML

body태그 안에 클래스 이름이 scroll인 div태그를 생성해주고 안에는 아주 긴 내용의 텍스트를 입력해주었습니다

 

 

웹페이지에서 확인되면 브라우저의 가로 사이즈에 따라서 텍스트가 끝까지 표시되고 공간이 부족할경우 다음 줄로 넘어갑니다

 

728x90

CSS

이제 css로 넘어가서 박스 영역을 생성해보겠습니다

배경색상은 노란색으로 설정하였고 가로세로 div의 영역과 테두리를 생성해주었습니다

 

 

div영역을 벗어날 정도로 텍스트의 내용이 많을 경우 잘리지 않고 그대로 밑으로 글씨가 출력되어 보기 지저분합니다

저희가 원하는건 div영역 내에서 텍스트가 넘어갈 경우 스크롤바를 사용하여 전체 내용을 확인할 수 있도록 하고자 합니다

 

 

기존 css코드에서 overflow 속성 하나만 추가해주면 됩니다 

overflow auto 옵션을 줄 경우 설정했던 div박스 영역 가로세로 내용이 넘칠 때만 스크롤바를 추가해줍니다

 

 

 

overflow 속성에 옵션에 대해 알고싶으시면 아래 더보기를 클릭해주세요

overflow의 속성

overflow:visible : 영역을 넘어가도 내용을 그대로 보여줍니다

overlfow:hidden : 영역을 넘어가는 부분의 내용은 보이지 않도록 해줍니다

overflow:scroll : 영역이 넘어가면 보이지 않지만 스크롤바를 사용하여 전체 내용을 확인할 수 있도록해줍니다

overflow:auto : 영역이 넘어가는 부분이 있을 경우 해당 부분을 보이지 않도록 하고 스크롤바를 사용하여 전체 내용을 확인할 수 있습니다

 

 

 

Overflow:auto 속성 적용 결과

div로 선택된 영역 부모 요소 안에서 자식 요소인 텍스트가 길어서 넘어가는 경우 내용이 보이지 않으며 스크롤바를 내리면 아래에 있는 내용까지 전부 확인할 수 있습니다