미디어 규칙 및 재정의 관리하기

미디어 규칙을 사용하려면 다음 단계를 따르세요.

1. 반응형 패널을 열고 '크기 및 범위' 탭에 반응형 레이아웃 체크박스가 선택되어 있는지 확인합니다.
2. 패널에서 크기 또는 크기 범위를 선택하여 해당 미디어 규칙에 대해 재정의를 설정합니다.

미디어 규칙을 선택하면 특정 크기로 제한될 수 없는 패널 및 작업은 사용 중지됩니다. 예를 들어 새 요소를 추가하거나 이벤트를 수정할 수 없습니다. 변경하려면 먼저 '반응형' 패널에서 기본 문서 수정을 선택하세요.

특정 크기에 대한 미디어 규칙

광고 소재가 표시될 것으로 예상되는 광고 슬롯의 정확한 크기를 알고 있다면, 특정 크기에 대한 미디어 규칙을 설정할 수 있습니다.

일반 크기

반응형 패널에는 '크기 및 범위' 탭의 크기 섹션에 현재 파일의 광고 환경에 대한 일반적인 광고 크기가 표시됩니다. 이는 수정하거나 삭제할 수 없습니다.

맞춤 크기

'반응형' 패널에 더 많은 크기를 추가할 수 있습니다.

맞춤 크기 추가

1.  맞춤 크기 추가를 클릭합니다.
2. 원하는 크기를 입력하고 Enter 키를 누릅니다.

맞춤 크기 수정

1. 수정하려는 크기 위로 마우스를 가져갑니다.
2. 수정 아이콘을 클릭합니다.
3. 새 크기를 입력합니다.

맞춤 크기 삭제

1. 삭제하려는 크기 위로 마우스를 가져갑니다.
2. 삭제 아이콘을 클릭합니다.

크기 범위에 대한 미디어 규칙

미디어 범위 지정 규칙 관리

미디어 범위 지정 규칙을 시각화하려면 반응형 패널의 '크기 및 범위' 탭에 있는 '미디어 규칙 범위 지정' 섹션에서 미디어 범위 지정 규칙 관리 버튼을 클릭합니다. 미디어 범위 지정 규칙의 더보기 버튼을 클릭하고 팝업 메뉴에서 대화상자 열기...를 선택합니다.

미디어 범위 지정 규칙 추가

• 패널에서 다음 단계를 수행합니다.
  1.  크기 범위 추가를 클릭합니다.
  2. 크기 범위의 최소 및 최대 크기를 입력합니다.
  3. Enter 키를 누릅니다.
• 대화상자에서 다음을 수행합니다.
  1. 표시 영역 공간 안을 클릭하고 마우스를 드래그하여 직사각형을 그립니다.
     • 직사각형이 빨간색으로 바뀌면 크기 범위가 기존 크기 범위와 겹쳐서 설정할 수 없는 것입니다.
  2. 저장을 클릭합니다.

미디어 범위 지정 규칙의 방향 변경하기

미디어 범위 지정 규칙의 방향을 지정하여 표시 영역 방향이 가로 또는 세로인 경우에만 재정의가 적용되도록 설정할 수 있습니다.

1. 미디어 범위 지정 규칙 옆에 있는 '방향' 드롭다운을 클릭합니다.
2. 새로운 방향 선택:
   • 모든 방향
   • 가로
   • 세로

크기 범위 수정

• 패널에서 다음 단계를 수행합니다.
  1. 미디어 범위 지정 규칙 위로 마우스를 가져간 후 수정 아이콘을 클릭합니다.
  2. 크기 범위의 새로운 최소 및 최대 크기를 입력합니다.
• 대화상자에서 다음을 수행합니다.
  1. 수정하려는 미디어 범위 지정 규칙을 선택합니다. 크기 조절 핸들은 미디어 규칙 도형 주변의 파란색 상자를 따라 표시됩니다.
  2. 도형을 새 위치로 드래그하거나 핸들 중 하나를 드래그합니다.
     • 가로세로 비율을 유지하려면 Shift 키를 누른 상태에서 크기 조절 핸들을 드래그합니다.
     • 상자가 빨간색으로 바뀌면 새 크기 범위가 기존 크기 범위와 겹쳐서 설정할 수 없는 것입니다.
  3. 저장을 클릭합니다.

