[CSS] 요소 숨기기 : display none, visibility hidden

결론 

기본 // display: none; // visibility: hidden;

display: none;

- 사용시 해당 요소가 아예 없었던 것처럼 처리됨

- 레이아웃에 변화

See the Pen js2 by lee (@moonthree) on CodePen.

---

visibility: hidden;

- 사용시 그 요소가 차지하던 공간은 그대로 유지되고, 화면에 보이지만 않게 됨

See the Pen js by lee (@moonthree) on CodePen.

---

설명

HTML 요소를 숨기거나, 보여주기 위해서는 display 또는 visibility 프로퍼티를 사용

요소를 숨기는 두 프로퍼티에는 큰 차이가 있음

 

- display : none -> 아예 없었던 것 처럼 공간을 차지하지 않게 됨

- visibility : hidden -> 공간은 유지되고, 화면에만 안 보임

 

두 프로퍼티의 기본값(보임)은 아래와 같음

display : block;

visibility : visible;

 

이제 HTML요소 숨기기와 보이기를 알았으니

자바스크립트를 이용하여 이벤트에 따라 HTML요소를 보이고 안보이게 사용하면 됨

밑에 링크에 있음

https://moon-coding.tistory.com/39