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

반응형 기능은 AMP HTML 광고에서 지원되지 않습니다. 동영상 광고, 애니메이션 GIF 및 이미지 광고는 여러 크기의 레이아웃을 사용할 수 있습니다.

반응형 레이아웃 개요

미디어 규칙을 사용하면 여러 표시 영역 크기의 기본 스타일 및 기타 속성을 재정의할 수 있습니다. 미디어 규칙은 특정 크기 또는 크기 범위에 적용됩니다.

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

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

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

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

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

일반 크기

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

맞춤 크기

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

맞춤 크기 추가

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

맞춤 크기 수정

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

맞춤 크기 삭제

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

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

미디어 범위 지정 규칙은 지정한 크기 범위 내의 모든 크기에 적용됩니다. 원하는 경우 미디어 범위 지정 규칙을 세로 또는 가로 방향으로 제한할 수 있습니다.

미디어 범위 지정 규칙의 크기 범위는 서로 겹칠 수 없습니다. 미디어 범위 지정 규칙은 특정 크기에 대한 미디어 규칙과 겹칠 수 있으며, 이 경우 해당 크기에는 두 가지 규칙이 모두 적용됩니다. 규칙이 서로 상충하는 경우 특정 크기에 대한 미디어 규칙이 우선 적용됩니다.

미디어 범위 지정 규칙 관리

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

이 미디어 범위 지정 규칙은 재정의가 있는 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. 팝업 메뉴에서 재정의 제거를 선택합니다.