스타일

스타일 패널을 사용하면 앱의 모양과 느낌을 맞춤설정할 수 있습니다. 테마를 설정하고, 위젯 변형 중에서 원하는 항목을 선택하고, 자신만의 스타일을 만들 수 있습니다.

글로벌 스타일: 한 번에 여러 개의 위젯 스타일 지정

테마로 앱 전체 스타일 설정

스타일 탭 상단의 테마 선택도구는 앱의 기본 위젯 모양을 제어합니다. App Maker에는 현재 두 가지 테마가 있습니다.

  • 머티리얼: 표준 Google 시각적 스타일인 머티리얼 디자인을 구현하는 테마. Inbox 또는 Keep과 같은 Google 즐겨찾기와 유사한 앱을 제작하려면 이 테마를 사용하세요.

  • 일반: 일반적인 모양과 느낌을 제공하는 단순한 테마. 자신만의 고유한 시각적 스타일을 개발하려면 일반 테마로 제작하세요.

CSS로 위젯 맞춤설정

머티리얼 위젯을 조정하거나 일반 테마를 꾸미려는 경우 자체 Cascading Style Sheets(CSS)를 작성하여 위젯을 맞춤설정할 수 있습니다.

App Maker 위젯과 하위 구성요소에는 이름 앞에 프리픽스 app-가 붙은 기본 제공 CSS 클래스가 있습니다. 위젯의 모양을 변경하려면 테마 선택도구 아래의 텍스트 영역을 사용하여 이 클래스에 고유한 CSS를 추가합니다. 예를 들면 다음과 같습니다.

/* Adds rounded corners to button widgets */
    .app-Button {
      border-radius: 10px;
    }

    /* Sets font size for rows in list panels */
    .app-ListPanelRow {
      font-size: 1.2em;
    }
    

또한 광범위한 CSS 선택도구를 사용하여 앱의 스타일을 지정할 수 있습니다.

/* Turns off link underlines. */
    .app-Link:link {
      text-decoration: none;
    }

    /* Changes color of disabled buttons. */
    .app-Button[disabled] {
      background-image: none;
      background-color: white;
    }
    

다양한 화면 크기의 스타일

사용자는 크거나 작은 화면이 있는 기기에서 앱에 액세스할 수 있습니다. 화면 크기(화면 해상도라고도 함)에 따라 레이아웃이 변경되는 반응형 디자인을 포함하여 앱 환경을 개선할 수 있습니다.

다양한 화면 크기에 맞게 자동으로 레이아웃을 조정하려면 글로벌 CSS에서 미디어 쿼리를 사용하세요. 반응형 디자인에 대한 소개는 반응형 웹 디자인 기본 사항을 참조하세요. 예를 들어 반응형 레이아웃 그리드를 참조하세요.

페이지 편집기에서 크기별 스타일 테스트

스타일을 테스트하려면 캔버스의 크기를 수동으로 조절하거나 특정 화면 해상도를 적용하면 됩니다. 페이지 편집기에서 해상도를 변경해도 게시된 앱에는 영향을 주지 않으며 다른 개발자는 변경사항을 볼 수 없습니다. 페이지를 새로고침하면 캔버스를 원래 커스텀 크기로 되돌릴 수 있습니다.

특정 화면 해상도를 선택하려면 페이지 편집기 상단에서 기기 해상도 를 클릭합니다.

커스텀 해상도를 선택하지 않으면 오른쪽 상단 모서리에 캔버스의 화면 크기가 표시됩니다.이 경우 커스텀 크기는 속성 편집기의 치수 값에 있습니다.

화면 해상도 관리

화면 해상도를 추가하려면 기기 해상도 를 클릭하고 해상도 추가를 클릭합니다. 또는 설정 앱 설정해상도 추가를 클릭하면 됩니다.

화면 해상도를 수정하고 삭제하려면 설정 앱 설정으로 이동하여 표시 영역 해상도 섹션을 찾습니다. 수정하거나 삭제할 해상도를 가리킨 다음 수정 또는 삭제 를 클릭합니다.

위젯 스타일: 단일 위젯 스타일 지정

위젯 테마

테마 선택도구를 사용하여 위젯에 스타일을 쉽게 적용할 수 있습니다. 위젯을 선택하고 작업 툴바의 테마 드롭다운 목록에서 원하는 항목을 선택합니다.

테마 선택도구

머티리얼 테마에는 대부분의 위젯에 적용되는 여러 가지 변형이 제공됩니다. 예를 들어 패널 위젯에는 흰 종이처럼 보이는 Paper 변형, 패널 아래에 위젯을 표시하는 Transparent 변형 등이 있습니다.

위젯 관련 CSS

스타일 탭에는 커스텀 CSS를 입력할 수 있는 텍스트 영역이 있어서 선택한 위젯의 스타일을 정확한 사양으로 조정할 수 있습니다. 또한 위젯 스타일의 이름은 프리픽스 .app-, 위젯이 있는 페이지 이름, 위젯 자체의 이름이 차례로 오는 형식입니다. 위젯이 선택되면 자동 완성 팝업 상단에 표시됩니다.

예:

/* Changes color of SampleButton1 to yellow */
    .app-NewPage-SampleButton1 {
      background-image: none;
      background-color: yellow;
    }

    /* Sets font in SampleListPanel1's rows to bold */
    .app-NewPage-SampleListPanel1Row {
      font-weight: bold;
    }
    

커스텀 변형

App Maker를 사용하여 자체 변형을 만들 수도 있습니다. 변형을 만들려면 스타일 탭의 CSS 섹션을 사용하고, app-[WidgetType]--[VariantName] 형식의 이름으로 클래스를 만듭니다. 예를 들면 다음과 같습니다.

.app-Button--RedButton {
      background-image: none;
      background-color: red;
    }
    

적절히 명명된 클래스를 만들면 해당 위젯이 선택되었을 때 작업 툴바의 변형 드롭다운에 변형이 나타납니다.

styles 속성을 포함한 추가 스타일

속성 편집기의 Display 아래에 있는 styles 속성을 사용하면 스타일 패널 외부의 위젯에 스타일을 추가할 수 있습니다. 스타일 아래에 클래스를 정의하고 속성에 추가하세요. 이러한 방법으로 할당된 스타일에는 일반적인 app- 프리픽스가 필요하지 않습니다. 예를 들면 다음과 같습니다.

.specialSubmitButton {
      background-image: none;
      background-color: red;
    }