배경화면 필터

배경화면 도구를 사용하여 배경화면 요소를 그리고 요소 뒤에 있는 영역에 CSS 필터 효과를 적용합니다.

배경화면 도구는 동영상 광고이미지 광고에만 사용할 수 있습니다.

배경의 배경화면 필터 효과를 표시하려면 배경화면 요소가 최소한 일부는 투명해야 합니다. 기본적으로 새 배경화면 요소는 불투명도 수준이 0.5로 생성됩니다. 이 수준을 변경하여 배경화면 필터 효과의 강도를 조정할 수 있습니다.

배경화면 요소를 추가하는 방법은 다음과 같습니다.

  1. 팝업 메뉴가 표시될 때까지 툴바에서 배경화면 도구 를 길게 클릭하여 배경화면 요소 도형을 선택합니다.
    • 직사각형
    • 타원
    • 다각형
  2. 배경화면 모양에 추가 옵션을 설정합니다.
    • 직사각형만: 모서리가 둥근 경우 상단의 도구 옵션 막대에서 모서리 반경을 설정합니다. 네 개의 모서리 모두에 동일한 반경을 사용하려면 동일하게 유지 버튼을 사용합니다.
    • 다각형만: 상단의 도구 옵션 막대에서 원하는 모양을 선택합니다. 직접 모양을 그리려면 자유 형식 옵션을 사용합니다. 일반 다각형 옵션을 선택하는 경우에는 원하는 다각형의 면 개수를 입력합니다.
  3. 배경화면 요소를 그립니다.
    • Shift 키를 길게 누른 상태에서 그리면 요소가 제한되어 동일한 너비 및 높이를 지니게 됩니다. Shift 키는 자유 형식 요소나 미리 설정된 특정 모양(삼각형, 마름모, 오각형, 육각형 및 별 모양 등 면의 길이가 항상 동일하게 그려짐)에는 영향을 미치지 않습니다.
    • 처음의 그리기 위치를 요소의 중심점으로 사용하려면 Alt 키를 길게 누릅니다.
    • 다각형 배경화면을 그린 후에는 각 꼭짓점을 드래그하여 배경화면 모양을 변경할 수 있지만, 면 개수를 변경할 수는 없습니다.
  4. CSS 효과 패널에서 적용하려는 배경화면 필터를 구성합니다. 기본적으로 블러 필터는 새 배경화면 요소에 추가됩니다. 사용할 수 있는 필터는 다음과 같습니다.

배경화면 필터 목록

블러

배경에 블러를 적용합니다.

구성 옵션
  • 반경 - 블러의 반경입니다(0픽셀~100픽셀).
밝기

배경을 더 밝거나 어둡게 만듭니다.

구성 옵션
  • 백분율 - 0%로 설정하면 배경이 검은색으로 바뀌고 100%로 설정하면 배경이 변경되지 않습니다. 최대 비율은 1,000%입니다.
대비

배경의 대비를 조정합니다.

구성 옵션
  • 백분율 - 0%로 설정하면 배경이 회색으로 바뀌고 100%로 설정하면 배경이 변경되지 않습니다. 최대 비율은 1,000%입니다.
그림자

배경에 그림자를 추가합니다. 이 효과는 다른 배경화면 필터와 결합되거나 상위 요소가 부분적으로 투명한 경우에만 표시됩니다.

구성 옵션
  • 오프셋 x - 그림자까지의 가로 거리입니다(-100픽셀~100픽셀).
  • 오프셋 y - 그림자까지의 세로 거리입니다(-100픽셀~100픽셀).
  • 반경 - 그림자의 블러입니다(0픽셀~100픽셀).
  • 색상 - 그림자의 색상입니다.
그레이 스케일

배경을 그레이 스케일로 변환합니다.

구성 옵션
  • 백분율 - 0%로 설정하면 배경이 변경되지 않으며, 100%로 설정하면 배경을 완전히 그레이 스케일로 만듭니다.
색조 순환

배경의 색상을 조정합니다.

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

배경 색상을 반전합니다.

구성 옵션
  • 백분율 - 0%로 설정하면 배경이 바뀌지 않고 100%로 설정하면 배경 색상이 완전히 반전됩니다. 50%는 회색으로 렌더링됩니다.
불투명도

배경의 불투명도를 변경합니다. 이 효과는 다른 배경화면 필터와 결합된 경우에만 표시됩니다.

구성 옵션
  • 백분율 - 0%로 설정하면 배경이 완전히 투명해지고 100%로 설정하면 배경이 변경되지 않습니다.
