CSS Academy · 강의

Visibility와 Display None

visibility: hidden과 display: none을 언제 사용해야 하는지, 각각 레이아웃에 어떤 영향을 주는지 학습합니다.

Visibility와 Display None은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

요소를 숨기는 세 가지 방법

CSS는 요소를 숨기는 세 가지 일반적인 방법을 제공하며, 각 방법은 레이아웃, 접근성, 상호 작용에 서로 다른 영향을 줍니다:

display: none
visibility: hidden
opacity: 0

표시: 없음

요소가 레이아웃에서 완전히 제거됩니다. 공간을 차지하지 않고 상호 작용할 수 없으며 대부분의 구현에서 스크린 리더가 읽지 않습니다. 요소는 여전히 DOM에 존재합니다.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

가시성: 숨김

요소가 보이지 않지만 여전히 공간을 차지합니다. 클릭할 수 없고 스크린 리더가 읽지 않습니다. 레이아웃을 이동시키지 않고 무언가를 숨길 때 적합합니다.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

불투명도: 0

요소가 보이지 않지만 완전히 상호 작용할 수 있습니다. 공간을 차지하고 이벤트(클릭, 마우스 오버)에 응답합니다. 스크린 리더가 여전히 읽을 수 있습니다.

<button class="transparent">Invisible but clickable</button>

가시성: 표시 재정의

자식 요소는 visibility: visible을 설정하여 부모 요소의 visibility: hidden을 재정의할 수 있습니다. display: none에서는 불가능합니다. 자식 요소가 이를 무조건 상속하기 때문입니다.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

비교 표

빠른 참조:

display: none: 공간 없음, 클릭 불가, 읽히지 않음
visibility: hidden: 공간 차지, 클릭 불가, 읽히지 않음
opacity: 0: 공간 차지, 클릭 가능, 읽힐 수 있음

가시성 전환

display는 전환할 수 없습니다. 요소를 페이드 인/아웃하려면 visibility와 opacity를 함께 사용합니다:

<div class="dropdown open">Dropdown menu content</div>

SR 전용 접근성 숨김

스크린 리더 전용 패턴은 콘텐츠를 시각적으로 숨기면서도 보조 기술에서는 접근할 수 있도록 유지합니다:

<button>Save <span class="sr-only">your document now</span></button>

hidden 특성과 CSS 비교

HTML의 hidden 특성은 브라우저의 사용자 에이전트 스타일시트를 통해 display: none을 적용합니다. 접근 가능하고 의미론적이지만 CSS 선택자 명시도에 의해 재정의될 수 있습니다.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

콘텐츠 가시성

content-visibility: hidden은 화면 밖 섹션의 렌더링을 건너뛰면서도 해당 섹션의 접근성 트리와 레이아웃은 유지합니다. 긴 페이지에 사용하는 현대적인 성능 최적화 기법입니다.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

포인터 이벤트: 없음

요소를 표시하되 상호 작용할 수 없게 하려면 pointer-events: none을 사용합니다. 클릭과 마우스 오버가 요소를 통과하여 그 아래의 요소에 전달됩니다.

<div class="overlay">Clicks pass through this overlay</div>

빠른 확인

요소가 차지하는 레이아웃 공간을 유지하면서 요소를 숨기는 기법은 무엇입니까?

복습

display: none은 요소를 레이아웃에서 완전히 제거합니다. visibility: hidden은 공간을 유지하면서 요소를 숨깁니다. opacity: 0은 요소를 숨기지만 상호 작용은 유지합니다. 접근 가능한 숨김에는 .sr-only 패턴을 사용합니다. 페이드 전환에는 가시성과 불투명도를 함께 사용합니다.

자주 묻는 질문

“Visibility와 Display None” 강의는 무료인가요?

네 — “Visibility와 Display None” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Visibility와 Display None”에서 뭘 배우나요?

visibility: hidden과 display: none을 언제 사용해야 하는지, 각각 레이아웃에 어떤 영향을 주는지 학습합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Visibility와 Display None” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기