AAtomic CSS

filter

요소에 밝기, 그레이스케일, 색상 조절 등 시각적 효과를 적용합니다. 자식 요소를 포함한 전체 렌더링 결과에 영향을 주며, backdrop-filter는 요소 뒤의 배경에만 효과를 적용합니다.

클래스 목록

클래스CSS설명
fbr150pfilter: brightness(150%)밝기 150% (밝게)
fbr80pfilter: brightness(80%)밝기 80% (어둡게)
fc120pfilter: contrast(120%)대비 120% (선명)
fc80pfilter: contrast(80%)대비 80% (부드럽게)
fg100pfilter: grayscale(100%)완전한 흑백
fg50pfilter: grayscale(50%)50% 흑백
fhr90degfilter: hue-rotate(90deg)색상 90도 회전
fhr180degfilter: hue-rotate(180deg)색상 180도 회전
fi100pfilter: invert(100%)색상 반전 (네거티브)
fo50pfilter: opacity(50%)불투명도 50%
fsa200pfilter: saturate(200%)채도 200% (선명한 색상)
fds2px4px8px000000filter: drop-shadow(2px 4px 8px #000000)드롭 섀도우
finhfilter: inherit부모 필터 상속
fufilter: unset필터 초기화
bfb5pxbackdrop-filter: blur(5px)배경 블러 5px
bfb12pxbackdrop-filter: blur(12px)배경 블러 12px

패턴 구조

filter 클래스는 필터 함수의 약어 + 값 + 단위로 구성됩니다.

접두사함수단위예시
fbrbrightness()p (%)fbr120p, fbr150p, fbr80p
fccontrast()p (%)fc80p, fc120p, fc200p
fggrayscale()p (%)fg100p, fg50p, fg0p
fhrhue-rotate()degfhr90deg, fhr180deg, fhr270deg
fiinvert()p (%)fi100p, fi50p
foopacity()p (%)fo50p, fo80p
fsasaturate()p (%)fsa200p, fsa50p
fssepia()p (%) — font-size와 충돌 주의fs100p (제한적)
fdsdrop-shadow()px + HEXfds2px4px8px000000
finhfilter: inherit없음finh
fufilter: unset없음fu
bfbbackdrop-filter: blur()pxbfb5px, bfb12px
bfbrbackdrop-filter: brightness()p (%)bfbr80p, bfbr120p

시각적 비교

각 filter가 요소에 미치는 효과를 비교합니다.

원본 —

필터 없음. 비교 기준입니다.

Brightness 150% — fbr150p

fbr150p: 밝기 증가. 전체적으로 밝아집니다.

Brightness 50% — fbr50p

fbr50p: 밝기 감소. 전체적으로 어두워집니다.

Grayscale — fg100p

fg100p: 완전한 흑백. 색상 정보가 제거됩니다.

Contrast — fc200p

fc200p: 대비 강화. 밝은 부분은 더 밝고 어두운 부분은 더 어둡습니다.

Hue Rotate — fhr90deg

fhr90deg: 색상 90도 회전. 모든 색상이 변경됩니다.

Invert — fi100p

fi100p: 색상 반전. 네거티브 효과입니다.

Saturate — fsa200p

fsa200p: 채도 200%. 색상이 더 선명해집니다.

Opacity — fo50p

fo50p: 불투명도 50%. 반투명 효과입니다.

필터별 상세

filter: blur() — 미지원

fb = flex-basis (blur 아님!)

fb 접두사는 flex-basis로 파싱됩니다. filter: blur()는 현재 Atomic CSS에서 지원하지 않습니다. 배경 블러가 필요하면 bfb(backdrop-filter: blur)를 사용하세요.

fbrfilter: brightness()

요소의 밝기를 조절합니다. 100%가 원본이며, 그 이상은 밝아지고 이하는 어두워집니다. 이미지 호버 효과나 다크모드 조정에 유용합니다.

<!-- 어두운 오버레이 효과 -->
<img class="fbr50p" src="hero.jpg" />

<!-- 호버 시 밝기 증가 -->
<img class="fbr80p hover-fbr100p tall200msease cp" src="..." />

<!-- 밝게 강조 -->
<div class="fbr150p">밝게 처리된 영역</div>

주요 클래스

fbr50pfilter: brightness(50%)
fbr80pfilter: brightness(80%)
fbr100pfilter: brightness(100%)
fbr120pfilter: brightness(120%)
fbr150pfilter: brightness(150%)
fbr200pfilter: brightness(200%)

fgfilter: grayscale()

요소를 흑백으로 변환합니다. 100%면 완전한 흑백, 0%면 원본 색상입니다. 비활성 상태 표시, 호버 시 컬러 복원 효과에 자주 사용합니다.

<!-- 흑백 이미지 (호버 시 컬러 복원) -->
<img class="fg100p hover-fg0p tall300msease cp" src="..." />

<!-- 비활성 상태 표시 -->
<div class="fg100p o50">비활성 상태</div>

<!-- 부분 흑백 -->
<img class="fg50p" src="..." />

주요 클래스

fg0pfilter: grayscale(0%)
fg25pfilter: grayscale(25%)
fg50pfilter: grayscale(50%)
fg75pfilter: grayscale(75%)
fg100pfilter: grayscale(100%)

fdsfilter: drop-shadow()

요소의 실제 형태를 따르는 그림자를 추가합니다. box-shadow와 달리 투명 영역을 무시하고 콘텐츠 형태에 맞는 그림자를 생성합니다. PNG 아이콘, SVG 등에 유용합니다.

패턴

fds{X}px{Y}px{blur}px{HEX6}
<!-- 아이콘에 그림자 -->
<svg class="fds2px4px8px000000">...</svg>

<!-- PNG 이미지에 형태를 따르는 그림자 -->
<img class="fds4px4px10px000000" src="logo.png" />

<!-- 컬러 그림자 -->
<div class="fds2px4px8px6366F1">인디고 그림자</div>

예시 클래스

fds2px2px4px000000filter: drop-shadow(2px 2px 4px #000000)
fds2px4px8px000000filter: drop-shadow(2px 4px 8px #000000)
fds4px4px10px6366F1filter: drop-shadow(4px 4px 10px #6366F1)
fds0px0px8px000000filter: drop-shadow(0px 0px 8px #000000)

bf*backdrop-filter

요소 자체가 아닌 요소 뒤의 배경에 필터를 적용합니다. 글래스모피즘(유리 효과) 구현에 핵심이며, bf 접두사 뒤에 filter와 동일한 함수 약어를 사용합니다.

<!-- 글래스모피즘 (유리 효과) -->
<div class="bfb12px bg255-255-255-10 br12px p2rem">
  배경이 블러되는 유리 효과 오버레이
</div>

<!-- 어두운 글래스 -->
<div class="bfb10px bg0-0-0-50 br8px p2rem cFFFFFF">
  반투명 어두운 오버레이
</div>

<!-- 헤더에 글래스 효과 -->
<header class="pf t0 l0 w100p bfb12px bg0-0-0-30 py12px px2rem zi100">
  <nav>네비게이션</nav>
</header>

주요 클래스

bfb5pxbackdrop-filter: blur(5px)
bfb10pxbackdrop-filter: blur(10px)
bfb12pxbackdrop-filter: blur(12px)
bfb2rembackdrop-filter: blur(2rem)
bfbr80pbackdrop-filter: brightness(80%)
bfbr120pbackdrop-filter: brightness(120%)

호버 조합

transition과 함께 사용하면 부드러운 필터 전환 효과를 만들 수 있습니다.

<!-- 흑백 → 컬러 (포트폴리오) -->
<img class="fg100p hover-fg0p tall300msease cp" src="..." />

<!-- 밝기 조절 (갤러리) -->
<img class="fbr80p hover-fbr110p tall200msease cp" src="..." />

<!-- 채도 조절 -->
<img class="fsa50p hover-fsa200p tall300msease cp" src="..." />

<!-- 반전 → 원본 -->
<img class="fi100p hover-fi0p tall300msease cp" src="..." />
클래스 조합효과
fg100p hover-fg0p tall300msease흑백에서 컬러로 전환 (포트폴리오, 팀 소개)
fbr80p hover-fbr110p tall200msease어두운 상태에서 밝게 (이미지 갤러리)
fsa50p hover-fsa200p tall300msease저채도에서 고채도로 (이미지 강조)
fi100p hover-fi0p tall300msease반전에서 원본으로 (인터랙티브 효과)
o50 hover-o100 fg100p hover-fg0p tall300msease페이드 + 흑백 해제 조합

drop-shadow vs box-shadow

fds(drop-shadow)와 box-shadow는 모두 그림자를 추가하지만, 적용 방식이 다릅니다.

drop-shadow (fds)box-shadow
적용 대상콘텐츠의 실제 형태 (투명 영역 무시)요소의 박스 (border-box 기준)
투명 PNG/SVG형태를 따라 그림자 생성사각 박스 기준 그림자
inset 지원불가가능 (내부 그림자)
spread 지원불가가능 (그림자 확장)
다중 적용CSS에서만 가능쉼표로 다중 적용 가능
주요 용도아이콘, 비정형 요소 그림자카드, 버튼, 박스 그림자

팁 & 주의사항

자식 요소 포함

filter는 요소와 모든 자식에 적용됩니다. 부모에 fg100p를 주면 자식도 흑백이 됩니다. 배경만 블러하려면 bfb5px(backdrop-filter)를 사용하세요.

drop-shadow는 형태를 따름

fds는 투명 영역을 무시하고 실제 콘텐츠 형태에 맞는 그림자를 생성합니다. PNG 아이콘이나 SVG에 그림자를 줄 때 box-shadow보다 자연스럽습니다.

필터 조합 불가

Atomic CSS에서 한 요소에 여러 filter 클래스를 적용하면 마지막 값만 적용됩니다. 여러 필터를 동시에 사용하려면 중첩 요소에 각각 적용하세요.

성능 고려

filter와 backdrop-filter는 GPU를 사용하지만, 큰 요소나 많은 요소에 적용하면 성능에 영향을 줄 수 있습니다. 특히 모바일에서 backdrop-filter의 블러 값은 적절히 제한하세요.

opacityshadowtransitiontransformbackground