Opacity
불투명도
불투명도는 요소와 그 자식이 얼마나 단단하게 보이는지를 나타냅니다. 투명에서 불투명까지 범위가 가능합니다.
다른 예시
끌어서 옮길 때 반투명하게 보여요. 원래 자리는 그대로 보이면서 움직이는 복사본은 다르게 보이죠.
주요 부분
- 01Content surface
- 02Distinct visual treatment
- 03Action and readability check
사용할 때
대비가 읽기 가능한 상태에서 전환, 오버레이, 미리보기 또는 배경 레이어에 사용하세요.
다음 경우에는 사용하지 마세요
텍스트를 사라지게 하기 위해 상자 전체만 낮추지 마세요. 모든 자식 요소와 혼합 색상이 변하게 됩니다.
코드에서 사용된 이름
opacity: 0…1 / alpha channel 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 불투명도 (Opacity)。 User context：끌어서 옮길 때 반투명하게 보여요. 원래 자리는 그대로 보이면서 움직이는 복사본은 다르게 보이죠. Design concept to apply：불투명도 (Opacity)。 Why it fits：대비가 읽기 가능한 상태에서 전환, 오버레이, 미리보기 또는 배경 레이어에 사용하세요. Do not use it when：텍스트를 사라지게 하기 위해 상자 전체만 낮추지 마세요. 모든 자식 요소와 혼합 색상이 변하게 됩니다. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 불투명도 (Opacity) is used now. Definition: 불투명도는 요소와 그 자식이 얼마나 단단하게 보이는지를 나타냅니다. 투명에서 불투명까지 범위가 가능합니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.