opacity vs visibility vs display

핵심 개념

opacity:0은 투명하지만 공간을 차지하고 이벤트를 받습니다. visibility:hidden은 보이지 않지만 공간을 차지하고 이벤트는 무시합니다. display:none은 공간도 없애고 이벤트도 없습니다. 세 가지 숨김 방식은 레이아웃과 인터랙션에 다르게 영향을 줍니다. 각 속성을 지우며 차이를 직접 확인하십시오.

코드 분석

CSS3📋 코드 (4줄)

opacity:1 — 완전히 보임
  opacity:0.25 — 흐릿하게, 공간 차지
  visibility:hidden — 안 보임, 공간 차지
  ↑ 위 요소의 공간이 남아있음

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'opacity vs visibility vs display' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'opacity vs visibility vs display'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'opacity vs visibility vs display' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'opacity vs visibility vs display'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

opacity vs visibility vs display는 이 3가지만 확실히 잡으세요

1.요소를 숨기려고 아무거나 쓰면 공간 차지 여부와 이벤트 반응이 달라져서 의도치 않은 버그가 생깁니다

2.display:none은 공간까지 제거, visibility:hidden은 공간 유지+이벤트 차단, opacity:0은 공간 유지+이벤트 통과입니다

3.다음 챕터에서 요소에 깊이감을 주는 box-shadow를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.24 — 질문하거나 답변을 확인하세요

→

진행도 24 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)