🧡 overflow

사진을 지정한 width와 height에 넘치지 않게 잘라주는 역할

[속성]

overflow: visible -> 잘라내지 않고, 사진 크기대로 모두 보여줌
overflow:hidden
-> 지정된 높이, 너비만큼 잘려나감(스크롤 생기지 않음),
-> margin 겹침 현상을 해결해줌(부모 태그에 설정) <br
overflow: x축, y축 -> visible, hidden으로 각각 설정 가능(스크롤 생김)
overflow:scroll -> 별로 많이 쓰지 X

🧡 overflow: hidden vs display: none

✔ 공통점
1) 보이지 않는다

✔ 차이점

1) 영역의 인식

- display: none은 콘텐츠가 안보이면서 영역도 사라짐
- overflow: hidden: 콘텐츠가 안보이지만, 영역은 그대로 차지하고 있음!!

2) 스크린 리더기 인식

- display: none -> 읽기 불가

- overflow: hidden -> 읽기 가능

- visibility: hidden -> 국내 리더기만 읽기 가능

🧡 visibility: hidden

overflow: hidden처럼 영역은 그대로 차지하고 보이지만 않음

---

[다음]
팝업창, 클릭해야 보여지는 요소들은 리더기에 읽히지 않도록 display:none;으로 설정

[네이버 날씨창]
overflow: hidden으로 자연스러운 애니메이션을 주기 위해서 사용