오늘은 Tailwind CSS 공식 문서에서 Filters 라고 분류된 클래스명들에 대해 알아보는 시간을 가지자 :)

1. Blur

말 그대로 Blur 효과를 줄 수 있는 클래스이다!

① 클래스명

클래스명	내용
blur-none	• filter: blur(0)
blur-sm	• filter: blur(4px)
blur	• filter: blur(8px)
blur-md	• filter: blur(12px)
blur-lg	• filter: blur(16px)
blur-xl	• filter: blur(24px)
blur-2xl	• filter: blur(40px)
blur-3xl	• filter: blur(64px)

② 예

어떻게 적용되는지 아래 예를 보자

• 코드
  

• 결과

Blur를 적용하지 않은 제일 첫번재 사진과 비교하면 두번째, 세번째 사진은 Blur가 잘 적용된 걸 볼 수 있다!

③ BreakPoint (반응형) / Hover, Focus 적용

Blur를 반응형 디자인과 Hover, Focus에 적용해보자

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:blur-sm
State	<적용할 State>:<클래스명>	hover:blur-sm

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

④ Value Customizing

Blur 클래스명에 사용되는 Value를 커스텀하는 법엔 두가지가 있다

ⓐ tailwind.config.js 파일에 커스텀 값 저장하기

이 방법은 아래 순서대로 따라하면 된다

• 순서

         ㉠ tailwind.config.js 파일 찾기

         ㉡ theme.extend 내부에 blur 만들어 주기

⬇️ ⬇️

         ㉢ theme.extend.blur에 내가 원하는 값 설정
             : "value name" : "value"

이제 아래 코드처럼 blur-xs라는 클래스명으로 사용할 수 있게 된다 👍

• 코드

• 결과

해당 방법은 tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다

ⓑ 인라인 내에서 커스텀 값 적용하기

두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로 [] 대괄호를 이용한다

• 문법
  : blur-[주고자하는 blur 값]

• 코드

• 결과

2. Brightness

해당 요소의 밝기를 조절할 수 있는 간편한 클래스명도 존재한다 😀

① 클래스명

클래스명	내용
brightness-0	• filter: brightness(0)
brightness-50	• filter: brightness(.5)
brightness-75	• filter: brightness(.75)
brightness-90	• filter: brightness(.9)
brightness-200	• filter: brightness(2)

위 표의 클래스 이외에도 정도에 따라 세세하게 클래스명이 지정되어 있으니 Brightness 공식 문서를 참고하면 될 것 같다!

② 예

• 코드
  
• 결과

밝기 조절이 잘 되는 걸 볼 수 있다 👍

③ BreakPoint (반응형) / Hover, Focus 적용

Brightness를 반응형 디자인과 Hover, Focus에 적용해보자

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:brightness-90
State	<적용할 State>:<클래스명>	hover:brightness-90

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

④ Value Customizing

Brightness 클래스명에 사용되는 Value를 커스텀하는 법엔 두가지가 있다

ⓐ tailwind.config.js 파일에 커스텀 값 저장하기

이 방법은 아래 순서대로 따라하면 된다

• 순서

         ㉠ tailwind.config.js 파일 찾기

         ㉡ theme.extend 내부에 brightness 만들어 주기

⬇️ ⬇️

         ㉢ theme.extend.brightness에 내가 원하는 값 설정
             : "value name" : "value"

이제 아래 코드처럼 brightness-25라는 클래스명으로 사용할 수 있게 된다 👍

• 코드

• 결과

해당 방법은 tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다

ⓑ 인라인 내에서 커스텀 값 적용하기

두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로 [] 대괄호를 이용한다

• 문법
  : brightness-[주고자하는 brightness 값]

• 코드

• 결과

3. Contrast

세번째로 Contrast에 대해 정리해보자!

① 클래스명

클래스명	내용
contrast-0	• filter: contrast(0)
contrast-50	• filter: contrast(.5)
contrast-75	• filter: contrast(.75)
contrast-100	• filter: contrast(1)
contrast-200	• filter: contrast(2)

Contrast도 값별로 세분화되어 클래스명이 더 존재하므로 Contrast 공식 문서 를 참고하면 된다!

② 예

이 클래스는 요소의 대비를 조절하는 데에 사용된다. 예를 한 번 보자!

• 코드

• 결과

원본인 첫번째 사진에 비해 대비가 50%인 두번째 사진, 그리고 대비가 2배인 세번째 사진을 확인할 수 있다

③ BreakPoint (반응형) / Hover, Focus 적용

Contrast를 반응형 디자인과 Hover, Focus에 적용해보자

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:contrast-50
State	<적용할 State>:<클래스명>	hover:contrast-50

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

④ Value Customizing

Contrast 클래스명에 사용되는 Value를 커스텀하는 법엔 두가지가 있다

ⓐ tailwind.config.js 파일에 커스텀 값 저장하기

이 방법은 아래 순서대로 따라하면 된다

• 순서

         ㉠ tailwind.config.js 파일 찾기

         ㉡ theme.extend 내부에 contrast 만들어 주기

⬇️ ⬇️

         ㉢ theme.extend.contrast에 내가 원하는 값 설정
             : "value name" : "value"

이제 아래 코드처럼 contrast-25라는 클래스명으로 사용할 수 있게 된다 👍

• 코드

