overflow속성 정리

1 사용법

---

overflow는 x, y방향으로 벗어나는 부분을 처리할 수 있다. 

 .element {

    height: 200px;

    overflow: [overflow-x] [overflow-y];

}

2 드러내기 :: 『visible』『visible auto』

---

overflow 속성으로 'visible', 'visible auto'를 통해 영역에서 벗어난 부분을 드러낼 수 있다. 

visible auto를 설정할 경우, x,y축 중에서 하나만 설정해주면 나머지 값은 자동이다. 

  .element1 {

    height: 200px;

    overflow: visible;

}

.element2 {

    height: 200px;

    overflow: visible auto;

}

3 숨기기 :: 『hidden』

---

'hidden'속성은 지정되지 않은 영역을 숨겨준다.*(삭제 아님)

  .element {

    height: 200px;

    overflow: hidden;

}

4 스크롤 :: 『scroll』『auto』

---

'overflow:scroll'은 특별한 상황이 아닌 이상, 금기시되는 웹디자인 설정에 속한다. 

 

.element {

    height: 200px;

    overflow: scroll;

}

꼭 scroll을 사용해야하는 상황이라면, scroll속성보다는 auto를 사용하자. auto설정은 사용자 반응에 따라 scroll bar를 자동으로 on/off 처리한다. 

 .element {

    height: 200px;

    overflow: auto;

}

5 좌,우 설정 :: 『overflow-x』『overflow-y』

---

x,y축 중에서 어느 한쪽 방향으로만 scroll을 설정하는 부분은 상황에 따라 유용할 수 있다.

 

 .element {

    height: 200px;

    overflow-x: visible; /* visible/hidden/auto/scroll/inherit 사용가능 */;

    overflow-y: visible; /* visible/hidden/auto/scroll/inherit 사용가능 */;

}

6 텍스트 잘라내기:: 『text-overflow』

---

overflow는 텍스트를 간편하게 잘라내는 용도로 사용할 수도 있다.

 

 .user__name {

     overflow: hidden;

    white-space: nowrap;

     text-overflow: ellipsis;  /* ellipsis / clip / string / initial / inherit 사용가능*/

}

* clip : 잘린 부분에 아무런 표시가 없음

* ellipsis : 잘린 부분 (...)으로 표시 됨

* string : 잘린 부분에 지정된 문자열로 표시(지원 브라우저 없음)

* initial : clip과 별 차이 없음

7 모바일 대응 :: 『-webkit-overflow-scrolling』

---

'webkit-overflow-scrolling'은 모바일에서 터치 제스처를 끝낸 이후에도 잠깐동안 콘텐츠가 계속 스크롤 할 수 있는 속성이다.

 

.wrapper {

     overflow-x: auto;

     -webkit-overflow-scrolling: touch;

}