요소를 없애는 방법(visibility,display)

요소를 없애는 방법 두가지에는

display:none 과 visibility:hidden 이렇게 있다.

이 둘은 요소를 없애는 공통점을 가지고 있지만 명확하게 큰 차이를 가지고 있다.

    <div class="box1">
       <h3>s tempore cf voluptas.idunt deliendis?</h3>
   </div>
   <div class="box2">
       <h3>s tempore cf voluptas.idunt deliendis?</h3>
   </div>
   <div class="box3">
       <h3>s tempore cf voluptas.idunt deliendis?</h3>
   </div>

3개의 div를 만들었다.

이렇게 컬러풀하게 만들어놓고 각각 클래스를 부여하여 box1,box2,box3으로 명명했다.

 .box1{
    background-color: orange;
    /* visibility: hidden; */
}
.box2{
    background-color: yellowgreen;
    /* display: none; */
}
.box3{
    background-color: cadetblue;
}

css를 설정하고 box1에는 visbility를
box2에는 display를 입력하고 하나씩 주석화 한것을 풀어봤다. 우선
box1부터 풀어봤다.

보시다시피 빈공간은 유지되있는 상태서 오렌지색 박스는 사라졌다.
box1은 원상으로 복귀시키고
그다음은 box2를 주석을 풀어봤다.

중간에 있어야할 옐로우그린 박스는 없어지고 빈공간 또한 같이 사라져서 합쳐졌다.

결론을 말하자면,
visibility:hidden 은 레이아웃에서 남겨놓고 내용만 사라지는 반면에
display:none은 레이아웃에서 아예 배제를 시켜버린게 차이라고 본다.