Display
웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로,
해당 HTML 요소가 웹브라우저에 언제 어떻게 보이는지 결정.
대부분의 요소들은 속성의 기본값으로 block, inline, none 을 사용.
Visibility
visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정.
따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재.
visibility 속성을 자바스크립트와 함께 사용해서 레이아웃을 만들 수 있음.
속성값으로는 visible, hidden, collapse를 사용.
collapse의 경우 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줌.
display: 'none' vs 'visibility: hidden'
display와 visibility를 한 번 정리해야겠다고 생각했던 이유가 바로 여기있다.
none과 hidden의 차이를 한번은 짚고 넘어가봐야 할 것 같아서!
HTML 요소를 숨기기 위해서는 display 속성값을 none으로 설정하면 된다.
이렇게 하면 해당 요소는 웹 페이지에 더 이상 나타나지 않고 웹 페이지의 레이아웃에도 영향을 미치지 않는다.
반면, visibility 속성값을 hidden으로 설정할 경우 눈에만 보이지 않을 뿐 레이아웃에는 존재하게 된다.
그래서 민감하거나 귀중한 데이터를 감출 때에는 visibility 속성 보다는 display로 none시키는 것이 더 낫다고 한다.
'Frontend' 카테고리의 다른 글
| JS Null Check. (0) | 2021.11.27 |
|---|---|
| Lodash란? (0) | 2021.10.31 |
| jQuery Event. (0) | 2021.10.02 |
| jQuery attr(), prop(), val(), text() (0) | 2021.09.18 |
| AJAX. (0) | 2021.09.04 |