[css] overflow, visibility

1. 넘침관리 (overflow)

: 요소의 콘텐츠가 너무 커서 요소의 크기에 맞출 수 없을 때의 처리하는 방법

 

* 문법

- overflow: visible; -> 기본값
- ★ overflow: hidden; ★ -> 사이즈, 크기만큼 인식
                                                          마스크 원리랑 비슷
- overflow: scroll; -> 무조건 스크롤
- overflow: auto; -> 넘치면 자동 스크롤 생성

- overflow-x -> x(가로)축만 관리
- overflow-y -> y(세로)축만 관리

 

예시)

 <style>
         .box {
            width: 250px;
            height: 150px;
            border: 1px solid #000;
            margin: 50px;

         }
         .box1 {
            /* overflow: visible; 똑같아서 잘 안씀 */
            overflow: hidden;
         }
         .box2 {
            /* overflow: scroll; */
            overflow: auto;
         }
 </style>

 

결과 이미지

 

 

 

2. visibility (숨김처리)

: 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨김처리

 

* 문법

 - visibility: visible; -> 기본
-  visibility: hidden; -> 숨김

- 숨김 : 화면에서 존재하지 않음
-> display:none;

 

 

● visibility: hidden; / display:none; 차이

-  visibility: hidden; ->  사라짐 (존재는 있음)

- display:none; -> 사라짐 (존재까지 사라짐)

 

예시)

<style>
 .box3 {
            overflow-x: hidden;
            overflow-y: hidden;
            visibility: hidden;
            /* 사라짐 (존재는 있음) */
         }
         .box4 {
            overflow: hidden;
            /* 사라짐 (존재까지 같이 사라짐) */
            display: none;
         }
</style>

 

결과 이미지