CSS 효과

CSS 효과

CSS 효과를 사용하여 요소에 시각적 효과를 추가하거나 겹치는 요소와 혼합되는 방식을 구성할 수 있습니다. CSS 효과에는 애니메이션을 적용할 수 있고 미디어 규칙에서 CSS 효과를 재정의할 수 있습니다.

단일 요소가 선택되면 CSS 효과 패널에서 CSS 효과 설정을 찾을 수 있습니다. 패널이 작업공간에 표시되지 않으면 창 메뉴에서 패널을 전환합니다.

CSS 효과는 마스크에 적용할 수 없습니다.

혼합 블렌딩 모드

혼합 블렌딩 모드는 요소와 배경 색상의 색조, 채도, 밝기 값을 기준으로 요소의 콘텐츠가 요소의 배경과 어떻게 혼합되는지 결정합니다.

혼합 블렌딩 모드를 적용하려면 다음 단계를 따르세요.

1. 배경과 혼합하려는 요소를 선택합니다.
2. CSS 효과 패널에서 혼합 블렌딩 모드 드롭다운을 사용하여 혼합 블렌딩 모드를 선택합니다.

다양한 혼합 모드를 선택하여 효과를 미리 확인해 보세요. 요소가 예상한 대로 혼합되지 않으면 혼합할 다른 요소 앞에 선택한 요소가 있는지 확인합니다.

혼합 블렌딩 모드 목록

• 일반(효과 없음) - 혼합하지 않습니다.
• 색상 - 요소 색상의 색조와 채도 및 배경 색상의 광도를 사용합니다.
• 색상 번 - 배경 색상을 반전시켜 요소 색상으로 나눈 다음 결과를 반전시킵니다.
• 색상 닷지 - 배경 색상을 요소 색상의 역으로 나눕니다.
• 어둡게 - 요소나 배경에 더 어두운 색상을 사용합니다.
• 차이 - 밝은 색상에서 어두운 색상을 뺍니다.
• 제외 - 차이 모드와 동일하게 적용되지만 대비가 낮습니다.
• 하드 라이트 - 요소가 배경보다 어두우면 곱하기 모드를 적용하고, 요소가 더 밝으면 스크린 모드를 적용합니다.
• 색조 - 요소 색상의 색조 및 배경 색상의 채도와 광도를 사용합니다.
• 밝게 - 요소 또는 배경에 더 밝은 색상을 사용합니다.
• 광도 - 요소 색상의 광도 및 배경 색상의 색조와 채도를 사용합니다.
• 곱하기 - 요소 색상을 배경 색상과 곱합니다.
• 오버레이 - 요소가 배경보다 밝으면 곱하기 모드를 적용하고, 요소가 더 어두우면 스크린 모드를 적용합니다.
• 채도 - 요소 색상의 채도와 배경 색상의 색조 및 광도를 사용합니다.
• 스크린 - 요소 및 배경 색상을 반전시키고 곱한 다음 결과를 반전시킵니다.
• 소프트 라이트 - 하드 라이트 모드와 동일하지만 더 부드러운 효과가 적용됩니다.

필터

필터를 사용하면 블러, 그림자와 같은 CSS를 사용하여 요소에 시각 효과를 추가할 수 있습니다.

동영상 문서 및 이미지 광고에서는 배경화면 도구를 사용하여 요소 뒤에 있는 영역에 CSS 필터를 적용할 수 있습니다.

필터 추가

새 필터를 추가하는 방법은 다음과 같습니다.

1. 필터를 추가할 요소를 선택합니다.
2. CSS 효과 패널에서 필터 추가를 클릭합니다.
3. 적용할 필터를 선택합니다. 사용할 수 있는 필터는 다음과 같습니다.
   • 블러
   • 밝기
   • 대비
   • 그림자
   • 그레이 스케일
   • 색조 순환
   • 반전
   • 불투명도
   • 선명하게
   • 세피아
4. 필요에 따라 구성 옵션을 조정합니다. (자세한 정보는 아래 내용을 참고하세요.)

한 요소에 여러 필터를 추가할 수 있으며, 이러한 경우 필터를 재정렬할 수 있습니다.

필터 목록

블러

요소에 블러를 적용합니다.

구성 옵션

• 반경 - 블러의 반경입니다(0픽셀~100픽셀).

밝기

요소를 더 밝거나 어둡게 만듭니다.

구성 옵션

• 비율 - 0%로 설정하면 요소가 검은색으로 표시되고 100%로 설정하면 요소가 변경되지 않습니다. 최대 비율은 1,000%입니다.

대비

요소의 대비를 조정합니다.

구성 옵션

• 비율 - 0%로 설정하면 요소가 회색으로 표시되고 100%로 설정하면 요소가 변경되지 않습니다. 최대 비율은 1,000%입니다.

그림자

요소에 그림자를 추가합니다.

구성 옵션

• 오프셋 x - 그림자까지의 가로 거리입니다(-100픽셀~100픽셀).
• 오프셋 y - 그림자까지의 세로 거리입니다(-100픽셀~100픽셀).
• 반경 - 그림자의 블러입니다(0픽셀~100픽셀).
• 색상 - 그림자의 색상입니다.

그레이 스케일

요소를 그레이 스케일로 변환합니다.

구성 옵션

• 비율 - 0%로 설정하면 요소가 변경되지 않고 100%로 설정하면 요소에 완전히 그레이 스케일이 적용됩니다.

색조 순환

요소의 색상을 조정합니다.

구성 옵션

• 각도 - 색상환을 중심으로 회전하는 각도입니다(0도~360도).

반전

요소의 색상을 반전합니다.

구성 옵션

• 비율 - 0%로 설정하면 요소가 변경되지 않고 100%로 설정하면 요소의 색상을 완전히 반전합니다.

불투명도

요소의 불투명도를 변경합니다.

구성 옵션

• 비율 - 0%로 설정하면 요소를 완전히 투명하게 만들고 100%로 설정하면 요소가 변경되지 않습니다.

선명하게

요소를 선명하게 합니다.

구성 옵션

• 비율 - 0%로 설정하면 요소를 전혀 선명하게 만들지 않고 100%로 설정하면 요소를 그대로 유지합니다. 최대 비율은 1,000%입니다.

세피아

요소를 세피아로 변환합니다.

구성 옵션

• 비율 - 0%로 설정하면 요소가 변경되지 않고 100%로 설정하면 요소에 완전히 세피아가 적용됩니다.

필터 재정렬

동일한 요소에 여러 필터가 적용되면 CSS 효과 패널에 표시된 순서대로 필터가 적용됩니다.

필터 순서를 변경하려면 다음 절차를 따르세요.

1. 재정렬할 필터의 이름 위로 마우스를 가져갑니다. 점 3개 가 표시됩니다.
2. 점을 핸들로 사용하여 패널에서 필터를 원하는 위치로 드래그 앤 드롭합니다.

필터 숨기기

필터는 스테이지, 미리보기, 게시된 파일에 적용되지 않도록 숨길 수 있습니다.

필터를 숨기려면 다음 단계를 따르세요.

1. 필터 이름 위로 마우스를 가져갑니다.
2. 숨기기 아이콘을 클릭합니다.
3. 필터를 다시 표시하려면 표시 아이콘을 클릭합니다.

숨겨진 필터의 컨트롤은 수정할 수 없습니다.

필터 삭제

필터를 삭제하려면 다음 단계를 따르세요.

1. 필터 이름 위로 마우스를 가져갑니다.
2. 삭제 아이콘을 클릭합니다.