편집기 부가기능용 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>

버튼

<button>, <input type="button">, <input type="submit">, <a class="button">와 같은 표준 유형의 버튼을 사용할 수 있습니다. 가로로 인접한 버튼은 자동으로 서로 간격을 둡니다. 다양한 용도로 사용할 수 있는 여러 색상이 있습니다.

사용 디자인 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 Docs 부가기능 빠른 시작의 사이드바를 간소화하여 옮긴 사본입니다. 텍스트 영역의 오른쪽 하단 모서리를 드래그하여 콘텐츠가 사이드바보다 더 길어지면 콘텐츠 영역은 자동으로 스크롤되지만 하단의 브랜딩은 스크롤되지 않습니다.

이 예에서는 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>