티스토리

디비의 DB

검색하기

Til :: overflow:hidden 🆚 display:none

TIL

Til :: overflow:hidden 🆚 display:none

Deeb 2022. 4. 7. 23:59

overflow:hidden 🆚 display:none

두 태그 다 사용해본적이 있는데 요소들을 보이지 않기 위해 사용했지만 그 차이에 대해 깊게 알아본적이 없어 이번에 알아보고자 한다.

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

<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></title>
    <style>
        p{
            margin: 0;
        }
        section {
            width: 150px;
            height: 150px;
            background-color: #EEA47F;
            margin: 50px;
        }
        p {
            font-size: 18px;
            color: #00539C;
        }
    </style>
</head>

<body>
    <section class="sec1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem eligendi ipsam unde minus quae quod maiores quas
            in enim quos animi totam provident quisquam doloremque, sunt sed, vitae amet consequatur!</p>
    </section>
    
    
</body>

</html>

이렇게 영역과 콘텐츠가 있을때 영역 바깥으로 글자가 나온것을 확인할 수 있다.

overflow

정해진 블록보다 그 안의 콘텐츠가 더 클 때 지정하는 처리법이다.

적용 가능한 방법은 visible, hidden, scroll, auto가 있다.

overflow 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이(height 또는 max-height)를 설정하거나, white-space를 nowrap으로 설정해야한다.

영역 바깥으로 글자가 더 있지만 스크롤바를 만들어 주지않고 영역만큼만 보여준다.

display

display 속성은 박스의 성질을 지정하여 다른 박스들과 어떤 방식으로 위치가 배치 될지 결정한다.

크게 외부의 다른 형제, 부모 박스들과의 배치에 영향을 미치는 외부 디스플레이 타입과, 내부 자식 박스들의 배치에 영향을 미치는 내부 디스플레이 타입으로 크게 나눌 수 있다.

이렇게 동일한 요소 두 개가 있을 때 왼쪽에만 display: none;을 주었을 때의 변화는 아래와 같다.

display:none;을 준 영역이 아예 사라지고 오른쪽에 있던 영역이 왼쪽으로 밀린것을 확인할 수 있다.

overflow: hidden;과 display: none;의 차이점

overflow: hidden;은 레이아웃에 영향을 주지 않고 영역내의 콘텐츠만 보여준다.

display: none; 해당 속성을 적용한 블록을 숨겨 전혀없는 것처럼 보여진다.