웹 제작 overflow

overflow

CSS에서는 overflow 속성을 통해서 주어진 공간이 모자라 넘치는 컨텐츠를 어떻게 보여줄지를 제어한다.

• white-space
  white-space는 wrap이 기본값이고 nowrap으로 바꾸면 줄바꿈을 하지 않고 한 줄에 정렬한다.

1) 상위엘리먼트가 하위엘리먼트를 어떻게 처리할 것인지 결정하는 속성
2) overflow: hidden;
→ 글자가 넘칠 때 box크기 바깥에 있는 것들은 잘라서 보여줌

• overflow: hidden; 적용
  
  3) overflow: auto;
  → 글자가 넘칠 때 box크기에 맞춰서 스크롤이 생성된다.
  → 특정한 섹선만 스크롤
  
• overflow: auto; 적용
  4) overflow: visible;
  → 글자가 넘칠 때 넘치는 만큼 보여줌 (overflow의 기본값)
  부모 엘리먼트를 넘어갈 때 처리방법(overflow)
  5) overflow: scroll;
  → 글자가 넘칠 때 넘치는 만큼 스크롤 생성
  
  6) overflow:hidden; text-overflow:ellipsis;
  → 글자가 넘칠 때 끝 부분을 ... 으로 처리
  

• hidden, scroll, ellipsis 차이
  

overflow와 text-overflow