[HTML, CSS] 내용이 요소(div 등)를 벗어날 때 스크롤 적용하는 방법

프론트엔드 HTML CSS JAVASCRIPT

[HTML, CSS] 내용이 요소(div 등)를 벗어날 때 스크롤 적용하는 방법 - overflow

jaewooojung 2019. 8. 18. 21:11

CSS overflow

HTML에서 요소 안의 내용이 요소를 벗어났을 때 스크롤을 생성하는 방법입니다.

다음과 같이 width와 height가 고정되지 않은 div 안에 텍스트가 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        border: 3px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis nam, nostrum sed vitae corporis quis quia
      deleniti quod doloremque consequuntur eius magni consectetur earum doloribus. Sapiente voluptas rem dignissimos
      repellat?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis quidem laborum laboriosam rerum
      vitae dignissimos dolores dolorum pariatur. Repudiandae unde nam, quae alias deleniti numquam exercitationem omnis
      atque in praesentium!Lorem. Minim aliqua ullamco mollit sunt qui est do. Esse elit commodo Lorem laborum anim et
      ea exercitation et. Amet Lorem veniam eiusmod non aliquip est consectetur est consequat fugiat. Irure ut nostrud
      elit enim id.
    </div>
  </body>
</html>

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis nam, nostrum sed vitae corporis quis quia deleniti quod doloremque consequuntur eius magni consectetur earum doloribus. Sapiente voluptas rem dignissimos repellat?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis quidem laborum laboriosam rerum vitae dignissimos dolores dolorum pariatur. Repudiandae unde nam, quae alias deleniti numquam exercitationem omnis atque in praesentium!Lorem. Minim aliqua ullamco mollit sunt qui est do. Esse elit commodo Lorem laborum anim et ea exercitation et. Amet Lorem veniam eiusmod non aliquip est consectetur est consequat fugiat. Irure ut nostrud elit enim id.

width와 height가 고정되지 않았기 때문에(width 혹은 height 속성을 설정하지 않았기 때문에) 이 코드에서는 텍스트의 길이가 아무리 길어도 이 요소에는 스크롤바가 생기지 않고 무한히 늘어납니다. 즉, 길이가 설정되어 있지 않은 요소에는 overflow 속성을 사용해도 스크롤바가 생성되지 않습니다.

height를 고정시켜 보겠습니다.

.container {
  border: 3px solid black;
  height: 100px;
}

height가 고정되면서 텍스트가 요소를 벗어났습니다.

이제 css의 overflow 속성을 사용해서 벗어난 부분을 처리해 보도록 하겠습니다.

이 글에서는 height와 수직 방향의 스크롤만 다루겠습니다. width와 수평방향의 스크롤도 이와 동일하게 적용됩니다.
수직 방향 스크롤은 overflow-y, 수평 방향 스크롤은 overflow-x 속성으로 적용하고, overflow 속성은 두 개에 동시에 적용합니다. 이 글에서는 편의상 overflow 속성만 사용하겠습니다.

구문

overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;

visible(기본값)	요소의 콘텐츠가 경계를 넘어가도 숨기지 않고 보여줍니다.
hidden	경계를 넘어가는 콘텐츠를 숨깁니다.
scroll	항상 스크롤바를 보여줍니다. (콘텐츠가 넘치지 않아도 항상 스크롤바 표시).
auto	콘텐츠가 경계를 넘어갈 때에만 스크롤바를 보여줍니다.

1. visible

visible은 기본값이므로 위의 실행화면의 상태가 visible의 상태입니다.

2. hidden

.container {
  border: 3px solid black;
  height: 100px;
  overflow: hidden;
}

hidden 값을 사용하니 요소의 테두리를 벗어난 텍스트는 모두 사라졌습니다.

3. scroll

.container {
  border: 3px solid black;
  height: 100px;
  overflow: hidden;
}

scroll 값으로 설정하니 스크롤이 생겼습니다. 여기서 텍스트를 모두 없애도

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        border: 3px solid black;
        height: 100px;
        overflow: scroll;
      }
    </style>
  </head>
  <body>
    <div class="container">

    </div>
  </body>
</html>

스크롤은 그대로 남아있습니다.

4. auto

.container {
  border: 3px solid black;
  height: 100px;
  overflow: auto;
}

overflow를 auto로 설정하면 텍스트가 요소의 테두리를 넘어가지 않았을 때에는 스크롤이 생성되지 않고

텍스가 요소의 테두리를 넘어가는 경우에는 자동으로 스크롤이 생성됩니다.

MDN document - overflow

overflow - CSS: Cascading Style Sheets | MDN

overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락 (en-US)에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x (en-US), overflow-y (en-US)의 값을 설정합니다.

developer.mozilla.org

저작자표시