[9일차] Overflow:hidden 과 display:none 차이

Overflow

자식요소가 부모요소를 넘어갈때 처리하는 방법을 선택할수있다.

 

 

 Overflow: hidden

• 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리한다.
• 그래도 스크린 리더기에서 읽어줌
  
  

얄짤없다

        .over{
            overflow: hidden;
            border: 5px solid orange;
            width: 200px;
            height: 200px;
        }
        
            <div class="over">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Praesentium ipsum ipsa ratione numquam iste? Provident maiores reiciendis sequi,
        dolorem impedit voluptatem laudantium officia ad corrupti possimus at beatae accusamus omnis.
    </div>

 

 

---

 

 

 

display:none 

• 화면상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 함
• 스크린리더가 읽지못함.
• 공간자체가 사라짐

 

 

원본

 

display:none 적용

    <style>
            #a {
                background-color: yellow;
                height: 100px;
                width: 100px;
            }
            #b {
                background-color: pink;
                height: 100px;
                width: 100px;
                display: none;
            }
            #c {
                background-color: aquamarine;
                height: 100px;
                width: 100px;
            }
    </style>
    
    
    <div id="a">멍멍</div>
	<div id="b">냐옹</div>
	<div id="c">어흥</div>