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

로그인

| 비밀번호찾기

추가 정보 입력

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

회원가입

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

이미 계정이 있으신가요?

비밀번호 찾기

퀴즈 / CSS / 문제

CSS에서 display: none과 visibility: hidden의 차이점은?

쉬움 MDN Web Docs
보기 및 정답
A display: none은 요소를 DOM에서 완전히 제거하여 JavaScript로도 접근할 수 없게 만드는 속성이다
B display: none은 공간까지 없애고, visibility: hidden은 공간은 유지한 채 보이지만 않게 한다
C 두 속성 모두 요소를 시각적으로 숨기지만 display: none은 스크린 리더에서도 완전히 무시되어 접근성 문제가 없다
D visibility: hidden은 요소가 차지하는 공간을 유지하면서 숨기지만 해당 요소의 클릭 이벤트까지 함께 차단된다

해설

display: none은 요소를 렌더링하지 않아 공간도 차지하지 않습니다. visibility: hidden은 요소를 보이지 않게 하지만 원래 차지하던 공간은 그대로 유지됩니다. 레이아웃 유지가 필요하면 visibility, 완전히 숨기려면 display: none을 사용합니다.

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

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

정규반 살펴보기

관련 문제

CSS hyphens 속성에서 auto 값의 효과로 올바른 것은?
CSS
CSS에서 z-index 속성이 동작하기 위한 전제 조건은?
CSS
CSS transition 속성의 축약 문법 'transition: opacity 0.3s ease'에서 각 값이 의미하는 것은?
CSS
CSS Grid에서 repeat(auto-fill, minmax(200px, 1fr))의 동작으로 올바른 것은?
CSS
CSS에서 position: sticky 요소가 고정되지 않는 흔한 원인으로 올바른 것은?
CSS