STUDY 📒/CSS & SCSS & SASS

diaplay:none 과 visibilty:hidden 차이점

South Dev 2024. 1. 8. 00:58

요소 아이템을 안보이게 하는 두가지 방법

  1. display: none - block
    해당 공간까지 삭제 - 요소를 완전히 제거하여 레이아웃 공간을 차지하지 않게됨
  2. visibility: hidden - visible
    보이지만 않고 공간은 그대로 - width와 height 값이 있다면 그만큼 공간은 존재
  3. display = '' 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline,
    div 태그 안에 있으면 block 이 쓰여짐

visibility hidden은 어떠한 클릭이벤트 발생시 레이아웃에 영향을 미치고 싶지 않을경우에 쓰기도 했다.

반응형