프로그래밍 공부 일기

2020년 10월 19일
overflow의 사용법을 이해하지 않았기 때문에 정리한다.

overflow란?

요소의 영역에 맞지 않을 때 표시 방법을 결정하는 속성. 이 요소를 블록 정형 컨텍스트라고 하며, div 요소가 거기에 해당한다.
overflow는 가로 방향을 지정한다 overflow-x 와 세로 방향을 지정한다 overflow-y , 양쪽을 지정한다 overfloe 가 있다. 설정치는 표와 같다.


설정값
설명


visible
표시(규정값)

hidden
표시하지 않음 (스크롤 막대는 표시되지 않지만 스크롤 가능)

클립
표시하지 않음 (스크롤 바도 표시되지 않고 스크롤 불가)

스크롤
내용이 맞지 않는 경우에는 스크롤 바를 표시

auto
브라우저 의존

샘플 프로그램

HTML 파일

<div class="wrapper">
  <div class="contents">
    あいうえお<br>
    かきくけこ<br>
    さしすせそ<br>
    たちつてと<br>
    なにぬねの<br>
    はひふへほ<br>
    まみむめも<br>
    や　ゆ　よ<br>
    らりるれろ<br>
    わ　を　ん
  </div>
</div>

CSS 파일

.wrapper {
  height: 200px;
  width: 300px;
  overflow-y: scroll;
}
.contents {
  background-color: rgb(181, 244, 247);
}

참고문헌

스크롤바 표시/숨기기 조정
HTML로 스크롤 바를 표시·비표시하는 방법을 현역 엔지니어가 해설【초보자용】