CSS - overflow (visible, hidden, scroll, auto) 속성

Yuri Lee·2021년 2월 8일
0

overflow 이란?

요소의 박스에 내용이 더 길 때, 어떻게 보일지 선택하는 속성이다. 위 속성은 상속되지 않는다.

overflow 기본 속성

  • visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
  • hidden : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 한다.
  • scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시 한다. (스크롤바 항상 표시)
  • auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다. (내용이 넘칠때만 스크롤바 표시)

예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 400px;
            height: 110px;
            margin: 0 0 50px 0;
        }

        div#a {
            overflow: visible;
            background: #EBDEF0;

        }

        div#b {
            overflow: hidden;
            background: #F2D7D5;
        }

        div#c {
            overflow: scroll;
            background: #E5E8E8;
        }

        div#d {
            overflow: auto;
            background: #D3EBDF;
        }
    </style>
</head>

<body>
    <div id="a">
        <h2>1. overflow : visible</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="b">
        <h2>2. overflow : hidden</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="c">
        <h2>3. overflow : scroll</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="d">
        <h2>4. overflow : auto</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>
</body>

</html>

html 을 실행한 결과 다음과 같은 결과를 볼 수 있다.

눈여겨 볼 점 🙄

overflow 의 scroll 과 auto 속성의 차이를 잘 확인해 보자. scroll 과 auto 속성은 부모요수의 범위를 넘어가는 자식요소의 부분은 보이지 않지만 사용자가 확인 할 수 있도록 스크롤바를 표시하는 것은 동일하다. 하지만 스크롤바가 항상 표시되냐 아니냐의 차이가 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 400px;
            height: 110px;
            margin: 0 0 50px 0;
        }

        div#a {
            overflow: visible;
            background: #EBDEF0;

        }

        div#b {
            overflow: hidden;
            background: #F2D7D5;
        }

        div#c {
            overflow: scroll;
            background: #E5E8E8;
        }

        div#d {
            overflow: auto;
            background: #D3EBDF;
        }
    </style>
</head>

<body>
    <div id="a">
        <h2>1. overflow : visible</h2>
    </div>

    <div id="b">
        <h2>2. overflow : hidden</h2>

    </div>

    <div id="c">
        <h2>3. overflow : scroll</h2>
    </div>

    <div id="d">
        <h2>4. overflow : auto</h2>
    </div>
</body>

</html>

overflow의 scroll 속성에만 스크롤바가 생긴 것을 확인할 수 있다.


https://electronic-moongchi.tistory.com/58

profile
Step by step goes a long way ✨

0개의 댓글