AAtomic CSS

opacity

요소의 투명도를 제어하는 속성입니다. o 접두사 뒤에 0~100 사이의 값을 붙여 사용합니다. 0은 완전히 투명, 100은 완전히 불투명입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
o0opacity: 0완전히 투명 (보이지 않음, 공간은 차지)
o10opacity: 0.110% 불투명
o20opacity: 0.220% 불투명
o30opacity: 0.330% 불투명
o50opacity: 0.550% 불투명 (반투명)
o70opacity: 0.770% 불투명
o80opacity: 0.880% 불투명
o90opacity: 0.990% 불투명
o100opacity: 1완전히 불투명 (기본값)

시각적 비교

동일한 인디고 배경 박스에 서로 다른 opacity 값을 적용한 결과입니다.

o00%
o2020%
o5050%
o8080%
o100100%

텍스트에 적용

o100Hello World
o80Hello World
o50Hello World
o30Hello World
o10Hello World

opacity vs RGBA 알파

opacity는 요소 전체(자식 포함)에 투명도를 적용하고, RGBA의 알파값은 해당 색상에만 적용됩니다.

opacity: 0.5 — o50

부모에 o50

자식 텍스트도 함께 투명해짐

요소 전체와 모든 자식에 투명도 적용

RGBA 알파 — bg99-102-241-50

배경만 투명

자식 텍스트는 불투명 유지

배경색만 투명, 자식 요소는 영향 없음

opacity (o50)RGBA 알파 (bg0-0-0-50)
적용 범위Entire element (including children)Only that color
자식 영향All children become transparent tooNo effect on children
텍스트Text also becomes transparentText stays opaque
이벤트Can receive events even at o0N/A
트랜지션Possible (smooth fade)Possible via color transition
주요 용도Fade effects, disabled indicationBackground transparency, overlays

호버 & 트랜지션 조합

hover-o100과 tall200msease를 조합하면 부드러운 페이드 효과를 만들 수 있습니다.

<!-- Fade in effect -->
<div class="o0 hover-o100 tall200msease">
  Appears on hover
</div>

<!-- Semi-transparent to opaque -->
<button class="o50 hover-o100 tall200msease bg6366F1 cFFFFFF py12px px2rem br8px bn cp">
  Becomes clear on hover
</button>

<!-- Image overlay -->
<div class="pr">
  <img src="photo.jpg" class="w100p br8px" />
  <div class="pa t0 l0 w100p h100p bg0-0-0-50 o0 hover-o100 tall300msease df jcc aic">
    <span class="cFFFFFF fs16px fw600">View Detail</span>
  </div>
</div>

미리보기 — 호버해 보세요

o30 → hover-o100
o50 → hover-o100
o0 → hover-o100

코드 예시

<!-- Apply default opacity -->
<div class="bg6366F1 cFFFFFF p2rem br8px o50">
  50% transparent card
</div>

<!-- Disabled state -->
<button class="bg27272A cA1A1AA py12px px2rem br8px bn o50 pen">
  Disabled button
</button>

<!-- Fade in hover effect -->
<div class="o0 hover-o100 tall200msease bg6366F1 cFFFFFF p2rem br8px cp">
  Appears on hover
</div>

<!-- Background overlay -->
<div class="pr h30rem bg18181B br8px oh">
  <div class="pa t0 l0 w100p h100p bg0-0-0-70 df jcc aic">
    <h2 class="cFFFFFF fs2-4rem fw700">Overlay text</h2>
  </div>
</div>

<!-- opacity vs dn difference -->
<div class="df gap16px">
  <div class="bg6366F1 p16px br8px cFFFFFF o0">o0: Transparent but takes up space</div>
  <div class="bg6366F1 p16px br8px cFFFFFF dn">dn: Space also disappears</div>
  <div class="bg22C55E p16px br8px cFFFFFF">Next element</div>
</div>

팁 & 주의사항

opacity는 자식에게 상속됨

부모에 o50을 적용하면 자식 요소도 모두 50% 투명해집니다. 개별 색상만 투명하게 하려면 RGBA 형식(bg0-0-0-50)을 사용하세요.

o0은 공간을 차지함

o0은 요소를 완전히 투명하게 만들지만 공간은 여전히 차지합니다. 공간까지 제거하려면 dn(display: none)을 사용하세요.

페이드 효과 패턴

o0 hover-o100 tall200msease를 조합하면 호버 시 부드럽게 나타나는 페이드 인 효과를 만들 수 있습니다.

값 범위는 0~100

CSS의 opacity는 0~1 사이 소수이지만, Atomic CSS에서는 0~100 정수를 사용합니다. o50은 opacity: 0.5에 해당합니다.

colorbackground-colorvisibilitytransitiondisplay