[트러블슈팅, CSS] - 내용이 요소의 크기를 벗어나면 스크롤 기능

22.09.07 기록
에러는 아니지만 새로 알게 된 내용이라 정리

채팅창 안에 내용이 요소의 크기를 벗어나면 스크롤 기능 추가하기  

결론: "overflow: auto"

---

✅ 해결 과정

채팅창에 내용들이 많아지니 감싸고 있던 요소를 벗어나버렸다.

overflow 속성은 내용이 요소의 크기를 벗어났을 때 처리하는 방법을 지정해주는 속성이다.
visible, hidden, scroll, auto 등 여러 값을 할당해줄 수 있다.
자세한건 여기!! (아래와 같이 값을 선택하여 실제 화면에 어떻게 보이는지 실습해볼 수 있다.)

그 중 auto를 사용하면 내용이 요소의 크기를 벗어날 때만 스크롤바를 제공해준다!

추가로 줄바꿈 속성(white-space, word-wrap)도 알아두면 좋을 것 같다.

white-space의 속성값으로는 normal, nowrap, pre 등이 있으며, 나는 기본값을 사용하였다.
기본값인 normal은 글자 줄이 자동으로 바뀐다. (너비를 초과할 경우 다음 줄로 바뀐다.)

word-wrap의 속성값으로는 normal과 break-word가 있는데 나는 break-word를 사용하였다.
break-word를 사용하면 단어 줄 바꿈을 발생시켜준다.