CSS에서 visibility: hidden과 display: none의 차이점으로 올바른 것은?

쉬움 MDN Web Docs

보기 및 정답

A display: none을 적용하면 해당 요소의 모든 자식에 대한 CSS 스타일 계산이 중단되어 성능이 항상 크게 향상되는 것이다

B visibility: hidden은 요소가 보이지 않지만 공간을 차지하고, display: none은 공간도 차지하지 않는다

C display: none은 요소가 반투명하게 보이고, visibility: hidden은 완전히 숨긴다

D 두 속성 모두 요소를 시각적으로 숨기지만 display: none은 스크린 리더에서도 완전히 무시되어 접근성 문제가 없다

해설

visibility: hidden은 요소를 시각적으로 숨기지만 레이아웃에서 원래 공간을 유지합니다. display: none은 요소를 렌더링 트리에서 완전히 제거하여 공간도 차지하지 않습니다. 또한 visibility: hidden인 부모의 자식에게 visibility: visible을 설정하면 자식만 보이게 할 수 있습니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

CSS에서 visibility: hidden과 display: none의 차이점으로 올바른 것은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.