React overflow

react overflow

# 시작하며

개발을 하며 앞서 포스팅한 공백이나 빈 공간과 함께, 자주 마주하게 되는 또 하나의 상황으로 overflow가 있다. overflow는 CSS에서 중요한 개념으로, 설정한 박스 내에 담을 수 있는 용량을 초과했을 때 발생한다.

# Overflow란 무엇일까?

React로 개발을 진행하면, width와 height, inline-size 등을 설정하여 해당 범위를 제한할 수 있다. overflow는 해당 상황에서 설정한 범위 내에 너무 많은 내용이 포함되면 발생하는 것으로, 박스 내부에 들어가지 않는 상황을 초래한다. 이러한 overflow는 CSS를 통해 관리하며, 다양한 도구들을 제공받고 있다.

• CSS는 데이터 손실을 최소화한다.

overflow가 발생하면, CSS가 기본적으로 어떻게 작동하는지 알아보자.

먼저 설정한 height를 초과하는 상황을 살펴보면, height에 일정 값을 부여한 뒤 해당 값을 초과할 만큼의 문자열을 입력해 주었다. 따라서 위 그림과 같이 설정 박스를 초과하는 결과가 발생하였다.

다음으로는 인라인 크기로 제한된 박스의 단어이다. 박스의 width가 입력 단어에 비해 너무 작게 만들어져 위와 같은 결과가 발생한다.

이렇게 설정한 값을 초과하는 결과가 발생하면 CSS는 박스를 넘어 출력을 진행한다. 왜 CSS는 기본적으로 혼란스러움을 줄 수 있는 어수선한 방식을 선택했을까? CSS는 가능하면 내용을 숨기는 방식을 선택하지 않는다. 내용을 숨기게 되면, 데이터 손실이 발생할 수 있기 때문이다.

# Overflow 속성

overflow 속성은 요소의 overflow를 제거하고 브라우저가 원하는 방식으로 동작하도록 하는 방법이다. 앞서 말했듯이 overflow의 기본 값은 visible이기 때문에, overflow가 발생하면 기본적으로 컨텐츠를 볼 수있다. 그렇다면 무조건적으로 넘치는 해당 컨텐츠를 관리하는 방법은 무엇이 있을까? CSS방법도 존재하지만, 현재 개발에 사용하고 있는 Tailwind CSS를 예로들어 설명해보려한다.

• image

먼저 image의 경우를 살펴보면, overflow가 발생했을 경우 초과된 부분까지 보여지게 처리할 수 있다.

출처. Tailwind CSS

해당 기능은 [overflow-visible]을 작성하여 적용할 수있고, 요소의 경계를 넘은 모든 컨텐츠가 출력된다.

---

출처. Tailwind CSS

다음으로 초과된 부분을 숨겨주는 기능이 있다. 이는 [overflow-hidden]을 통해 사용하고, 경계를 초과하는 요소 내의 컨텐츠를 자르는데 사용할 수 있다.

---

출처. Tailwind CSS

단순하게 가리고 보여주는 기능과 동시에, auto로 적용하는 기능이 있다. 이는 컨텐츠가 경계를 초과했을 경우 scroll을 추가한다. 물론 항상 scroll를 표시하는 [overflow-scroll]도 존재하지만, [overflow-auto]는 경계를 초과했을 경우에만 scroll을 표시하여 보다 유동적으로 사용이 가능하다.

추가로 overflow-x-scroll, overflow-y-scroll를 통해 스크롤 방향 또한 설정하는 것이 가능하다.

• text

text overflow의 경우 세 가지로 구분할 수 있는데, truncate, text-ellipsis, text-clip가 있다.

출처. Tailwind CSS

먼저 truncate는 용어 그대로 '자르다'라는 의미를 가진다. text가 overflow를 발생시키면, 초과한 해당 문자열을 가릴 수 있으며 필요한 경우 줄임표를 사용할 수 있다.(hidden과 동일 기능)

---

출처. Tailwind CSS

다음으로 ellipsis가 있다. 이 또한 생략으로서, 넘치는 텍스트를 자르는데 사용한다. 용어 그대로 생략한다는 의미로, 작성 중인 용어를 생략할 수 있다.

---

마지막으로 clip 역시 컨텐츠 영역의 한계에서 텍스트를 자르는데 사용한다.