HyunJun 기술 블로그

CSS overflow 본문

CSS

CSS overflow

공부 좋아 2023. 6. 6. 22:50
728x90
반응형

1. overflow

overflow 속성은 어떠한 요소 내의 컨텐츠가 너무 커서 요소 내에 모두 보여주기 힘들 때 어떻게 보여줄 것인지를 지정한다.

 

  • 기본적으로는 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면 컨텐츠가 커지면 컨텐츠를 포함하고 있는 요소의 크기도 커지게 된다.
    • 컨텐츠의 크기가 고정되어 있을 때 overflow에 지정된 값에 따라 보이게 된다.

 

예를 들어 아래와 같이 div 안에 긴 문장이 있다면 div는 컨텐츠의 크기에 따라 커진다.

   <div>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, aliquid sit quibusdam tenetur voluptatibus assumenda vel culpa praesentium
      maxime voluptatem, veritatis amet minima quam illo delectus aperiam. Illum, dolorum aspernatur! Lorem ipsum dolor, sit amet consectetur
      adipisicing elit. Ut laborum, necessitatibus at aliquam tempore nostrum sint et eius atque deserunt ea quis labore vel dolorum molestiae, non
      animi praesentium explicabo! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic sapiente, dicta aliquid quis animi cumque!
      Cupiditate, alias in quae, dolores, ut reprehenderit quam quia quo iste animi quibusdam accusantium placeat. Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Cum velit explicabo nihil rem beatae doloribus? Distinctio voluptas recusandae exercitationem soluta laboriosam
      animi, accusantium delectus ullam id earum, molestias cupiditate ab! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi placeat quae
      qui dignissimos iste, minus dolorum aperiam porro corrupti impedit fuga similique tempora mollitia omnis sunt accusantium. Blanditiis, et autem!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dicta sapiente consequuntur impedit inventore deserunt odit nisi rerum, dolor
      molestiae in cum at dolorem, maxime libero! Molestiae fugiat distinctio corrupti.
    </div>

 

첫 번째로 긴 문장을 담고 있는 div의 width를 강제 조정하면

   <style>
      div {
        width: 20px;
      }
    </style>

div의 width가 줄어들고 이에 따라 컨텐츠들이 세로로 정렬되고 height가 늘어나는 것은 확인할 수 있지만, 컨텐츠들이 하나의 단어 이하로는 줄어들지 않는 것을 볼 수 있다.

 

 

만약, 이러한 상황에서 height까지 강제로 줄이게 되면,

    <style>
      div {
        width: 20px;
        height: 20px;
      }
    </style>

분명 div 자체의 가로, 세로는 다 줄였지만, 컨텐츠들이 div를 뚫고 나오는 것을 확인할 수 있다.

위와 같은 현상들은 overflow의 기본값이 visible로 되어 있기 때문이다.

 

1) overflow 속성

  • visible(기본값): 컨텐츠가 부모 요소에 비해 넘칠 경우 컨텐츠가 상자 밖으로 보인다.
  • hidden: 넘치는 부분은 잘려서 보이지 않는다.
  • scroll: 넘치는 부분에 따라 스크롤바가 추가된다. (가로, 세로 모두 추가됨)
  • auto: 컨텐츠의 내용이 넘칠 경우 자동으로 스크롤바가 추가된다.

 

위에서 봤던 텍스트를 hidden과 scroll로 번갈아서 설정했을 때

<style>
  div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    overflow: scroll;
  }
</style>

(왼쪽) hidden, (오른쪽) scroll

이때, 기본적으로 스크롤바가 px을 잡아먹기 때문에 스크롤바를 생각해서 div의 width, height를 조절해야 한다.

이때, scroll과 auto의 차이는 scroll은 일단 스크롤바 영역 UI를 생성하고, 컨텐츠가 넘치면 스크롤바 휠 UI가 생성되고,

auto는 스크롤바 영역 UI, 스크롤바 휠 UI가 컨텐츠가 넘쳐야만 생긴다.

 

 

(왼쪽) scroll, (오른쪽) auto

2) 가로 세로 overflow 설정

x(가로)와 y(세로)에 대한 overflow 설정을 따로 해줄 수 있다.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        overflow-x: scroll;
        overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <div>
      Loremmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm ipsum dolor sit, amet consectetur adipisicing elit. Est, culpa suscipit aliquid molestias ipsa distinctio
      maxime voluptate earum, ducimus esse repudiandae voluptas! Ad sequi minus eaque, consequatur molestias eveniet. Minus.
    </div>
  </body>
</html>

width를 강제로 줄이면 content 내용이, '단어'들을 기준으로 줄바꿈 되므로 가로 스크롤을 확인하기 위해 Loremmmmmm....이라는 긴 단어를 사용했다. 가로로 스크롤이 생기고, 세로로는 스크롤이 안 생기고 잘려있는 걸 확인할 수 있다.

728x90
반응형
'CSS' Related Articles more
Comments