CSS overflow 속성

📌  overflow 

 

콘텐츠가 너무 커서 element의 Block Format Context를 맞출 수 없을 때의 처리법을 지정한다.

 

필요한 속성 (택 1)

📍  블록 레벨 컨테이너의 높이 (height / max-height)
📍  white-space: nowrap 
 (※ white-space 속성은 element가 공백 문자를 처리하는 방식을 나타낸다.)

 

 

◾  overflow : visible;

 

See the Pen by ciocio97 (@ciocio97) on CodePen.

 

기본값 /  콘텐츠를 자르지 않는다.

 

 

◾  overflow : hidden;

 

See the Pen by ciocio97 (@ciocio97) on CodePen.

 

해당 element의 크기(정해진 크기)에 맞춰 컨텐츠를 과감히 잘라버린다.

 

 

 

📍  overflow: hidden && scrollLeft EventHandler

 

See the Pen by ciocio97 (@ciocio97) on CodePen.

 

scrollLeft 속성을 사용하여 스크롤하기

 

 

 

◾  overflow : scroll;

 

See the Pen by ciocio97 (@ciocio97) on CodePen.

 

콘텐츠가 정해진 크기를 벗어나든 말든 스크롤바를 노출시킨다. default값으로 스크롤바가 붙는다.

 

 

◾  overflow : auto;

 

See the Pen by ciocio97 (@ciocio97) on CodePen.

 

콘텐츠가 정해진 크기를 벗어났을 때 스크롤바를 노출시킨다. UI적으로 가장 아름다움 😃

 

 

 

📌  overflow 속성을 공부하게 된 이유

 

티스토리 블로그 스킨을 만들던 중 처음보는 태그 css를 발견하였다 !

 

#acc-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 0;
}

#acc-nav a {
  display: block;
  position: inherit;
  
  top: 0;
  left: 0;
  
  overflow: hidden;
  white-space: nowrap;

  width: 1px;
  height: 1px;
  margin-left: -1px;
  margin-bottom: -1px;
}

 

a태그 자체를 display: block으로 블럭처리를 하고, overflow: hidden, white-space: nowrap 을 줘서

정해진 크기 (width: 1px, height: 1px) 를 벗어나지 못하게 만들었다.

 

결국 렌더링 상에는 아무것도 표시되지 않았는데 이게 어떤 걸 의미하는 지 좀 더 파 봐야알 것 같다.