[JavaScript] [css] style display : none vs visibility : hidden

 

자 여기에 햄버거와 감자와 치킨이 있습니다.

 

 

나란히 붙어 있죠. display 속성에서 이것을 inline 이라고 합니다. 같은 라인에서 보여 진다 정도로 직역하시면 적당할것 같습니다. display 속성의 기본값이 inline 이기 때문에 스타일이 별도로 지정되지 않았다면 이렇게 보입니다. 그런데 지금 이야기 하고자 하는것은 display 의 속성값들의 성질이라기 보다는 display 와 visibility 의 차이 이기 때문에 다음 그림을 보겠습니다.

 

  display : none

  visibility : hidden

 

차이점이 보이시죠?

dispaly : none 과는 다르게 visibility : hidden 은 보이지만 않을 뿐 자리는 여전히 차지 하고 있습니다. 더이상 설명할 것이 없을만큼 명확합니다.

 

visibility 는 hidden 과 visible 둘 뿐입니다. (물론 collapse, inherit 등이 있습니다만 효과면에서) 보이거나. 보이지 않거나.

 

display 는 이것과는 조금 다르게 쓰이는 경우가 더 많습니다. inline 속성을 가진 Element 를 block 속성으로 지정 한다던가 block 속성의 Element 에게 inline-block 속성을 갖게 하는등의 정도가 일반적이지요. 그렇지만 역시 감추는 용도가 가장 무난합니다.

[출처] [css] style display : none vs visibility : hidden|작성자 도마도