AAtomic CSS

background-color

요소의 배경색을 설정합니다. HEX 6자리와 RGBA 형식을 지원하며, hover- 프리픽스로 호버 시 배경색 변경도 가능합니다.

HEX 형식

bg{HEX6} 패턴으로 6자리 HEX 색상을 지정합니다.

클래스CSS미리보기
bg000000background-color: #000000
bgFFFFFFbackground-color: #FFFFFF
bg6366F1background-color: #6366F1
bg34D399background-color: #34D399
bgF43F5Ebackground-color: #F43F5E
bgFBBF24background-color: #FBBF24
bg18181Bbackground-color: #18181B
bg27272Abackground-color: #27272A

RGBA 형식

bg{R}-{G}-{B}-{A} 패턴으로 투명도를 포함한 색상을 지정합니다. A는 0~100 (0.0~1.0).

클래스CSS미리보기
bg0-0-0-50background-color: rgba(0,0,0,0.5)
bg0-0-0-30background-color: rgba(0,0,0,0.3)
bg255-255-255-10background-color: rgba(255,255,255,0.1)
bg99-102-241-20background-color: rgba(99,102,241,0.2)

호버 배경색

hover-bg{HEX6} 패턴으로 마우스 오버 시 배경색을 변경합니다.

<!-- 호버 시 배경색 변경 -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2rem br8px bn cp tall200msease">
  호버해 보세요
</button>

<!-- 카드 호버 효과 -->
<div class="bg18181B hover-bg27272A p2rem br8px cp tall200msease">
  카드 콘텐츠
</div>
hover-bg6366F1
hover-bg34D399
hover-bgF43F5E

자주 쓰는 색상

bg000000

Black

bgFFFFFF

White

bg6366F1

Indigo

bg34D399

Emerald

bgF43F5E

Rose

bgFBBF24

Amber

bg3B82F6

Blue

bg8B5CF6

Violet

사용 예시

<!-- 다크 카드 -->
<div class="bg18181B p2rem br8px">
  <h3 class="cFAFAFA">제목</h3>
  <p class="c71717A">설명</p>
</div>

<!-- 반투명 오버레이 -->
<div class="bg0-0-0-50 pf t0 l0 w100p h100vh df jcc aic">
  <div class="bgFFFFFF p3-2rem br12px">모달 콘텐츠</div>
</div>

<!-- 호버 버튼 -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF py8px px16px br8px bn cp">
  버튼
</button>
colorborder-coloropacitybackground