웹 제작 overflow

유필선·2024년 4월 24일

HTML , CSS , JS

목록 보기
9/13

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

profile
이해해버려라!

0개의 댓글