css 레이아웃 overflow 속성

css 레이아웃 overflow 속성

 

overflow 란,

부모박스에서 내용물이 넘치는 경우 어떻게 보여질지 결정하는 속성입니다. 

 

overflow를 사용하는 경우는,

1. 배치된 요소(float) 만큼 크기를 주고 싶거나

2. 넘치는 콘텐츠 값을 제어하고 싶을 때 사용합니다. 

 

아래의 콘텐츠 양에 따른 표현 비교예시를 통해서 overflow에 대해 자세히 알아보도록 하겠습니다. 

---

1. 콘텐츠양이 일정

먼저, 부모박스에서 내용물이 넘치지 않고 콘텐츠의 양이 일정한 경우에는 다음과 같이 보여지게 됩니다. 

 

html

<div class="ex1">
 <h4>콘텐츠양이 일정</h4>
 <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque aut quae, 
    quo illum sapiente vitae sit vel nihil accusantium aliquam quasi in id, 
    voluptates ab tempora, soluta amet ut beatae.
 </p>
</div>

 

css

 <style>
 * {
            margin: 0;
            padding: 0;
        }

div {
            width: 200px;
            height: 280px;
            border: 1px solid black;
            float: left;
            margin: 10px;
        }
 </style>

 

<h4>와 <p> 태그는 block 요소입니다. block 요소는 width 값 전체를 채우며 쌓이는 성질을 가지고 있어서 block 요소만 있을 땐 높이를 따로 설정하지 않아도 크기가 채워집니다. 

---

2. 콘텐츠의 양이 많거나 유동적일 때 

예시 1번과 같은 <div> 부모 박스에 콘텐츠가 넘치도록 담기게 된다면, <div> 부모 박스 밖으로 내용물이 흘러 넘치면서 표현됩니다. 

 

html

<div class="ex2">
     <h4>콘텐츠의 양이 많거나 유동적일 때 > 흘러 넘치면서 표현됨</h4>
     <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsa alias ea autem eius architecto
            reprehenderit laborum tempora iusto nemo porro voluptatum, possimus est aliquid iste, nisi provident non
            laudantium?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis itaque modi, possimus molestias
            eius omnis esse quia amet vel autem sequi est magnam alias dolores dolorem officia, nulla facere.
      </p>
 </div>

 

css

 <style>
 * {
            margin: 0;
            padding: 0;
        }

div {
            width: 200px;
            height: 280px;
            border: 1px solid black;
            float: left;
            margin: 10px;
        }
 </style>

 

콘텐츠의 내용물이 흘러 넘치게 된다

 

 

---

3. 콘텐츠의 양에 따라서 높이가 늘어남

콘텐츠의 양에 따라 부모 박스의 높이 값을 다시 계산해주는 것이 아닌, 자동으로 콘텐츠 양에 따라 높이가 늘어나게 할 때 overflow:hidden; 속성을 사용하게 됩니다. <div>에 배치된 요소(float)의 높이 값을 대처해주는 것이죠. 

 

html

<div class="ex3">
     <h4>콘텐츠의 양에 따라서 높이가 늘어남</h4>
     <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsa alias ea autem eius architecto
            reprehenderit laborum tempora iusto nemo porro voluptatum, possimus est aliquid iste, nisi provident non
            laudantium?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis itaque modi, possimus molestias
            eius omnis esse quia amet vel autem sequi est magnam alias dolores dolorem officia, nulla facere.
     </p>
</div>

 

css

 * {
            margin: 0;
            padding: 0;
        }

 div {
            width: 200px;
            height: 280px;
            border: 1px solid black;
            float: left;
            margin: 10px;
        }

 .ex3 {
            height: auto;
            overflow: hidden;
            /*안쪽에 배치된 요소(float)의 높이값 대처*/
        }

 

height: auto; 는 내용물의 높이 만큼 채우라는 뜻입니다. 

 

 

만약, overflow를 쓰지 않고 float 에서 높이 값을 주게된다면 배치된 요소의 크기가 높이 값에 따라 잡히지만, 배치 요소가 추가 될 때 마다 모든 요소의 높이값을 바꿔줘야 합니다. 따라서 overflow는 레이아웃 잡을 때 편리성을 고려해 사용하는 속성이죠.

 

예를들어, 높이가 500px 인데, 배치가 500px을 넘어가게 되면 크기가 깨지기 때문에 이때 overflow를 사용하게 됩니다. 

---

4. 높이에 따라 콘텐츠가 안보이게 처리

height가 존재할 시 overflow를 사용하면, 높이값 만큼만 콘텐츠가 보여지게 설정할 수 있습니다. 즉, height를 넘어가는 콘텐츠 내용은 안보이게 가려지게 됩니다. 

 

html

<div class="ex4">
    <h4>높이에 따라 콘텐츠가 안보이게 처리</h4>
    <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsa alias ea autem eius architecto
            reprehenderit laborum tempora iusto nemo porro voluptatum, possimus est aliquid iste, nisi provident non
            laudantium?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis itaque modi, possimus molestias
            eius omnis esse quia amet vel autem sequi est magnam alias dolores dolorem officia, nulla facere.
    </p>
</div>

 

css

 * {
            margin: 0;
            padding: 0;
        }

div {
            width: 200px;
            height: 280px;
            border: 1px solid black;
            float: left;
            margin: 10px;
        }

.ex4 {
            overflow: hidden;
            /*height가 존재(div에 height 값이 있다)시 overflow 사용하면 
            높이값 만큼만 콘텐츠가 보여지게 설정할 수 있다. 넘치는 부분은 가려지게*/
        }

 

클래스 ex4의 높이 값은 <div>의 height인  280px이 됩니다. 따라서 내용물이 높이 280px을 넘어가면, 넘어가게 된 부분은 가려집니다. 

---

5. 넘치는 부분을 scroll 처리

배치 요소 안에 콘텐츠가 넘치는 경우 스크롤로 처리 가능합니다. 이때 높이 값을 주지 않게 되면 스크롤은 생성되지만 스크롤 처리는 되지 않습니다. 따라서 overflow: scroll;을 사용할 땐 높이 값이랑 같이 사용해야 합니다. 

 

html

<div class="ex5">
    <h4>넘치는 부분을 scroll 처리</h4>
    <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsa alias ea autem eius architecto
            reprehenderit laborum tempora iusto nemo porro voluptatum, possimus est aliquid iste, nisi provident non
            laudantium?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis itaque modi, possimus molestias
            eius omnis esse quia amet vel autem sequi est magnam alias dolores dolorem officia, nulla facere.
    </p>
</div>

 

css

* {
            margin: 0;
            padding: 0;
        }

div {
            width: 200px;
            height: 280px;
            border: 1px solid black;
            float: left;
            margin: 10px;
        }
        
.ex5{
            overflow: scroll;    
        }

 

 

overflow : scroll; 에서 y축과 x 축의 스크롤 바는 개별적으로 설정할 수 있습니다. 

overflow-y: scroll; -> y 축의 넘치는 내용물을 설정

overflow-x:hidden; -> x축은 안보이고 싶은 경우