• 결과

해당 방법은 tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다

ⓑ 인라인 내에서 커스텀 값 적용하기

두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로 [] 대괄호를 이용한다

• 문법
  : contrast-[주고자하는 contrast 값]

• 코드

• 결과

4. Invert

Invert는 색상 반전을 적용할 수 있는 클래스이다

① 클래스명

클래스명	내용
invert-0	• filter: invert(0)
invert	• filter: invert(100%)

Invert는 위의 두가지 클래스만 존재한다

② 예

• 코드

• 결과

원본인 첫번째 사진과 비교해보면 색상 반전이 잘 되는 걸 볼 수 있다

③ BreakPoint (반응형) / Hover, Focus 적용

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:invert
State	<적용할 State>:<클래스명>	hover:invert

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

④ Value Customizing

Invert 클래스명에 사용되는 Value를 커스텀하는 법엔 두가지가 있다

ⓐ tailwind.config.js 파일에 커스텀 값 저장하기

이 방법은 아래 순서대로 따라하면 된다

• 순서

         ㉠ tailwind.config.js 파일 찾기

         ㉡ theme.extend 내부에 invert 만들어 주기

⬇️ ⬇️

         ㉢ theme.extend.invert에 내가 원하는 값 설정
             : "value name" : "value"

이제 아래 코드처럼 invert-75라는 클래스명으로 사용할 수 있게 된다 👍

• 코드

• 결과

해당 방법은 tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다

ⓑ 인라인 내에서 커스텀 값 적용하기

두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로 [] 대괄호를 이용한다

• 문법
  : invert-[주고자하는 invert 값]

• 코드

• 결과

5. Drop Shadow

① 클래스명

클래스명	내용
drop-shadow-sm	• filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))
drop-shadow	• filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))
drop-shadow-md	• filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))
drop-shadow-lg	• filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))
drop-shadow-xl	• filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))
drop-shadow-2xl	• filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))
drop-shadow-none	• filter: drop-shadow(0 0 #0000)

우선 클래스는 위의 표처럼 지정되어 있어서 해당 클래스를 적용하면 해당 요소에 그림자 효과를 넣을 수 있다

② Box Shadow 와 비교

그런데 공식 문서를 보다보니 아래와 같이 적혀있었다

읽어보면 Drop Shadow는 텍스트나 SVG 처럼 불규칙적인 모양을 가진 요소에 적합하고, 규칙적인 모양의 요소에는 Box Shadow를 적용하는 게 더 좋다고 한다

나는 Drop Shadow, Box Shadow 둘의 차이점이 뭔지 궁금했다
찾아보다가 이해가 잘 되도록 설명해 놓은 포스팅(출처)을 발견했다. 아래를 보자.

ⓐ Box Shadow

• Box(Border)에만 그림자 적용

ⓑ Drop Shadow

• 요소 전체에 그림자 적용이 되어 Box(Border)에만 국한되지 않고 내부의 투명하거나 반투명한 부분에까지 그림자 적용

이렇게 말로만 봐서는 감이 오지 않으니 직접적인 예를 살펴보자

ⓒ 예

위와 같은 SVG 요소 (border radius : 50%)가 있을 때 Box Shadow, Drop Shadow를 각각 적용한 예는 아래와 같다

㉠ Box Shadow

㉡ Drop Shadow

보다시피 Box Shadow는 Border에만 그림자가 적용되고, Drop Shadow는 일종의 누끼를 따는 것처럼 요소의 외곽선마다 그림자가 적용된다 👍

이젠 둘 차이를 완벽히 알게 되었다 😎

③ BreakPoint (반응형) / Hover, Focus 적용

종류	문법	예
BreakPoint	<적용할 BreakPoint>:<클래스명>	md:drop-shadow
State	<적용할 State>:<클래스명>	hover:drop-shadow

위 표처럼 클래스명 앞에 BreakPoint/State+:만 붙여주면 된다 👍

④ Value Customizing

Drop Shadow 클래스명에 사용되는 Value를 커스텀하는 법엔 두가지가 있다

ⓐ tailwind.config.js 파일에 커스텀 값 저장하기

이 방법은 아래 순서대로 따라하면 된다

• 순서

         ㉠ tailwind.config.js 파일 찾기

         ㉡ theme.extend 내부에 dropShadow 만들어 주기

⬇️ ⬇️

         ㉢ theme.extend.dropShadow에 내가 원하는 값 설정
             : "value name" : "value"

해당 방법은 tailwind.config.js파일 내에 저장한 값이면 어느 곳에서든 전역적으로 사용 가능하다

ⓑ 인라인 내에서 커스텀 값 적용하기

두번째 방법은 첫번째 방법과 달리 전역적으로 사용할 필요 없는 값들을 커스터마이징 할 수 있는 방법으로 [] 대괄호를 이용한다

• 문법
  : drop-shadow-[주고자하는 drop shadow 값]

• 코드

6. 느낀점

여태까지 CSS에서 filter를 사용해 본 적이 없어서 이번 포스팅을 준비하면서 되게 신기했다.

물론 너무 복잡한 작업은 다른 전문 툴을 사용해야겠지만 간단한 블러, 밝기, 그림자, 대비, 반전 작업 정도는 코딩으로 가능하다니 신세계였다.

코딩은 무궁무진하다 😀