✔︎ [CSS] display와 visibility
: none과 hidden의 차이
화면에서 태그를 보이지 않게 하기 위한 속성으로는
display:none과 visibility:hidden이 있습니다.
두 스타일 모두 어떤 태그를 표시하지 않고 가릴 때 사용됩니다.
그러나 두 스타일에는 차이가 있습니다. 어떤 차이가 있을까요?
▶ display:none
display:none 속성은 태그 자체를 html 상에서 제거시키는 힘이 있습니다.
때문에 inspect(요소 검사)를 해도 해당 태그를 검색할 수 없습니다.
▶ visibility:hidden
visibility:hidden 속성은 태그 자체를 html 상에서 제거시키는 게 아니라
그저 사용자가 해당 태그를 볼 수 없도록 만들어줍니다. 도자기로 덮어놓은 것처럼 말이죠.
때문에 inspect(요소 검사)를 해도 해당 태그를 확인할 수 있습니다.
'front-end > css' 카테고리의 다른 글
| [CSS3] float:left 속성의 이해와 overflow:hidden 응용 (0) | 2017.10.22 |
|---|---|
| [CSS3] display 속성 : inline과 inline-block의 차이 (0) | 2017.10.21 |
| [CSS3] input 태그에 placeholder 스타일 효과 주기 (0) | 2017.10.20 |
필로그래머