AAtomic CSS

opacity

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

클래스 목록

클래스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)
적용 범위요소 전체 (자식 포함)해당 색상만
자식 영향모든 자식도 투명해짐자식에 영향 없음
텍스트텍스트도 투명해짐텍스트 불투명 유지
이벤트o0이어도 이벤트 수신 가능해당 없음
트랜지션가능 (부드러운 페이드)색상 트랜지션으로 가능
주요 용도페이드 효과, 비활성 표시배경 투명, 오버레이

호버 & 트랜지션 조합

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

<!-- 페이드 인 효과 -->
<div class="o0 hover-o100 tall200msease">
  마우스를 올리면 나타남
</div>

<!-- 반투명 → 불투명 -->
<button class="o50 hover-o100 tall200msease bg6366F1 cFFFFFF py12px px2rem br8px bn cp">
  호버 시 선명해짐
</button>

<!-- 이미지 오버레이 -->
<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

코드 예시

<!-- 기본 opacity 적용 -->
<div class="bg6366F1 cFFFFFF p2rem br8px o50">
  50% 투명한 카드
</div>

<!-- 비활성 상태 표현 -->
<button class="bg27272A cA1A1AA py12px px2rem br8px bn o50 pen">
  비활성 버튼
</button>

<!-- 페이드 인 호버 효과 -->
<div class="o0 hover-o100 tall200msease bg6366F1 cFFFFFF p2rem br8px cp">
  마우스를 올리면 나타남
</div>

<!-- 배경 오버레이 -->
<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">오버레이 텍스트</h2>
  </div>
</div>

<!-- opacity vs dn 차이 -->
<div class="df gap16px">
  <div class="bg6366F1 p16px br8px cFFFFFF o0">o0: 투명하지만 공간 차지</div>
  <div class="bg6366F1 p16px br8px cFFFFFF dn">dn: 공간도 사라짐</div>
  <div class="bg22C55E p16px br8px cFFFFFF">다음 요소</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