재정의

여러 표시 영역 크기의 속성을 조정하여 레이아웃을 최적화하려면 재정의를 사용하세요.

크기, 위치, 표시 여부, 소스, 애니메이션 등 CSS에서 정의한 모든 사항을 미디어 규칙에서 변경할 수 있습니다. Google Web Designer를 사용하면 이미지 소스, 구성요소 속성, 텍스트 콘텐츠, 텍스트 맞추기 설정과 같은 추가 속성도 재정의할 수 있습니다. 미디어 규칙을 선택하면 재정의할 수 없는 속성이 사용 중지됩니다.

재정의된 작업 보기

현재 선택한 크기 또는 크기 범위의 재정의는 재정의 탭 아래의 반응형 패널에 표시됩니다. 재정의가 있는 각 요소는 재정의된 값이 있는 속성과 함께 표시됩니다.

재정의 목록 필터링

패널 상단의 드롭다운을 사용하여 재정의 목록을 필터링할 수 있습니다.

• 모두 - 모든 재정의를 표시합니다.
• 현재 페이지 - 현재 페이지에 있는 요소의 재정의를 표시합니다.
• 선택 - 선택한 요소의 재정의를 표시합니다.

재정의 관리

재정의 추가 또는 변경

1. 반응형 패널의 '크기 및 범위' 탭에서 미디어 규칙을 선택합니다. 미디어 규칙이 패널에 강조표시되고 스테이지 왼쪽 상단에 표시됩니다.
2. 원하는 대로 변경합니다.

재정의된 속성의 라벨은 속성 패널, 타임라인(애니메이션이 변경된 경우) 또는 텍스트 패널(텍스트 콘텐츠 또는 텍스트 맞추기 설정이 변경된 경우)에 노란색으로 강조표시됩니다. 

       

재정의가 있는 크기의 경우 반응형 패널에 크기별 미디어 규칙 아이콘이 표시됩니다.

미디어 규칙 재정의 복사

1. 다음 중 하나를 수행하세요.
   • 특정 크기의 재정의 복사: 반응형 패널에서 크기를 마우스 오른쪽 버튼으로 클릭합니다.
   • 크기 범위 재정의 복사: 반응형 패널에서 크기 범위로 마우스를 가져가면 나타나는 더보기 아이콘을 클릭합니다.
2. 팝업 메뉴에서 재정의 복사를 선택합니다.
3. 다음 중 하나를 수행하세요.
   • 재정의를 특정 크기에 붙여넣기: 반응형 패널에서 크기를 마우스 오른쪽 버튼으로 클릭합니다.
   • 재정의를 크기 범위에 붙여넣기: 반응형 패널에서 크기 범위로 마우스를 가져가면 나타나는 더보기 아이콘을 클릭합니다.
4. 팝업 메뉴에서 재정의 붙여넣기를 선택합니다.

재정의 삭제

1. 재정의의 노란색 속성 라벨을 클릭합니다.
   • 대부분의 재정의는 속성 패널에 표시됩니다.
   • 애니메이션에 대한 재정의는 타임라인에 표시됩니다.
   • 텍스트 콘텐츠 또는 텍스트 맞추기 설정에 대한 재정의는 텍스트 패널에서 확인할 수 있습니다.
2. 팝업 대화상자에서 재정의 제거를 선택합니다.

미디어 규칙에 대한 모든 재정의 제거하기

• 특정 크기:
  1. 해당 크기의 크기별 미디어 규칙 아이콘을 마우스 오른쪽 버튼으로 클릭합니다.
  2. 팝업 메뉴에서 재정의 제거를 선택합니다.
• 크기 범위:
  1. 미디어 범위 지정 규칙 위로 마우스를 가져갑니다.
  2. 더보기 아이콘을 클릭합니다.
  3. 팝업 메뉴에서 재정의 제거를 선택합니다.