편집기 부가기능용 CSS 패키지

편집기 부가기능이 Google Sheets, Docs, Slides, Forms와 비슷하게 디자인되도록 하려면 아래의 CSS 패키지에 링크를 걸어 글꼴, 버튼, 양식 요소에 Google 스타일을 적용합니다. 사용 중인 CSS 패키지 샘플은 문서 부가기능 빠른 시작을 참고하세요. CSS 패키지를 사용하려면 각 HTML 파일 상단에 다음을 포함하기만 하면 됩니다.

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

모든 브라우저에서 양식 요소의 스타일을 완벽하게 제어할 수는 없습니다. 특히 <select> 요소는 여전히 제대로 작동하지만 Firefox 및 Internet Explorer에서 일부 시각적 아티팩트를 표시합니다. 특정 브라우저에서 스타일이 어떻게 표시되는지 확인하려면 브라우저에서 이 페이지를 로드하기만 하면 됩니다.

서체

사용 방식에 따라 다음과 같은 스타일로 모든 텍스트에 Arial 글꼴을 사용하세요.

사용 및 모양 CSS 패키지로 마크업 
<h1>Titles and headers</h1>
<b>Bold text</b>
Normal text
<a href="">Links</a>
<span class="current">Current navigation selection</span>
<span class="error">Form input errors</span>
<span class="gray">Gray text</span>
<span class="secondary">Secondary text</span>

버튼

<a class="button">뿐만 아니라 <button>, <input type="button">, <input type="submit"> 등 모든 표준 유형의 버튼을 사용할 수 있습니다. 가로로 인접한 버튼은 자동으로 배치됩니다. 다양한 용도에 사용할 수 있는 여러 색상이 있습니다.

사용 디자인 CSS 패키지로 마크업
기본 액션 
<button class="action">Translate</button>
보조 액션 
<button>Close</button>
액션 만들기 
<button class="create">Create</button>
공유 작업 
<button class="share">Share</button>

체크박스

예 CSS 패키지로 마크업 
<div>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checked</label>
</div>
<div>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" checked disabled>
  <label for="checkbox3">Checked, disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox4" disabled>
  <label for="checkbox4">Unchecked, disabled</label>
</div>

라디오 버튼

예 CSS 패키지로 마크업 
<div>
  <input type="radio" name="radio-a" id="radio1" checked>
  <label for="radio1">Checked</label>
</div>
<div>
  <input type="radio" name="radio-a" id="radio2">
  <label for="radio2">Unchecked</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio3"
      checked disabled>
  <label for="radio3">Checked, disabled</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio4" disabled>
  <label for="radio4">Unchecked, disabled</label>
</div>

메뉴 선택

예 CSS 패키지로 마크업 
<div class="block form-group">
  <label for="select">Select</label>
  <select id="select">
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>
<div class="block form-group">
  <label for="disabled-select">Disabled select</label>
  <select id="disabled-select" disabled>
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>

텍스트 영역

예 CSS 패키지로 마크업 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

입력란

예 CSS 패키지로 마크업 
<div class="inline form-group">
  <label for="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
<div class="inline form-group">
  <label for="state">State</label>
  <input type="text" id="state" style="width: 40px;">
</div>
<div class="inline form-group">
  <label for="zip-code">Zip code</label>
  <input type="text" id="zip-code" style="width: 65px;">
</div>

사이드바의 스타일은 까다로울 수 있습니다. 높이가 가변적이지만 많은 부가기능에 스크롤되지 않는 브랜딩 영역을 포함해야 하기 때문입니다. 다음은 Google 문서 부가기능 빠른 시작에서 간단하게 복사한 사이드바 사본입니다. 텍스트 영역의 오른쪽 하단을 드래그하여 콘텐츠를 사이드바보다 더 높게 만들면 콘텐츠 영역이 자동으로 스크롤되지만 하단의 브랜딩은 스크롤되지 않습니다.

이 예에서는 sidebar 클래스를 사용하여 올바른 패딩을 적용하고 bottom 클래스를 사용하여 브랜딩 영역을 맨 아래로 강제로 적용합니다. 그러면 로컬 클래스 branding-below는 사이드바의 기본 영역이 하단으로부터 벗어나지 않도록 해야 하는 영역을 정의합니다.

예 CSS 패키지로 마크업 
<style>
.branding-below {
  bottom: 56px;
  top: 0;
}
</style>

<div class="sidebar branding-below">
  <div class="block form-group">
    <label for="translated-text">
      <b>Translation</b></label>
    <textarea id="translated-text" rows="15">
    </textarea>
  </div>

  <div class="block">
    <input type="checkbox" id="save-prefs">
    <label for="save-prefs">
      Use these languages by default</label>
  </div>

 <div class="block">
    <button class="blue">Translate</button>
    <button>Insert</button>
  </div>
</div>

<div class="sidebar bottom">
  <span class="gray">
    Translate sample by Google</span>
</div>