overflow

• overflow 속성은 요소의 컨텐츠가 너무 클경우 요소를 어떻게 처리할지 지정합니다.
• overflow속성의 기본값은 visible로 콘텐츠를 자르지 않습니다.
• 기본속성 외에도 hidden, scroll, auto 등을 사용 할 수 있습니다.

overflow: hidden

overflow의 값을 hidden으로 설정하면 지정된 사이즈의 범위를 넘어가는 컨텐츠의 부분은 보이지 않도록 처리합니다.

-overflow: visible 일 경우 전체 사진이 잘 보이는 반면

-overflow: hidden 일 경우 지정된 사이즈를 넘어가는 이미지는 보이지 않도록 처리 된 것을 확인할 수 있습니다.

display

• display 속성은 요소를 어떻게 보여줄지를 결정합니다.
• 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.

  block : 블록 요소처럼 레이아웃
  inline : 인라인 요소처럼 레이아웃
  inline-block : block 과 inline의 중간 형태로 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.
  none : 보이지 않음

display: none

none : 요소를 렌더링 하지 않도록 설정합니다. hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다.

결론

overflow: hidden 은 지정된 값을 넘어가는 부분만 보이지 않도록 지정하는데 비해 display: none은 화면 상 어떤영역도 차지하지 않고 완전히 삭제된 것 처럼 보이게 하는 차이가 존재합니다.

사진출처 : https://www.vanmori.com/product/untitled-833>