배경화면 도구를 사용하여 배경화면 요소를 그리고 요소 뒤에 있는 영역에 CSS 필터 효과를 적용합니다.
배경화면 도구는 동영상 광고와 이미지 광고에만 사용할 수 있습니다.
배경의 배경화면 필터 효과를 표시하려면 배경화면 요소가 최소한 일부는 투명해야 합니다. 기본적으로 새 배경화면 요소는 불투명도 수준이 0.5로 생성됩니다. 이 수준을 변경하여 배경화면 필터 효과의 강도를 조정할 수 있습니다.
배경화면 요소를 추가하는 방법은 다음과 같습니다.
- 팝업 메뉴가 표시될 때까지 툴바에서 배경화면 도구 를 길게 클릭하여 배경화면 요소 도형을 선택합니다.
- 직사각형
- 타원
- 다각형
- 배경화면 모양에 추가 옵션을 설정합니다.
- 직사각형만: 모서리가 둥근 경우 상단의 도구 옵션 막대에서 모서리 반경을 설정합니다. 네 개의 모서리 모두에 동일한 반경을 사용하려면 동일하게 유지 버튼을 사용합니다.
- 다각형만: 상단의 도구 옵션 막대에서 원하는 모양을 선택합니다. 직접 모양을 그리려면 자유 형식 옵션을 사용합니다. 일반 다각형 옵션을 선택하는 경우에는 원하는 다각형의 면 개수를 입력합니다.
- 배경화면 요소를 그립니다.
- Shift 키를 길게 누른 상태에서 그리면 요소가 제한되어 동일한 너비 및 높이를 지니게 됩니다. Shift 키는 자유 형식 요소나 미리 설정된 특정 모양(삼각형, 마름모, 오각형, 육각형 및 별 모양 등 면의 길이가 항상 동일하게 그려짐)에는 영향을 미치지 않습니다.
- 처음의 그리기 위치를 요소의 중심점으로 사용하려면 Alt 키를 길게 누릅니다.
- 다각형 배경화면을 그린 후에는 각 꼭짓점을 드래그하여 배경화면 모양을 변경할 수 있지만, 면 개수를 변경할 수는 없습니다.
- 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%로 설정하면 배경이 완전히 세피아로 바뀝니다.
다른 필터 추가
배경화면 요소에 여러 가지 필터를 사용할 수 있습니다. 다른 필터를 추가하는 방법은 다음과 같습니다.
- 배경화면 요소를 선택합니다.
- CSS 효과 패널에서 배경화면 필터 추가를 클릭합니다.
- 적용할 필터를 선택합니다.
필터 재정렬
동일한 배경화면 요소에 여러 필터가 적용되면 CSS 효과 패널에 표시된 순서대로 필터가 적용됩니다.
필터 순서를 변경하려면 다음 절차를 따르세요.
- 재정렬할 필터의 이름 위로 마우스를 가져갑니다. 점 3개 가 표시됩니다.
- 점을 핸들로 사용하여 패널에서 필터를 원하는 위치로 드래그 앤 드롭합니다.
필터 숨기기
필터는 스테이지, 미리보기, 게시된 파일에 적용되지 않도록 숨길 수 있습니다.
필터를 숨기려면 다음 단계를 따르세요.
- 필터 이름 위로 마우스를 가져갑니다.
- 숨기기 아이콘을 클릭합니다.
- 필터를 다시 표시하려면 표시 아이콘을 클릭합니다.
숨겨진 필터의 컨트롤은 수정할 수 없습니다.
필터 삭제
필터를 삭제하려면 다음 단계를 따르세요.
- 필터 이름 위로 마우스를 가져갑니다.
- 삭제 아이콘을 클릭합니다.
배경화면 요소 수정
스테이지에서 직접 또는 속성 패널을 사용하여 배경화면 요소를 수정할 수 있습니다.
배경화면 요소 크기 조절
크기를 조절하려는 배경화면 요소를 선택한 후, 다음 작업을 수행합니다.
- 속성 패널에서 너비 및 높이 속성을 수정합니다.
- 상단의 도구 옵션 막대에 사용 설정된 변환 컨트롤 옵션을 사용하여 선택 도구 를 사용합니다.
- 가로세로 비율을 유지하려면 Shift 키를 누른 상태에서 드래그합니다.
- 중심점을 변경하지 않고 배경화면 요소의 크기를 조절하려면 Alt(Windows) 키 또는 option(Mac) 키를 누른 상태에서 드래그합니다.
직사각형 배경화면 요소의 모서리 곡률 변경
직사각형 배경화면 요소의 모서리를 직각으로 또는 둥글게 변경하고 둥근 모서리의 곡률 반경을 조정할 수 있습니다.
- 배경화면 요소를 선택합니다.
- '속성' 패널에서 모서리 반경을 픽셀 또는 비율로 조정합니다. 반경을 0으로 설정하면 모서리가 직각이 됩니다.
- '동일하게 유지' 버튼이 활성화된 경우 같은 값이 네 개의 모서리 모두에 적용됩니다. 각 모서리를 따로 구성하려면 버튼을 비활성화합니다.
다각형 배경화면 요소의 도형 변경
스테이지에서 다각형 배경화면 요소의 모양을 조정할 수 있습니다.
- 다각형 배경화면 요소를 선택합니다.
- 툴바에서 다각형 배경화면 도형 도구를 선택합니다. 핸들은 각 꼭짓점에 표시됩니다.
- 각 꼭짓점을 원하는 위치로 드래그합니다.
- 하나의 축(가로 또는 세로)만 따라서 꼭짓점을 움직이려면 Shift 키를 누른 상태에서 드래그합니다.
참고: 기존 다각형 배경화면 도형에 사용되는 면 개수는 변경할 수 없습니다.
배경화면 요소에 애니메이션 적용
배경화면 요소 애니메이션은 동영상 문서에서만 사용할 수 있습니다.
배경화면 요소의 크기, 위치, 필터 속성에 애니메이션을 적용할 수 있습니다.
직사각형 배경화면 요소의 경우 둥근 모서리에 애니메이션을 적용할 수 있습니다. 다각형 배경화면 요소의 경우 키프레임에서 꼭짓점의 위치를 변경하여 요소의 도형(면의 개수 아님)에 애니메이션을 적용할 수도 있습니다.
여러 크기 레이아웃의 배경화면 요소
여러 크기의 레이아웃은 이미지 광고에서만 사용할 수 있습니다.
여러 크기의 레이아웃을 사용하면 특정 크기 및 크기 범위에 대한 필터 속성을 비롯하여 배경화면 요소 속성을 재정의할 수 있습니다. 다각형 배경화면 요소의 도형을 변경할 수도 있습니다.
배경화면 필터 재정의가 있는 경우 반응형 패널의 배경화면 필터 라벨이 노란색으로 표시됩니다.
다른 요소와 마찬가지로 기본 문서를 편집하는 경우에만 배경화면 요소를 추가하거나 삭제할 수 있습니다.