처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
더보기
인사이트 FAQ 유튜브 카페

로그인

| 비밀번호찾기

추가 정보 입력

서비스 이용을 위해 휴대전화 번호를 입력해주세요.

회원가입

무료 회원가입 가입비 없이 무료로 가입할 수 있습니다

이미 계정이 있으신가요?

비밀번호 찾기

퀴즈 / CSS / 문제

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 place-items 속성은 어떤 속성의 축약형인가요?
CSS
CSS의 :is()와 :not() 선택자의 차이점으로 올바른 것은?
CSS
CSS의 개별 변환 속성(translate, rotate, scale)이 기존 transform 속성과 다른 점으로 올바른 것은?
CSS
CSS transition 속성의 축약 문법 'transition: opacity 0.3s ease'에서 각 값이 의미하는 것은?
CSS
CSS user-select 속성의 역할로 올바른 것은?
CSS