선명하게

배경을 선명하게 합니다.

구성 옵션
  • 비율 - 0%로 설정하면 배경이 전혀 선명하게 바뀌지 않고 100%로 설정하면 배경이 변경되지 않습니다. 최대 비율은 1,000%입니다.
세피아

배경을 세피아로 변환합니다.

구성 옵션
  • 백분율 - 0%로 설정하면 배경이 변경되지 않고 100%로 설정하면 배경이 완전히 세피아로 바뀝니다.

다른 필터 추가

배경화면 요소에 여러 가지 필터를 사용할 수 있습니다. 다른 필터를 추가하는 방법은 다음과 같습니다.

  1. 배경화면 요소를 선택합니다.
  2. CSS 효과 패널에서 배경화면 필터 추가를 클릭합니다.
  3. 적용할 필터를 선택합니다.

필터 재정렬

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

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

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

필터 숨기기

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

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

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

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

필터 삭제

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

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

배경화면 요소 수정

스테이지에서 직접 또는 속성 패널을 사용하여 배경화면 요소를 수정할 수 있습니다.

배경화면 요소 크기 조절

크기를 조절하려는 배경화면 요소를 선택한 후, 다음 작업을 수행합니다.

  • 속성 패널에서 너비 및 높이 속성을 수정합니다.
  • 상단의 도구 옵션 막대에 사용 설정된 변환 컨트롤 옵션을 사용하여 선택 도구 를 사용합니다.
  • 가로세로 비율을 유지하려면 Shift 키를 누른 상태에서 드래그합니다.
  • 중심점을 변경하지 않고 배경화면 요소의 크기를 조절하려면 Alt(Windows) 키 또는 option(Mac) 키를 누른 상태에서 드래그합니다.

직사각형 배경화면 요소의 모서리 곡률 변경

직사각형 배경화면 요소의 모서리를 직각으로 또는 둥글게 변경하고 둥근 모서리의 곡률 반경을 조정할 수 있습니다.

  1. 배경화면 요소를 선택합니다.
  2. '속성' 패널에서 모서리 반경을 픽셀 또는 비율로 조정합니다. 반경을 0으로 설정하면 모서리가 직각이 됩니다.
  3. '동일하게 유지' 버튼이 활성화된 경우 같은 값이 네 개의 모서리 모두에 적용됩니다. 각 모서리를 따로 구성하려면 버튼을 비활성화합니다.

다각형 배경화면 요소의 도형 변경

스테이지에서 다각형 배경화면 요소의 모양을 조정할 수 있습니다.

  1. 다각형 배경화면 요소를 선택합니다.
  2. 툴바에서 다각형 배경화면 도형 도구를 선택합니다. 핸들은 각 꼭짓점에 표시됩니다.
  3. 각 꼭짓점을 원하는 위치로 드래그합니다.
    • 하나의 축(가로 또는 세로)만 따라서 꼭짓점을 움직이려면 Shift 키를 누른 상태에서 드래그합니다.

참고: 기존 다각형 배경화면 도형에 사용되는 면 개수는 변경할 수 없습니다.

배경화면 요소에 애니메이션 적용

배경화면 요소 애니메이션은 동영상 문서에서만 사용할 수 있습니다.

배경화면 요소의 크기, 위치, 필터 속성에 애니메이션을 적용할 수 있습니다.

애니메이션이 적용된 타원형 배경화면 요소

직사각형 배경화면 요소의 경우 둥근 모서리에 애니메이션을 적용할 수 있습니다. 다각형 배경화면 요소의 경우 키프레임에서 꼭짓점의 위치를 변경하여 요소의 도형(면의 개수 아님)에 애니메이션을 적용할 수도 있습니다.

여러 크기 레이아웃의 배경화면 요소

여러 크기의 레이아웃은 이미지 광고에서만 사용할 수 있습니다.

여러 크기의 레이아웃을 사용하면 특정 크기 및 크기 범위에 대한 필터 속성을 비롯하여 배경화면 요소 속성을 재정의할 수 있습니다. 다각형 배경화면 요소의 도형을 변경할 수도 있습니다.

배경화면 필터 재정의가 있는 경우 반응형 패널의 배경화면 필터 라벨이 노란색으로 표시됩니다.

다른 요소와 마찬가지로 기본 문서를 편집하는 경우에만 배경화면 요소를 추가하거나 삭제할 수 있습니다.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?
검색
검색어 지우기
검색 닫기
기본 메뉴
9625505228950364000
true
도움말 센터 검색
true
true
true
true
true
5050422
false
false