display: none;DOM에 등록된 객체로,
사용자의 눈에 보이지 않으며,
마우스나 키보드와 같은 입력 도구로 실행이 불가능하지만,
자바스크립트와 같은 코딩 언어로 실행시킬 수 있습니다.
웹 페이지의 공간을 점유하지 않습니다.
DOM 메모리에 로딩되어 존재하는 객체이나 페이지를 구성하지 않고 보이지도 않습니다.
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.
[출처] mdn web docs, "display"
display가 none으로 설정된 element가 마치 존재하지 않는 것처럼, document가 렌더링 된다는 뜻입니다. 그래서 이 element는 레이아웃에 영향을 미치지 않습니다.
visibility: hidden;DOM에 등록된 객체로,
사용자의 눈에 보이지 않으며,
마우스나 키보드와 같은 입력 도구로 실행이 불가능하지만,
자바스크립트와 같은 코딩 언어로 실행시킬 수 있습니다.
웹 페이지의 공간을 점유하고 있습니다.
DOM 메모리에 로딩되어 존재하는 객체이며 페이지를 구성하고 보이지 않습니다. "display: none;"과 달리 공간을 점유하는 페이지 구성 요소입니다.
opacity: 0;불투명도 0%를 부여한 페이지 구성 요소입니다. 단지 보이지 않을 뿐이며 공간을 점유하며 마우스나 키보드와 같은 입력 도구로 실행시킬 수 있습니다.
height: 0;
opacity: 0;
overflow: hidden;opacity, overflow, height를 함께 사용하면 공간을 점유하지 않고 "display: none"과 비슷한 효과를 줄 수 있습니다.
댓글